实现可以命令式调用的组件
.wrap{position:fixed;顶部：50px；左：50%；显示：弹性；弹性方向：列；对齐项目：居中；transform:translateX(-50%);}.message{--borderWidth:3px;最小宽度：240px；最大宽度：500px；底部边距：10px；边界半径：3px；框阴影：008px#ddd；溢出：隐藏；}.content{填充：8px；line-height:1.3;}.message.info{border-left:var(--borderWidth)solid#909399;背景：#f4f4f5;}.message.success{border-left:var(--borderWidth)solid#67c23a;背景：#f0f9eb;}.message.error{border-left:var(--borderWidth)solid#f56c6c;背景：#fef0f0;}.message.warning{左边框：var(--borderWidth)solid#e6a23c；background:#fdf6ec;}.fade-enter-active,.fade-leave-active{transition:opacity0.5s;}.fade-enter,.fade-leave-to/*.fade-leave-active低于版本2.1。8*/{opacity:0;}前端时间项目需要一个预览功能。我的设计是给预览按钮添加自定义命令，然后赋予预览功能。自定义命令没什么好说的，但是我很难在自定义命令中调用预览组件。当然，这是最后一个。已经实现了，但是代码比较丑，这里看不到。今天看到大佬发的文章代码。代码也很精彩，就往下爬到原文。最下面有个链接实现了一个简单的消息弹窗组件Message。/index.vue{{item.content}}
<脚本>//默认选项constDefaultOptions={duration:1500,type:"info",content:"Thisisamessage!"};letmid=0;exportdefault{data(){return{notices:[]};},methods:{add(notice={}){//名称标识符用于删除弹出窗口let_name=this.getName();//合并选项notice=Object.assign({_name},DefaultOptions,notice);这。通知。推送（通知）；setTimeout(()=>{this.removeNotice(_name);},notice.duration);},getName(){返回"msg_"+mid++;},removeNotice(_name){letindex=this.notices.findIndex(item=>item._name===_name);this.notices.splice(index,1);}}};
.wrap{position:fixed;顶部：50px；左：50%；显示：弹性；弹性方向：列；对齐项目：居中；transform:translateX(-50%);}.message{--borderWidth:3px;最小宽度：240px；最大宽度：500px；底部边距：10px；边界半径：3px；框阴影：008px#ddd；溢出：隐藏；}.content{填充：8px；line-height:1.3;}.message.info{border-left:var(--borderWidth)solid#909399;背景：#f4f4f5;}.message.success{border-left:var(--borderWidth)solid#67c23a;背景：#f0f9eb;}.message.error{border-left:var(--borderWidth)solid#f56c6c;背景：#fef0f0;}.message.warning{左边框：var(--borderWidth)solid#e6a23c；background:#fdf6ec;}.fade-enter-active,.fade-leave-active{transition:opacity0.5s;}.fade-enter,.fade-leave-to/*.fade-leave-active低于版本2.1。8*/{opacity:0;}Message/index.jsimportVuefrom'vue'importIndexfrom'./index.vue'letmessageInstance=nullletMessageConstructor=Vue.extend(Index)//构造一个子类letinit=()=>{messageInstance=newMessageConstructor()//实例化一个组件//$mount可以传入一个selector字符串，表示挂载到这个Selector//如果没有传入selector，则为呈现为文档外部的元素。你可以想象document.createElement()在内存中生成dom。messageInstance.$mount()//messageInstance.$el获取的是dom元素document.body.appendChild(messageInstance.$el)}/***singletonandlazy*/exportletcaller=(options)=>{if(!messageInstance){init(options)}messageInstance.add(options)}exportdefault{//为Vue.use注册返回安装函数install(vue){vue.prototype.$message=caller}}main.jsimportMessagefrom'@/补偿onents/Message/index.js'Vue.use(Message)的两种使用方式/***在.js文件中使用这个*/import{caller}from"@/components/Message/index.js";caller({type:"success",content:"成功消息提示",duration:3000});/***在.vue文件中使用this*/this.$message({type:"success",content:"Successmessageprompt",duration:3000});细节主要集中在Message/index.js文件中，主要通过Vue.extend的全局api和vm.$mount实例的api实现。成为更好工程师的10个Vue开发技巧
