Practice of dynamically creating dialog according to file name in vue+el-element

 <confirm-dialog
     v-if="confirmDialogVisible"
     :title="$t(`mineData.tips.deleteDataset`)"
     :visible.sync="confirmDialogVisible"
     @confirm="confimHandler"
 ></confirm-dialog>

 methods: {
    close() {
        this.$emit("update:visible", false);
    },
    confirm() {
        this.close();
        this.$emit("confirm");
    }
}

createDialog("confirm-dialog.vue");

import Vue from 'vue'
async function createDialog (fileName, data) {
  const dialogsContext = require.context(
    '../components', // Define the scope of the search file true,
    /([a-zA-Z\-0-9]+)\.vue$/, // define file name rule 'lazy'
  )
  // Find the file with the passed name and load it let match = dialogsContext.keys().find((key) => key.includes(fileName))
  if (!match) return
  let componentContext = await dialogsContext(match)
  let temp = componentContext.default
  return new Promise(function (resolve, reject) {
    // Initialize configuration parameters let opt ​​= {
      data
    }
    let component = Object.assign({}, temp)
    let initData = {
      visible: true
    }
    Object.assign(initData, component.data())
    opt.data && Object.assign(initData, JSON.parse(JSON.stringify(opt.data)))
    component.data = function () {
      return initData
    }
    // Create a constructor to create an instance and mount let DialogC = Vue.extend(component)
    let dialog = new DialogC()
    // Close event let _onClose = dialog.$options.methods.onClose
    dialog.onClose = function () {
      resolve()
      dialog.$destroy()
      _onClose && _onClose.call(dialog)
      document.body.removeChild(dialog.$el)
    }
    // callback event let _onCallback = dialog.$options.methods.onCallback
    dialog.onCallback = function (...arg) {
      try {
        _onCallback && _onCallback()
        resolve(arg)
        dialog.$destroy()
        _onClose && _onClose.call(dialog)
        document.body.removeChild(dialog.$el)
      } catch (e) {
        console.log(e)
      }
    }
    dialog.$mount()
    // Clicking the close button will change visibility
    dialog.$watch('visible', function (n, o) {
      dialog === false && dialog.onClose()
    })
    document.body.appendChild(dialog.$el)
  })
}

export { createDialog }

<template>
    <el-dialog title="Prompt" :visible.sync="visible" width="30%">
        <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt quis
            perspiciatis fugiat molestiae provident accusantium repudiandae fugit
            Minima, eaque, repellat quibusdam iste sed ad? Debitis qui praesentium
            minus incidunt esse!
        <span slot="footer" class="dialog-footer">
            <el-button @click="onClose">Cancel</el-button>
            <el-button type="primary" @click="onCallback(true)">OK</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
  }}
</script>

<template>
  <div>
    <h1>This is an show page</h1>
    <el-button type="primary" @click="openDialog">Open</el-button>
  </div>
</template>

<script>
import { createDialog } from "@/utils/dialogControl";
export default {
  methods: {
    openDialog() {
      let dialog = createDialog("confirm-dialog.vue");
      dialog.then((v) => {
        if (v) {
          console.info("OK");
        }
      });
    },
  },
};
</script>