vue.js开发实现全局调用的消息框组件实例代码

前言

一开始接触到某视频剪辑软件中的组件的时候，对于组件的理解还是不够充分的，最近在开发个人博客项目中，一开始就没准备使用一些现在比较流行的用户界面库（毕竟是个人项目，多练练手还是好的),所以需要自己开发几个全局组件，这里以消息框为例记录下vue.js如何开发全局组件。所谓全局变量是针对某视频剪辑软件实例下说的，即所有的某视频剪辑软件实际都可以运用到这个组件，局部组件就是针对某个实例来说的，只有这个某视频剪辑软件实例下才能发挥作用，下面话不多说了，来一看看详细的介绍吧。

源码

开源代码库地址：说话便宜。给我看看密码。

本地下载地址：http://夏仔。JB 51。net/201711/马援/vue-messagebox(jb51.net).rar

组件模板

///src/components/MessageBox/index。vuetemplate div class=' message-box ' v-show=' isshomessagebox ' div class=' mask ' @ click=' cancel '/div class=' message-content ' SVG class=' icon ' aria-hidden=' true ' @ click=' cancel '使用xlink : href=' # icon-delete ' rel=' external no follow '/use/SVG H3 class=' title ' { title } }/H3 p class='内容“{ content }标题}，content: { type: String，default: '这是弹框内容}，isShowInput: false，inputValue: ' '，isShowCancelBtn: { type:布尔值，default: true }，is show confimrbtn : { type :布尔值，default: true }，cancelbtntext : { type : String，default: '取消}，确认btntext : {键入： String，default: '确定} }，data(){ return { isshomessagebox : false，resolve: ' '，reject: ' '，promise: '' //保存承诺对象}; }，methods: { //确定，将承诺断定为分解状态确认：函数(){ this。isshomessagebox=false如果(这个。isshowinput){ this。解决这个问题。input value)；} else { this。解决('确认')；}这个。移除()；}, //取消，将承诺断定为拒绝状态取消：函数(){ this . isshomessagebox=false this。拒绝(“取消”)；这个。移除()；}, //弹出消息框，并创建承诺对象showMsgBox:函数(){ this . is showmessagebox=true this . promise=新承诺(解决，拒绝)={ this.resolve=解决；this.reject=拒绝；});//返回承诺对象归还这个。答应我；}，移除：函数(){ setTimeout(()={ this。销毁()；}, 300);}，销毁：函数(){这个.$ destroy()；document.body.removeChild(这$ El)；} } };/script style lang=' SCS '作用域/此处省略./style给组件添加全局功能

vue.js官方文档中有开发插件的介绍。具体实现代码如下：

///src/components/MessageBox/index。jsimport msgboxVue来自‘./index。vue '；//定义插件对象const MessageBox={ }；//vue的安装方法，用于定义某视频剪辑软件插件消息框。install=function(Vue，options){ const messagebox instance=Vue。extend(MSgboxVue)；让currentMsg，实例；const initInstance=()={ //实例化某视频剪辑软件实例当前msg=新messagebox实例()；让msgBoxEl=currentMsg .$mount().$ eldocument。尸体。append child(MSgboxel)；};//在某视频剪辑软件的原型上添加实例方法，以全局调用vue。原型。$ MSgbox={ showMSgbox(options){ if(！实例){ initInstance()；} if(选项类型==' string '){ CurrentSg。内容=选项；} else if(选项类型==' object '){ object。赋值(CurrentSg，选项)；}返回当前消息。showmsgbox()；} };};导出默认消息框；全局使用

//src/main。来自“”得jsimport消息框./components/MessageBox/index '；vue。使用(消息框)；页面调用

按照之前定义好的方法，可以在各个页面中愉快的调用该组件了。

这个$msgBox.showMsgBox({ title: '添加分类，content: '请填写分类名称，isShowInput: true}).然后(异步(val)={ //.}).catch(()={ //.});最后来张效果图

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。