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)