标签：const color hooks 弹框 ant ConfirmModel modal text handleCancel

1、components/ConfirmModel/index.tsx

import React, { useState, useImperativeHandle } from 'react'
import { Modal } from 'antd'
import styles from './index.less'
import { ExclamationCircleFilled } from '@ant-design/icons'

interface DeleteModelProps {
  childRef?: any
  handleOk?: (value: any) => void
  handleCancel?: (value: any) => void
  text?: string
  okText?: String
  cancelText?: String
  maskClosable?: Boolean
  className?: String
  width?: Number
  isAlignment?: Boolean
}

const DeleteModel: React.FC<DeleteModelProps> = (props: any) => {
  const { handleOk, childRef, text, okText, cancelText, maskClosable, className, width, isAlignment } = props
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [id, setId] = useState(-1)

  const showModal = (id?: number) => {
    setId(id || 0)
    setIsModalVisible(true)
  }

  useImperativeHandle(childRef, () => ({ showModal, handleClose, handleCancel }))

  const handleClose = () => {
    setIsModalVisible(false)
  }

  const handleCancel = props.handleCancel ? props.handleCancel : handleClose

  return (
    <Modal
      className={styles.deleteModel + ' ' + `${className}`}
      visible={isModalVisible}
      onOk={() => handleOk(id)}
      onCancel={handleCancel}
      centered
      closable={false}
      width={width ? width : 360}
      okText={okText || '确认'}
      cancelText={cancelText || '取消'}
      maskClosable={maskClosable} // 默认点击蒙层可以关闭，传maskClosable={false}时点击蒙层不可关闭
    >
      <h2>
        <ExclamationCircleFilled />
        <span>提示</span>
      </h2>
      <div className={[styles.modelMain, isAlignment ? styles.alignment : ''].join(' ')}>{text ? text : '是否确认删除该条数据，此操作不可恢复！'}</div>
    </Modal>
  )
}

export default DeleteModel

　　index.less

:global {
  .ant-modal-mask,
  .ant-modal-wrap {
    z-index: 1030 !important; // 保证【删除确认弹框】在Popover弹层之上
  }
}

.deleteModel {
  h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;

    :global(.anticon) {
      margin-right: 10px;
      color: #416eff;
    }

    > span {
      color: var(--theme-text-color);
      font-size: 24px;
    }
  }

  .modelMain {
    margin-bottom: 0;
    color: var(--theme-text-color);
    font-size: 16px;
    line-height: 24px;
    text-align: center;
  }

  .alignment {
    display: flex;
    justify-items: center;
    text-align: start;
  }

  :global {
    // .ant-modal {
    .ant-modal-content {
      padding: 30px 0;

      .ant-modal-body {
        padding: 0 20px;
      }

      .ant-modal-footer {
        margin-top: 40px;
        padding: 0;
        text-align: center;
        border-top: 0;

        .ant-btn {
          width: 92px;
          height: 32px;
          color: #373a44;
          color: rgba(55, 58, 68, 0.5);
          font-size: 16px;
          line-height: 1;
          border: 1px solid #dde6f7;
          border-radius: 4px;
          box-shadow: none;
        }

        .ant-btn-primary {
          margin-left: 50px;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }

  // }
}

View Code

 

2、使用

    import ConfirmModel from '@/components/ConfirmModel'

  const deleteRef = useRef<any>()

  const handleDelete = () => {
    deleteRef.current.showModal(5)
  }

  const handleDeleteOk = async (id: number) => {
    console.log(id)
    deleteRef.current.handleCancel()
  }

　　DOM：

        <div className="iconfont icon-a-shanchu1" onClick={handleDelete}>
          删除
        </div>
        <ConfirmModel childRef={deleteRef} handleOk={handleDeleteOk} />

 

3、效果

　　

标签：const,color,hooks,弹框,ant,ConfirmModel,modal,text,handleCancel
来源： https://www.cnblogs.com/wuqilang/p/16057005.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。