Browse Source

'包装Modal.confirm成简易方法'

main
郑州 3 years ago
parent
commit
b4c1646c25
3 changed files with 50 additions and 0 deletions
  1. +30
    -0
      src/components/AModal/AModal.less
  2. +19
    -0
      src/components/AModal/AModal.tsx
  3. +1
    -0
      src/components/AModal/index.ts

+ 30
- 0
src/components/AModal/AModal.less View File

@@ -0,0 +1,30 @@

.confirmModal {
.icon {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #FFBE00;
text-align: center;
line-height: 24px;
color: #fff;
}
:global {
.ant-modal-body {
padding: 16px 16px 24px;
}
.ant-modal-confirm-content {
margin-top: 20px;
text-align: center;
}
.ant-modal-confirm-btns {
margin-top: 40px;
float: none;
display: flex;
> .ant-btn {
flex: 1;
}
}
}
}

+ 19
- 0
src/components/AModal/AModal.tsx View File

@@ -0,0 +1,19 @@
import { Modal, ModalFuncProps } from 'antd';
import React from 'react';
import { QuestionOutlined } from '@ant-design/icons';
import styles from './AModal.less';

export function confirm(options: ModalFuncProps) {

return Modal.confirm({
className: styles.confirmModal,
icon: (
<span className={styles.icon}>
<QuestionOutlined size={24} />
</span>
),
cancelText: '取消',
okText: '确定',
...options,
})
}

+ 1
- 0
src/components/AModal/index.ts View File

@@ -0,0 +1 @@
export { confirm } from './AModal';

Loading…
Cancel
Save