Vue 自定义一个全局弹框组件

前文：其实element ui有提供this.$mesage和this.$notify弹框组件可供使用，但是我们的ui设计的样式以及布局还是不完全一样的，为了达到100%的呈现效果，所以自己写了一个全局组件，然后在页面上直接this.$popupMessage()调用

首先，需要创建一个vue文件来写我们的弹框样式，新建PopupMessage.vue

methods: {

    getParams(options) {

              this.callBack = options.callBack;

               // options就是调用this.$popupMessage传过来的参数和方法

     }

}

需要我们在main.js里面给Vue添加$popupMessage方法，使用$mount()给组件手动挂载参数，然后将组件插入页面中

提示：$mount()里面如果没有参数，说明组件只是渲染了但是还没挂载到页面

import PopupMessage from "@/components/PopupMessage.vue" // 将组件引入

let popupMessage = null

let init = () => {

        // 用Vue.extend 创建组件的模板（构造函数）

        let messageConstructor = Vue.extend(PopupMessage);

        // 实例化组件,构造函数可以传参 data, method

        popupMessage = new messageConstructor({});

        // 挂载组件到页面上

        popupMessage.$mount();

        document.body.appendChild(popupMessage.$el)

}

let caller = (options) => {

        init(options);

        // getParams是在组件里定义的方法，获取传过来的参数和方法

        popupMessage.getParams(options);

}

Vue.prototype.$popupMessage = caller;

然后我们就可以在想要调用的地方直接使用this.$popupMessage()用啦

以下是我实际项目的代码和运行结果效果图，有需要的可以参考

popupMessage.vue

main.js

import PopupMessage from '@/components/PopupMessage.vue';
let popupMessage = null;
let init = () => {
  let messageConstructor = Vue.extend(PopupMessage);
  // 构造函数可以传参，data，method
  popupMessage = new messageConstructor({});
  popupMessage.$mount();
  document.body.appendChild(popupMessage.$el);
}
let caller = (options) => {
  init(options);
  // PopupMessage.vue 中使用getParams接收调用时传入的参数。 type: image等
  popupMessage.getParams(options);
}

页面使用

this.$popupMessage({
    tips: "title", // 标题
    msg: 'content', // 内容
    type: 'type', // 弹框类型
    button: true, // 确定按钮
    duration: 3000, // 延迟时间
    callBack: (data) => {
       // ...
    }
})

效果图