vue实现一个简单的全局调用弹窗案例

import Vue from 'vue'; 
import Alert from '@/components/public/alertModal'; //引入刚才写的弹框组件 
let AlertCOnstructor= Vue.extend(Alert); // 返回一个“扩展实例构造器” 

let AlertModal = (o) => {
 let alertDom = new AlertConstructor({
  el: document.createElement('div'); //将Alert组件挂载到新创建的div上 
 })
 document.body.appendChild(alertDom.$el); //把Alert组件的dom添加到body里 
 
 // 标题
 alertDom.title = o.title || '信息';
 // 单条内容
 alertDom.cOntent= o.content;
 // 关闭按钮
 alertDom.cancelBtn = o.cancelBtn;

 // 弹框三个事件 右上角关闭 确定 取消
 alertDom.a_close = o.close || null;
 alertDom.a_cOnfirm= o.confirm || null;
 alertDom.a_cancel = o.cancel || null;

}
export default AlertModal;

methods: {
  operate () {
   if (!window.alertIsShow) {
    // 弹框模板有个 delete window.alertIsShow 是为了弹框关闭之后能再次显示
    this.$alert({
     title: '信息',
     content: '登入成功！',
     cancelBtn: true,
     close () {
      // 这里执行点击右上角需要做的事，默认执行关闭弹框
     },
     confirm () {
      // 这里执行点击确定按钮需要做的事，默认执行关闭弹框
     },
     cancel () {
      // 这里执行点击取消按钮需要做的事，默认执行关闭弹框
     }
    })
    window.alertIsShow = true;
   }
  }
 }

import VAlert from './v-alert'; //弹窗
 
export default {
 install(Vue) {
  Vue.component('VAlert', VAlert);
 }
};