基于某视频剪辑软件写一个全局消息组件的实现

不知道大家在用一些用户界面框架，比如元素用户界面的时候，有没有觉得一些全局组件这个$message()，这是。吐司()等，用起来很爽。他们不像其他的组件，需要去导入，去注册。麻烦的很。

看了元素的源码，自己也撸了一个。其中包括了以前没有接触过的插件知识，哎，感觉自己对某视频剪辑软件的理解还是不够，只停留在了使用的这阶段。需要更多的往深层次的地方去钻。不说废话了，直接上代码。

效果演示

全局组件需要一个index.js文件去注册

BlogMessage.vue

这里的脚本是用分时（同分时)写的。大家只需将这里稍做修改就可以了

模板转换名称=' slide ' div class=' message-wrap ' : class=' type ' v-if=' visible ' div class=' content ' { content } }/div/div/transition/template脚本lang=' ts '从' Vue-property-decorator '导入{ Component，Vue，Watch，Prop }；@ Component({ components : } })导出默认类扩展了Vue {私有内容：字符串=' '；私人访问：布尔值=falseprivate type:字符串=" info//“成功”、“错误”私有startTimer(){ window。settimeout(()={ this。可见=假；}, 3000);}私有挂载(){这个。start timer()；}}/scriptstyle作用域为lang="SCS ".消息包装{位置：已修复；背景-颜色： # 44b 0 F3color: # ffffff左： 40%;宽度： 20%;top: 25px高度： 40pxz指数： 1001；边界半径： 4px文本对齐：中心；border: 1px实心# ebeef5 .内容{行高： 40px}}.错误{背景色： # fef 0f 0；color: # f56c6c}。成功{底色： # f0f 9ebcolor: # 67c23a}。滑动输入激活。滑动-离开-活动{ transition: all 0.3s三次贝塞尔曲线(1,0.5,0.8,1);过渡：全0.2s轻松；}.滑动输入。滑动-离开-到{ transform : translateY(-20px)；opa城市3360 0；}/styleindex.js

从“vue”导入Vue，从“博客消息”导入/BlogMessage。vue ' const MessageBox=vue。extend(BlogMessage)//创建的是一个组件构造器，不是实例const Message={ install:(选项，类型，持续时间)={ if(选项===未定义||选项===null){ options={ content : ' ' } } else if(options的类型==' string ' | | options的类型==' number '){ options={ content : options } if(类型！=未定义的选项！=null){ options。type=type} } let instance=new MessageBox({ data : options }).$ mount()文档。尸体。appendchild(实例$el) //添加数字正射影像图元素Vue.nextTick(()={ //dom元素渲染完成后执行回调实例。visible=true })} } vue。原型。$ message=message。安装；["成功"、"错误"]。forEach(类型={ vue。原型。$ message[type]=(内容)={ return Vue.prototype.$message(内容，类型)})导出默认消息使用组件

1.全局注册

从“Vue”导入Vue从"@/组件/公共/消息"导入消息；Vue.use(消息);2.调用方法

private test1() { this .$message('这是一条普通消息');} private test2() { this .$message.success('这是一条成功消息');//这个$message('这是一条成功消息，'成功');} private test3() { this .$message.error('这是一条失败消息');//这个$message('这是一条失败消息，'错误');}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。