zoukankan      html  css  js  c++  java
  • 【Vue】 编写Vue插件流程

    一、在Vue中编写插件流程

      1、创建组件 components/message.vue

    复制代码
    <template>
        <div class="message" v-if="isShow">
            <span>{{message}}</span>
        </div>
    </template>
    
    <script>
    export default {
        created () {
            console.log(this.message)  
        },
        props:{
           message:{
                type:String,
                default:"成功"
           },
           isShow:{
               type:Boolean,
               default:true
           }
        },
        methods:{
            close(){
                this.isShow=false
            }
        }
    }
    </script>
    复制代码

      2、定义插件

      Vue.js 的插件有一个公开方法 install方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象,我们可以通过这个方法来定义插件

      

    复制代码
    import MsgCom from "./message.vue";
    
    const message = {};
    //Vue中用install来定义插件
    message.install = function (Vue) {
      //避免重复install
      if(message.installed)return;  
    //通过Vue.extend创建一个Vue的子类 const MessageInstance = Vue.extend(MsgCom); let currentMsg; const initInstance = () => { //实例化vue子类 currentMsg = new MessageInstance(); //获取子类的挂载点 let msgEl = currentMsg.$mount().$el; //将子类的挂载点挂载在页面上 document.body.appendChild(msgEl); }; //在Vue的原型上添加实例,以全局调用 Vue.prototype.$msg = { //在实例上创建方法调用插件 showMsg(options) { if (!currentMsg) { initInstance(); } //将页面的对象传给currentMsg对象 Object.assign(currentMsg, options); setTimeout(() => { currentMsg.close(); }, 10000); } } } export default message;
    复制代码

      3、使用插件

    import Message from "./publish/message";
    Vue.use(Message);
  • 相关阅读:
    万豪项目总结
    解决jquery animate({scrollTop$pos},500)与$(window).scroll方法冲突的问题
    一波水文来袭-让我们一起谈谈闭包【原创】
    JS模块化规范AMD之RequireJS
    JS模块化规范CMD之SeaJS
    邂逅Sass和Compass之Compass篇
    邂逅Sass和Compass之Sass篇
    idea 修改SVN账户信息
    idea 创建/加载 maven项目速度较慢
    gitlab新建分支,idea中无法找到
  • 原文地址:https://www.cnblogs.com/liuhaov/p/13503446.html
Copyright © 2011-2022 走看看