今天我们来自己动手用实现一个message插件:
Vue.js 的插件应该暴露一个 install
方法。这个方法的第一个参数是 Vue
构造器,第二个参数是一个可选的选项对象:
//message.vue
<template> <transition name="msg-fade"> <div class="message" :class="type" v-show="visible"> <span class="icon"></span> <p class="content">{{content}}</p> <span class="delete-icon" @click="onCancle">x</span> </div> </transition> </template> <script> const Msg = { name:'message', data(){ return { visible:false, type:'', content:'' } }, install(Vue){ Vue.prototype.$msg = (config)=>{ //通过原型注册一个方法 const MessageConstructor = Vue.extend(Msg); //生成一个Vue子类,子类就是这个组件 const instance = new MessageConstructor({data:config}); //生成该子类的实例 instance.vm = instance.$mount(); //将该实例手动挂载 document.body.appendChild(instance.vm.$el); //将实例挂载到body上 instance.vm.visible = true; } } }, watch:{ visible(v){ if(v){ setTimeout(()=>{ this.onClose() },3000) } } }, methods:{ onClose(){ this.visible = false this.$el.parentNode.removeChild(this.$el) }, show(){ this.visible = true }, onCancle(){ if(this.cancelBtn){ this.cancelBtn.apply(this.content) }; this.onClose(); } }, } export default Msg </script> <style scoped lang='less'> .message { position: fixed; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); background: rgba(0,0,0, 0.6); z-index: 1000; min- 288px; height: 32px; box-sizing: border-box; .icon{ display: inline-block; 12px; height: 12px; margin-left: 16px; background: url(../assets/default.svg) no-repeat; background-size: 12px 12px; vertical-align: middle; } &.success { background: #EBF8F2; border: 1px solid #A7E1C4; border-radius: 4px; .icon{ background: url(../assets/success.svg)no-repeat; background-size: 12px 12px; } } &.warn { background: #FFFAEB; border: 1px solid #FCCCA7; border-radius: 4px; .icon{ background: url(../assets/remind.svg)no-repeat; background-size: 12px 12px; } } &.error { background: #FEF3EB; border: 1px solid #FFE9A7; border-radius: 4px; .icon{ background: url(../assets/error.svg)no-repeat; background-size: 12px 12px; } } .content{ display: inline-block; font-size: 12px; color: rgba(0,0,0,0.65); letter-spacing: 0; line-height: 30px; margin-left: 8px; } .delete-icon{ display: block; 10px; height: 10px; position:absolute; top:9px; right:12px; font-size:18px; line-height: 10px; cursor: pointer; color: #000; opacity: .43; } } .msg-fade-enter-active { animation: alert-fade-in .3s; } .msg-fade-leave-active { animation: alert-fade-out .3s; } @keyframes alert-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes alert-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } </style> //main.js import msg from './components/Message'; Vue.use(msg); //使用: this.$msg({ type:'error', content:'这是一条自定义消息' }) 效果如图