vue封裝alert的插件

創建一個plugins文件夾，新建一個alert文件夾

index.js文件的代碼：

import Alert from '@/plugins/alert/Alert'
const alert = {};
alert.install = function(Vue){
  //生成一個Vue的子類，同時也是這個子類也就是組件
  const SjAlertConstructor = Vue.extend(Alert);
  //實例化一個對象
  const instance = new SjAlertConstructor();
  //將這個實例掛載到我創建的div上
  //並將此div加入全局掛載點的內部
  instance.$mount(document.createElement('div'));
  document.body.appendChild(instance.$el);
  //通過VUE原型注冊一個方法
  //讓所有的實例共享這個方法
  Vue.prototype.$sjAletr = (title,content,method = ()=>{})=>{
    instance.title = title?title:'';
    if(content) instance.content = content;
    if(method) instance.ok = method;
    instance.show = true;
  }
};
export default alert

Alert.vue文件的代碼：

<template>
  <div class="alert-container" v-if="show">
    <div v-text="title">提示標題</div>
    <div v-text="content">提示內容</div>
    <button @click="close">確定</button>
  </div>
</template>
<script>
  export default  {
    name:"Alert",
    data(){
      return {
        show:false,
        title:'',
        content:'',
        ok:null
      }
    },
    methods:{
      close(){
        this.show = false;
        if(this.ok){
          this.ok();
        }
      }
    }
  }
</script>
<style>
</style>
定義完成之后，需要在main.js文件引入插件：

import SjAlert from '@/plugins/alert'
Vue.use(SjAlert)