1. import React from 'react';
    2. import {Modal} from 'antd';
    3. import hint2 from '../../../images/hint2.png';
    4. import style from './style';
    6. /**
    7.  *         直接在点击事件调用这个方法
    8.  * 
    9.  *     
    10.     const data = {
    11.         title: '提示',
    12.         content: '您还未保存页面内容，确定需要离开吗？',
    13.         okText: '保存离开',
    14.         cancelText: '不保存离开'
    15.     };
    16.     ConfirmModal(
    17.         data,
    18.         close => {
    19.             console.log(1);
    20.             close();
    21.         },
    22.         close => {
    23.             console.log(2);
    24.             close();
    25.         }
    26.     );
    27.  * */
    29. export default function ConfirmModal(props, ok, no) {
    30.     const ModalCon = Modal.confirm({
    31.         ...props,
    32.         title: props?.title || '标题',
    33.         icon: <img src={hint2} className="icon" />,
    34.         content: props?.content || '内容',
    35.         okText: props?.okText || '确定',
    36.         className: style.ConfirmModal,
    37.         cancelText: props?.cancelText || '取消',
    38.         onOk: close => {
    39.             ModalCon.update({
    40.                 okButtonProps: {loading: true}
    41.             });
    42.             ok ? ok(() => close()) : close();
    43.         },
    44.         onCancel: close => {
    45.             no ? no(() => close()) : close();
    46.         }
    47.     });
    48.     return ModalCon;
    49. }
    1. .ConfirmModal {
    2.     :global {
    3.         .ant-modal-content {
    4.             width: 384px;
    5.             height: 178px;
    6.         }
    8.         .ant-modal-body {
    9.             padding: 42px 24px 20px 40px;
    10.         }
    12.         .ant-modal-confirm-btns {
    13.             margin-top: 13px;
    14.         }
    16.         .ant-modal-confirm-title {
    17.             margin-left: 10px;
    18.             display: inline-block !important;
    19.             vertical-align: bottom;
    20.             font-size: 14px !important;
    21.             font-weight: bold !important;
    22.             color: rgba(0, 0, 0, 0.85) !important;
    23.         }
    25.         .ant-modal-confirm-content {
    26.             font-size: 13px !important;
    27.             font-weight: 400 !important;
    28.             color: rgba(0, 0, 0, 0.65) !important;
    29.             margin-left: 26px;
    30.         }
    32.         .ant-checkbox-checked::after {
    33.             position: absolute;
    34.             top: 0;
    35.             left: -1px;
    36.             width: 100%;
    37.             height: 100%;
    38.             border: 1px solid #1890ff;
    39.             border-radius: 2px;
    40.             visibility: hidden;
    41.             animation: antCheckboxEffect 0.36s ease-in-out;
    42.             animation-fill-mode: backwards;
    43.             content: '';
    44.         }
    45.     }
    46. }
    1. import ConfirmModal  from '../....'
    3. const data = {
    4.   title: '提示',
    5.   content: '您还未保存页面内容，确定需要离开吗？',
    6.   okText: '保存离开',
    7.   cancelText: '不保存离开'
    8. };
    9. ConfirmModal(
    10.   data,
    11.   close => {
    12.     close();
    13.   },
    14.   close => {
    15.     close();
    16.   }
    17. );