按需加载调用一个前端组件

1.设计index.js入口

import Vue from 'vue'
// 直接将Vue组件作为Vue.extend的参数
import messageboxEvent from "./messageboxEvent";

const showMessageboxEvent = (data, config) => {
    let btnList = data.btnList || [];
    let modalText = data.modalText || null;
    let record = data.record || null;
    let otherObj = data.otherObj || {};
    config = config || {};
    const messageboxEventConstructor = Vue.extend(messageboxEvent);
    const instance = new messageboxEventConstructor({
        el: document.createElement("div")
    });

    document.querySelector("body").appendChild(instance.$el);
    return instance.show(btnList, modalText, record, otherObj, config);
}

export default showMessageboxEvent;

2.引入弹框组件vue

<template>
  <el-dialog v-if="popenevTVisible" :title="modalTitle" :before-close="handleCancel" :visible.sync="popenevTVisible" width="420px" :close-on-click-modal="false">
    <div class="message-tip">{{ modalText }}</div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button v-for="(btn, index) in btnList" :key="index" type="primary" @click="handleOk(btn)">{{ btn.btnTitle }}</el-button>

    </span>
  </el-dialog>
</template>

<script>
import { clickEvent } from "../../event/eventClick";
export default {
  name: "messageboxEvent",
  data() {
    return {
      popenevTVisible: true,
      btnList: [],
      modalText: null,
      modalTitle: null,
      promiseStatus: null,
      otherObj: {},
      record: null,
    };
  },
  methods: {
    show(btnList, modalText, record, otherObj, config) {
      this.btnList = btnList || [];
      console.log(this.btnList);
      this.modalText = modalText || "";
      this.modalTitle = config.modalTitle || "询问";
      this.otherObj = otherObj || {};
      this.record = record || null;
      // 创建promise
      return new Promise((resolve, reject) => {
        this.promiseStatus = {
          resolve,
          reject,
        };
      });
    },
    handleCancel() {
      this.promiseStatus.reject();
      this.destroyElement();
    },
    handleOk(cEvent) {
      clickEvent({ btnEvent: cEvent }, this.record, this.otherObj);
      this.promiseStatus.resolve();
      this.destroyElement();
    },
    /**
     * cs 2022-4-8
     * 销毁组件
     */
    destroyElement() {
      this.popenevTVisible = false;
      // this.$destroy(true);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 10px;
}

::v-deep .el-dialog__body {
  padding: 10px;
  text-align: center;
}

.message-tip {
  font-size: 14px;
  line-height: 24px;
}
</style>

3.全局注册方法，根据事件按需调用组件

import showMessageboxEvent from'../components/messageBoxEvent/index';

 *全局封装按需调用的事件*
 * @param {*} event 
 * @param {*} cEvent 
 * @param {*} record 
 * @param {*} otherObj 
 */
function messageboxEvent(event, cEvent, record, otherObj) {
    let btnList = [];
    for (let i = 0; i < cEvent.buttonList.length; i++) {
        cEvent.eventActions[i].btnTitle = cEvent.buttonList[i];
        btnList.push(cEvent.eventActions[i]);
    }

    showMessageboxEvent({
        modalText: cEvent.messageContant,
        btnList: btnList,
        record: record,
        otherObj: otherObj,
    }, {
        modalTitle: cEvent.title,
    }).then(res => {

    })
}