1、在src》components》建立資料夾my-button(用來存放元件和外掛)》建立檔案button.vue(用來存放my-button元件)》 （1）在模板中，建立一個帶有預設插槽值的button按鈕

<button class="btn"><slot>按鈕</slot></button>

（2）預設匯出一個元件名，值為“my-button”

export default{
        name:'my-button'
}

（3）給模板中的按鈕設定樣式

.btn{
    padding: 3px 15px;
    border
 
: 0 none;
    outline: none;
    background-color: #FF0000;
    font-size:14px;
    color: #FFFFFF;
}

View Code 2、在src》components》my-button》建立檔案index.js(用來存放my-button外掛)》 （1）匯入my-button元件

import MyButton from "./button"

（2）在預設匯出的方法中，全域性註冊匯入的元件。

export default{
    install(Vue){
        Vue.component
 
("my-button",MyButton);
    }
}

3、在src》App.vue》 （1）匯入Vue元件

import Vue from "vue"

（2）匯入外掛

import MyButton from "./components/my-button"

（3）啟用外掛

Vue.use(MyButton);

（4）在模板中引用外掛

<my-button @click="submit()">提交</my-button>

【npm run serve】 4、在src》components》my-button》button.vue》 （1）在模板中，給button按鈕新增click事件。

@click="handleClick()"

（2）在click事件的處理函式中，傳遞一個click事件的別名（click）給父元件：this.$emit("click")。

methods:{
    handleClick(){
        this.$emit("click")
}

5、在src》App.vue》 （1）在模板中，給外掛設定（別名）事件。

<my-button @click="submit()">提交</my-button>

（2）在methods物件中，在（別名）事件的處理函式中,做邏輯》 呼叫Vue例項的toast方法（該方法是在後續外掛中定義的），傳入一個物件（自己模擬資料創建出來的物件）。 { message:"請輸入姓名", duration:3000, onClose:()=>{ console.log("已關閉"); } }

methods:{
    submit(){
      this.$toast({   //出現this.$XXX的形式，說明XXX是掛載在原型鏈上的一個自定義方法或者自定義屬性。
        message:"請輸入姓名",//出現的屬性，說明自定義方法會把它賦值給vm例項對應的屬性中
        duration:3000,
        onClose:()=>{  //出現這種方法，說明自定義方法XXX需要設定一個時間延遲函式，來呼叫這個方法。
          console.log("已關閉");
        }
      })
    }
  }

【npm run serve】 -------------------------------------------------------------------------------------------------- 總結：toast外掛的開發， 1、在App.vue中，（在某個事件處理函式中）呼叫一個（後續在toast外掛會自定義的）vue例項方法， 並且給該例項方法傳遞一個物件字面量（模擬多組自己想要的key和value）。 2、在toast外掛中，在Vue的原型鏈上建立一個自定義方法（供App.vue呼叫）。 3、在toast外掛中，手動建立標籤掛載到vue元件上，建立出vue元件例項vm。 4、把建立的標籤，追加到頁面上。 5、在自定義方法中，把呼叫這個方法時傳進來的引數物件，一一賦值給例項vm對應屬性上。 6、設定時間延遲函式，在回撥函式中，把建立的標籤，從頁面上刪除。 -------------------------------------------------------------------------------------------------- 1、在src》components》建立資料夾my-toast(用來存放元件和外掛)》建立檔案toast.vue(用來存放元件)》 （1）在模板中，建立標籤元素

<div class="toast-wrap"></div>

（2）預設匯出一個元件名，值為“my-toast“

export default{
        name:'my-toast'
    }

（3）設定標籤樣式

.toast-wrap{
    padding: 8px 15px;
    background-color: rgba(0,0,0,0.8);
    font-size: 14px;
    color:#FFFFFF;
    text-align: center;
    position: fixed;
    z-index: 99;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
}

View Code 【在src》App.vue》註冊元件，引用元件，npm run serve 測試元件是否有效。】 2、在src》components》my-toast》建立檔案index.js(用來存放外掛)》 （1）匯入my-toast元件

import MyToast from "./toast"

（2）在預設匯出的方法中，全域性extend匯入的元件：let VueComp = Vue.extend(MyToast);

export default {
    install(Vue) {
        let VueComp = Vue.extend(MyToast); 
        //(3)...
    }
}

/*ƒ VueComponent (options) { //返回一個元件物件的初始化方法或構造方法。 this._init(options); }*/
（3）在預設匯出的方法中，在Vue的原型鏈上建立一個toast方法，有引數opts，在方法中打印出引數：Vue.prototype.$toast = function (opts) {...}

Vue.prototype.$toast = function (opts) {
            //4(1)(2)...

 }

3、在src》App.vue》 （1）匯入Vue元件 （2）匯入外掛 （3）啟用外掛 （4）在模板中引用外掛 【npm run serve，點選按鈕，檢視控制檯是否打印出自己的模擬資料】 4、在src》components》my-toast》index.js》 （1）在toast方法中，動態建立一個標籤元素掛載到元件例項上：let vm = new VueComp().$mount(document.createElement("div"));
/*VueComponent{_uid: 7, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent,…} vm.$el: div.toast-wrap*/

let vm = new VueComp().$mount(document.createElement("div"));//建立一個標籤元素掛載元件。
console.log(vm);

（2）在toast方法中，把建立的標籤，追加到頁面上：document.body.appendChild(vm.$el);

document.body.appendChild(vm.$el);

【npm run serve，點選按鈕，出現提示框】 5、在src》components》my-toast》toast.vue》 （1）在模板中做動態資料：{{message}}

<div class="toast-wrap">{{message}}</div>

（2）在data資料物件中，新增：message:""

data(){
    return{
        message:""
    }
}

【npm run serve，點選按鈕，出現空白提示框】 /*VueComponent{_uid: 7, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent,…} vm.message:""*/ 6、在src》components》my-toast》index.js》 （1）在toast方法中，把引數opts物件裡面的屬性值賦值給元件例項vm：

vm.message=opts.message;
let duration=opts.duration||2000;
setTimeout(()=>{
      document.body.removeChild(vm.$el);
              if(opts.onClose){
                  opts.onClose();
               }
 },duration)

（2）解決重複點擊出現提示框問題：

let isToast=false;  
if(!isToast){
     isToast=true;
     //...
     isToast=false;
}

src》components》my-toast》toast.vue》程式碼 View Code src》components》my-toast》index.js》程式碼

import MyToast from "./toast"   //2(1)
export default {
    install(Vue) {
        let VueComp = Vue.extend(MyToast); //2(2)

        let isToast=false;  //6(2)
   
        Vue.prototype.$toast = function (opts) { //2(3)供App.vue呼叫
            if(!isToast){  //6(2)
                isToast=true;  //6(2)
                console.log(opts);
                
                let vm = new VueComp().$mount(document.createElement("div"));//4(1)創建出vue元件例項vm
                console.log(vm);  
                document.body.appendChild(vm.$el);//4(2)把建立的標籤，追加到頁面上

                vm.message=opts.message;//6(1)賦值給例項vm對應屬性
                
                let duration=opts.duration||2000;
                setTimeout(()=>{  //設定時間延遲函式
                    isToast=false;   //6(2)
                    document.body.removeChild(vm.$el);//把建立的標籤，從頁面上刪除。
                    if(opts.onClose){
                        opts.onClose();
                    }
                },duration)
            }
        }
    }
}