将弹窗封装成方法调用

<template>
<Modal
  :title="title"
 v-model="isOpen">
 <div v-html="html"></div>
 <div v-html="content"></div>
</Modal>
</template>

<script>
export default {
  name: "HtmlViewer",
  props: {
    title: String,
    content: String
  },
  data() {
    return {
      isOpen: false,
      html: ''
    }
  },
  methods: {
    open (html) {
      this.isOpen = true
      this.html = html
    },
    close () {
      this.isOpen = false
      this.$nextTick(() => {
        this.$destroy(); // 销毁 Vue 实例
        this.$el.parentNode && this.$el.parentNode.removeChild(this.$el); // 从 DOM 中移除元素
      });
    }
  }
}
</script>

<style scoped>

</style>

为上面弹窗创建实例化方法

// myDialogFactory.js
import Vue from 'vue';
import Viewer from './HtmlViewer.vue';

export const HtmlViewerDialog = (title,content) => {
    const DialogConstructor = Vue.extend(Viewer);
    let instance = new DialogConstructor({
        el: document.createElement('div'),
        propsData: {
            title,
            content
        }
    });

    // 挂载到 body 上，或者你可以选择挂载到 VueInstance.$el 上
    document.body.appendChild(instance.$el);
    return instance;
};