vexModal.vue

<template>
  <vxe-modal
    ref="vxeModal"
    :title="title"
    type="confirm"
    :status="statusData"
    :className="className"
    :cancel-button-text="cancelButtonText"
    :confirm-button-text="confirmButtonText"
    :showFooter="showFooter"
    :lock-view="lockView"
    :lock-scroll="lockScroll"
    :mask="mask"
    :mask-closable="maskClosable"
    :esc-closable="escClosable"
    :zIndex="zIndex"
    :transfer="transfer"
    :destroy-on-close="destroyOnClose"
    @confirm="confirm"
    @cancel="cancel"
    @close="cancel"
  >
    {{ content }}
    <template #footer>
      <!-- 取消按钮 -->
      <vxe-button
        size="mini"
        :content="cancelButtonText"
        @click="cancel"
        v-if="cancelButtonTextBoolean"
      ></vxe-button>
      <!-- 确认按钮 -->
      <vxe-button
        size="mini"
        status="primary"
        :content="confirmButtonText"
        @click="confirm"
      ></vxe-button
    ></template>
  </vxe-modal>
</template>

<script>
export default {
  name: "vexModal",
  data() {
    return {};
  },
  created() {},
  methods: {
    //打开弹窗
    open() {
      this.$refs.vxeModal.open();
    },
    // 关闭弹窗
    close() {
      this.$refs.vxeModal.close();
    },
    //  确认方法回调方法
    confirm({ type, $event }) {
      let { onOk } = this;
      onOk && onOk(type, $event);
      this.close();
    },
    // 关闭弹窗回调方法
    cancel({ type, $event }) {
      let { onCancel } = this;
      onCancel && onCancel(type, $event);
      this.close();
    },
  },
};
</script>

<style>
.modalContent {
  width: 100%;
  height: 100%;
  text-align: center;
}
</style>

index.js

import Vue from "vue";
import vexModal from "./vexModal";
// 陈桦 基于vexui组件做的第二次封装 2021-11-20

const modalVue = Vue.extend(vexModal); // 组件构造器，构造一个vue组件实例
let returnData = { //vue组件data数据
  type: "confirm", //	窗口类型 	alert, confirm, message
  title: "", //标题
  statusData: "warning", //消息状态 info, success, warning, error, loading
  content: "", //显示的文本
  className: "", //给窗口附加 className
  cancelButtonText: "取消", //取消按钮的文本内容
  cancelButtonTextBoolean: false, // 是否显示取消按钮
  confirmButtonText: "确认", //确定按钮的文本内容
  showFooter: true, //是否显示底部
  lockView: true, //是否锁住页面，不允许窗口之外的任何操作
  lockScroll: true, //是否锁住滚动条，不允许页面滚动
  mask: true, //是否显示遮罩层
  maskClosable: false, //是否允许点击遮罩层关闭窗口
  escClosable: true, //	是否允许按 Esc 键关闭窗口
  zIndex: 9999, //自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）
  transfer: false, //	是否将弹框容器插入于 body 内
  destroyOnClose: false, //在窗口关闭时销毁内容
  onOk: null, //点击确定按钮时会触发该事件
  onCancel: null, //	点击取消按钮时会触发该事件 &&点击关闭按钮时会触发该事件
};

const getModal = () => { }; //函数实例

// 警告弹窗
getModal.warning = (configurationItem) => {
  modelInit(configurationItem);
};
// 带确定取消的按钮的弹窗
getModal.confirm = (configurationItem) => {
  configurationItem.cancelButtonTextBoolean = true
  modelInit(configurationItem); //渲染弹窗
}
// 渲染弹窗
function modelInit(data) {
  let modal = new modalVue({
    data() {
      return {
        ...returnData,
        ...data
      };
    },
  });
  modal.$mount() //手动挂载vue
  document.body.appendChild(modal.$el); //挂载至body上
  modal.open() //打开弹窗
}

export default {
  install() {
    Vue.prototype.$Modal = getModal; //挂载到vue实例上
  },
};