el-dialog 或dialog 封装 通过js控制

1.通用组件封装dialogImg.vue

<template>
  <div>
    <el-dialog
      v-show="isShow"
      :visible.sync="isShow"
      width="50%"
      @close="seePicUrl = ''"
      append-to-body
      style="text-align: center"
    >
      <img :src="seePicUrl" alt="" class="w" />
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: 'dialogImg',
  data () {
    return {};
  },
  created () { },
  activated () { },
  methods: {
    closeFn () {
      this.$cancelSeePdf();
    },
  },
};
</script>
<style lang="scss" scope>
</style>

2.吊起方法封装utils / fileReviewIndex.js

import vue from 'vue'
import dialogImgComponent from '../components/dialog/dialogImg.vue'

const DialogImgConstructor = vue.extend(dialogImgComponent)

let toastDom, el;

function showDialogImg(seePicUrl) {

    if (!el && !toastDom) {
        el = document.createElement('div');
        toastDom = new DialogImgConstructor({
            el,
            data() {
                return {
                    isShow: true, // 是否显示
                    seePicUrl: seePicUrl
                };
            }
        });
        // 添加节点
        document.body.appendChild(toastDom.$el);
    } else {
        toastDom.seePicUrl = seePicUrl
        toastDom.isShow = true;
    }
}

function cancelDialogImg() {
    if (toastDom) {
        toastDom.isShow = false;
    }
}

// 全局注册
function registryToast() {
    vue.prototype.$showDialogImg = showDialogImg;
    vue.prototype.$cancelDialogImg = cancelDialogImg;
}

export default registryToast;

3.main.js文件注册挂载

import fileReviewIndex from "./utils/fileReviewIndex";

Vue.use(fileReviewIndex);

4.吊起实例

this.$showDialogImg( window.URL.createObjectURL(new Blob([blob])))

5.关闭实例

 this.$cancelSeePdf();