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