vue 全局组件弹窗

先在/src/components目录下新建一个组件 （我这里用的是antd vue的组件库）

<template>
  <a-modal
    title="Title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p>{{ ModalText }}</p>
  </a-modal>
</template>

<script>
export default {
  name: 'Danger',
  data() {
    return {
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
  },
}
</script>

<style scoped>

</style>

再在同级下新建一个index.js文件

import Vue from 'vue'

import Danger from './Danger'

const DangerBox = Vue.extend(Danger)

Danger.install = function (data) {
  const instance = new DangerBox({
    data
  }).$mount()

  document.body.appendChild(instance.$el)

  // Vue.nextTick(() => {
  //   instance.visible = true
  //   // visible 和弹窗组件里的show对应，用于控制显隐
  // })
}

export default Danger

目录为

 然后在main.js中引入文件

import Danger from './components/dangerModal/'

Vue.prototype.$Danger = Danger.install

最后然弹窗显示

function xxx () {
   this.$Danger({ visible: true })
}