概要

因为需要全局使用到element-ui+vue 的dialog组件 业务上需求要有弹出外链 于是就有了 el-dialog 嵌套iframe的操作，找了一下解决方案就开始操作了, 经验交流，有更好的方式可以私信我 谢谢大佬

代码

import Vue from 'vue';
//这个文件写 html template 模板el-dialog + iframe
import outLink from './index.vue'
let outLinkConstructor = Vue.extend(outLink);// 获取组件的构造函数

const outlink = (options) => {
    // 组件的手动挂载：创建组件实例，挂载，添加在body上
    let instance = new outLinkConstructor({
      data: {
        ...options,
        visible: true
      },
    });
    instance.$mount();
    document.body.appendChild(instance.$el)
    instance.visible = true
  }
  
  export { outlink }

import { outlink } from '@/src/xxx/xxxxxx/iframecontainer'

// 添加实例属性
Object.assign(Vue.prototype, {
  outlink //全局使用
})

使用方法this.outlink({url: 'xxxx', title: 'xxxx', bgcolor: 'xxxx'})