基于ElementUI Card实现自定义iframe弹框

由于ElementUI只支持原生dialog不支持iframe弹出层，所以需要开发此组件，便于开发。

1.效果图

2.调用方式

this.$syDialog({
          title: '自定义标题',
          path: '/goods/edit',
          param: {
            auto: true,
            num: 100
          },
          closeCallBack () {
            console.log('关闭回调')
          },
          btns: [
            {
              name: '修改',
              click: function (vm) {  // vm 当前对象相当于this
                alert("修改")
              }
            },
            {
              name: '添加',
              click: function (vm) {
                alert("添加")
              }
            }
          ]
        })

3.sy-dialog.vue组件编写

<style scoped>
  .sy-dialog-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 12px;
    box-shadow: #000c17;
    z-index: 1000000;
    padding-top: 2vh;
    padding-left: 10vw;
  }
  .sy-dialog-card {
    width: 80vw;
    min-height: 90vh;
  }
  .sy-dialog-opt {
    float: right;
    padding: 3px 0;
    margin-left: 12px;
  }
</style>
<template>
  <div v-if="visible" class="sy-dialog-content">
    <el-card class="sy-dialog-card">
      <div slot="header" class="clearfix">
        <span>{{title}}</span>
        <el-button class="sy-dialog-opt" type="text" @click="close()">关闭</el-button>
        <el-button v-for="btn in btns" class="sy-dialog-opt" type="text" @click="handleClick(btn.clickEventName)">{{btn.name}}</el-button>
      </div>
      <component ref="cp" :is="item"
                 v-for="(item, index) in plugs"
                 :key='index'></component>
     </el-card>
  </div>
</template>

<script>
    export default {
      props: [
        'title',
        'path',
        'btns',
        'param',
        'plugs'
      ],
      name: "sy-dialog",
      data: function () {
        return {
          visible: false,
          params: {},
        }
      },
      mounted () {
        let _this=this;
        _this.$nextTick(function () {
          this.init()
        })
      },
      methods: {
        init () {

        },
        handleClick(eventName) {
          for (let btn of this.btns) {
            if (btn.clickEventName == eventName) {
              btn.func(this.$refs['cp'][0])
            }
          }
        }
      }
    }
</script>

4.dialog.js 编写

import SyDialog from '@/components/sy-dialog/sy-dialog'
import Vue from 'vue'

const SyDialogConstructor = Vue.extend(SyDialog)

const dialog = (opts = {}) => {
  let _a = new SyDialogConstructor({el: document.createElement('div')})
  _a.title = opts.title || '标题'
  _a.path = opts.path || ''
  _a.param = opts.param || {}
  _a.visible = true
  renderComponents(_a, opts.btns);
  renderCloseCallBack(opts)
  document.body.appendChild(_a.$el)
  return new Promise(resolve => {
    return (
      _a.close = () => {
        _a.visible = false
        opts.closeCallBack()
        resolve()
      })
  })
}

function renderCloseCallBack(opts) {
  opts.closeCallBack = opts.closeCallBack || function () {}
}

function renderComponents(_a, btns) {
  let importComponent = import( /* webpackChunkName: "views" */ '@/views' + _a.path);
  _a.plugs = [()=>importComponent]
  _a.btns = btns || []
  importComponent.then(component => {
    try {
      // 如果要跳转的组件本来就有需要显示在顶部的按钮就渲染出来
      let subBtns = component.default.methods.getBtns();
      for (let sb of subBtns) {
        _a.btns.push(sb)
      }
    } catch (e) {}
    renderBtns(_a, _a.btns)
  })
}

function renderBtns(_a, btns) {
  _a.btns = []
  let getName = function (btn) {
    let name = btn.click.name || 'click'
    i++;
    return name + i;
  }

  let i = 0;
  for (let btn of btns) {
    const name = btn.name || '按钮'
    const clickEventName = getName(btn)
    const func = btn.click || function(){alert(666)}
    _a.btns.push({
      name: name,
      clickEventName: clickEventName,
      func: func
    })
  }
}
export default dialog

5. main.js

import SyDialog from '@/util/dialog'
Vue.prototype.$syDialog = SyDialog

参考：https://www.jianshu.com/p/911136b93b6e