<style lang="less" scoped>
 .alert{
     background: red;
     position: fixed;
     z-index: 9999;
     width: 100%;
     height: 100%;
     left: 0;
     top:0;
 }
</style>
<template>
 <div class="alert"   v-if="showAlert" @click="this.$alertPlugin.hide">
     <div>你好</div>
 </div>
</template>

<script>
 export default {
     data(){
         return {
        //    showAlert:false,
         }
     },
     created(){
       
     },
     mounted(){
  
     },
     props:{
         showAlert:{
             type:Boolean,
             default:false
         }
     },
    //  watch:{
    //      showAlert(val1,val2){
    //           console.log(val1,'val1>>>')
    //             console.log(val2,'val2>>>')
    //      }
    //  }
 }
</script>


 

以上這是我隨便寫的一個頁面

下面 是我寫的一個外掛

import Alert from './alert.vue'
import Vue from 'vue'
let alert = Vue.extend(Alert)
export default {
    install: function() {
        let alertPlugin = new alert({
            methods: {
                show() {
                    console.log('showAlert in plugin', this.showAlert)
                    this.showAlert = true;
                    console.log('showAlert in plugin', this.showAlert)
                },
                hide() {
                    console.log('關閉了')
                    this.showAlert = false;
                }
            }
        });
        alertPlugin.$mount('#app')//開始忘記寫這個外掛要掛載哪一個元素上了，坑死了。這個地方一定要記得寫啊！
        Vue.prototype.$alertPlugin = alertPlugin;//記得把外掛掛載到vue例項上，因為我用的是官方提供的第四種方法來寫外掛的。其他的三種我沒用到。用到了在細細的研究。
    }
}
 

 還有一個最重要的 環節，那就是我用用外掛的基本流程啊！

在main.js中引入外掛使用外掛就ok了。
import alertPlugin from '@/components/bussiness/plugin/alertPlugin.js'
Vue.use(alertPlugin)

使用外掛

//你就可以在任意的元件中使用外掛的方法了。
 this.$alertPlugin.show()
 this.$alertPlugin.hide()