BoundLink-Plate-UI/src/components/BsUi/Modal/index.js

import BsModal from './Modal.vue';
import { Modal } from 'ant-design-vue';
import { createApp, h, onBeforeMount, onMounted, reactive, toRaw } from 'vue';
import { set, get } from 'lodash';
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';

export const useBsModal = (options, modalRef) => {
  const modalOptions = reactive(options.modalOptions);

  const setModalPropsValue = (path, value) => {
    set(modalOptions, path, value);
  };

  const getModalPropsValue = (path) => {
    return toRaw(get(modalOptions, path, undefined));
  };

  const initModalOptions = () => {
    const sizeMap = {
      small: '500px',
      middle: "1000px",
      large: "1500px",
    };

    setModalPropsValue('modalExtraProps.okButtonProps', {
      icon: h(CheckCircleOutlined),
      ...options.modalOptions?.modalExtraProps?.okButtonProps,
    });

    setModalPropsValue('modalExtraProps.cancelButtonProps', {
      icon: h(CloseCircleOutlined),
      ...options.modalOptions?.modalExtraProps?.cancelButtonProps,
    });

    if (options.modalOptions?.size) {
      setModalPropsValue('width', sizeMap[options.modalOptions?.size]);
    }
  };

  onMounted(() => {
    initModalOptions();
  });

  const showBsModal = (options = {}) => {
    const modal = Modal.confirm({
      class: 'bs-modal-confirm',
      closable: true,
      centered: true,
      icon: () => h(null),
      okText: '确认',
      cancelText: '取消',
      ...modalOptions,
      ...modalOptions?.modalExtraProps,
      ...options,
    });

    return modal;
  };

  return {
    modalOptions,
    showBsModal,
    setModalPropsValue,
    getModalPropsValue,
  };
};

export default BsModal;