Nice-modal-react的使用

细心细心再细心2026-01-08 17:06

创建modal

ts 复制代码

import { Modal } from 'antd';
import NiceModal, { useModal } from '@ebay/nice-modal-react';
import WarningSvg from '@/assets/warning.svg?react';

export const BrowserNotSatisfiedModal = NiceModal.create(() => {
  const modal = useModal();
  const modalProps: any = NiceModal.antdModal(modal);
  modalProps.open = modalProps.visible;
  delete modalProps.visible;

  const handleOK = () => {
    modal.hide();
  };

  return (
    <Modal
      {...modalProps}
      title={
        <div>
          <WarningSvg
            style={{
              fontSize: '22px',
              marginRight: '12px',
              verticalAlign: 'top',
            }}
          />
          提示
        </div>
      }
      centered
      onOk={handleOK}
      okText="确定"
      cancelText="取消"
    >
      <p style={{ margin: '20px 0 40px' }}>
        浏览器版本过低，可能存在部分内容不兼容，建议升级浏览器后使用
      </p>
    </Modal>
  );
});

使用弹框

ts 复制代码

NiceModal.show(AppealDialog, props);

注意：这里NiceModal返回的是一个Promise 可以这样使用

ts 复制代码

 NiceModal.show(ConsumerFormModal, {
    fields: (headerFields?.fields as unknown as ConsumerFormField[]) ?? [],
    editRecod: record,
    isEdit: true,
    })
    .then(()=>{})
    .catch(()=>{})
    .finally(() => {
    setIsEditConsumerTableFlag?.(false);
    });