• 如何用Vue自己实现一个message提示插件


    今天我们来自己动手用实现一个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:'这是一条自定义消息' }) 效果如图


  • 相关阅读:
    使用java.util.Properties类读写配置文件
    maven配置文件setting.xml字段注释
    使用Nexus搭建Maven代理仓库
    Memcached 内存管理详解
    Memcached常用命令及使用说明
    使用NTP协议服务器时间同步
    Eclipse打JAR包的使用
    Eclipse插件的各种安装方法
    Java中代理对象的使用小结
    tp5框架成功、失败提示模板修改
  • 原文地址:https://www.cnblogs.com/AIonTheRoad/p/11139888.html
Copyright © 2020-2023  润新知