最简单的某视频剪辑软件消息提示全局组件的方法

简介

实现功能

自定义文本自定义类型（默认，消息，成功，警告，危险)自定义过渡时间使用vue-cli3.0生成项目

烤全局组件编写

/src/toast/toast.vue

template div class=' app-toast ' v-if=' IsShow ' : class=' { ' info ' : type=' info '，' success ' : type===' success '，' wra ning ' : type=' danger ' } ' { { text } }/div/template style限定范围。app-toast {位置： }已修复；左侧： 50%;前：名50%；背景# cccpadding : 10pxborder-radius : 5px；transform: translate(-50%，-50%)；color: # fff}。信息{ background: # 00aaee}。成功{ background: # 00ee6b}。正在刷新{ background: # eea300}。危险{ background : # ee 000 c }/style/src/toast/index . js

从“vue”导入vue，从"导入到组件"。/toast.vue'//组件构造器，构造出一个某视频剪辑软件组件实例const toast构造函数=vue。扩展(吐司组件)函数showToast ({ text，type，duration=2000 }){ const Toast DOM=新的toast构造函数({ El : document。createelement(' div ')，data(){ return { is show : true，//是否显示text: text，//文本内容type: type //类型} } }) //添加节点文件。尸体。appendchild(至stdom ).$el) //过渡时间setTimeout(()={ to stdom。isshow=false }，持续时间)}//全局注册函数registryToast(){ vue。原型。$ Toast=ShowToast }导出默认的RegistryToast全局注册

/main.js

从""导入到注册表/吐司/索引' vue。使用(消毒)调用

/src/view/home。某视频剪辑软件

模板div class='home '输入类型='按钮'值='显示弹窗@ click=' show toast '/div/模板脚本导出默认{ name : ' home '，methods: { showToast () { this .$toast({ text: '我是消息//类型： ' wrang '，//持续时间： 3000 })} } } }脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。