【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);