| 1 | ## 气泡确认框
|
| 2 |
|
| 3 | > 鼠标点击元素，弹出气泡样式的卡片
|
| 4 |
|
| 5 | ## API
|
| 6 |
|
| 7 | ### 组件式调用
|
| 8 |
|
| 9 | | 参数 | 说明 | 类型 | 默认值 | 是否必传 |
|
| 10 | | ----------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------ | -------------------- | -------- |
|
| 11 | | message | 警告提示标题 | string | 无 | 是 |
|
| 12 | | description | 警告提示内容 | string 或者 React 组件 | 无 | 否 |
|
| 13 | | confirmText | 确认按钮自定义文本 | string | 是 | 否 |
|
| 14 | | cancelText | 关闭按钮自定义文本 | string | 否 | 否 |
|
| 15 | | placement | 气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom | string | top | 否 |
|
| 16 | | onConfirm | 确定按钮点击回调函数 | ()=>{} | 否 | 否 |
|
| 17 | | onCancel | 取消按钮点击回调函数 | ()=>{} | 否 | 否 |
|
| 18 | | onVisibleChange | 显示隐藏的回调函数, 与确定取消按钮解耦 | (visible)=>{} | 否 | 否 |
|
| 19 | | extraCls | 自定义组件容器 class,一般用于覆盖组件默认样式使用 | string | 无 | No |
|
| 20 | | translation | 语言包 用于翻译组件内置常量 | {no: string,yes: string} | {no: '否',yes: '是'} |
|
| 21 | | tipIcon | 自定义的提示图标 | JSX.Element | 无 | 否 |
|
| 22 | | visible | 是否显示 用于受控模式 | boolean | false | 否 |
|
| 23 | | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function(triggerNode) | () => document.body |
|
| 24 | | maskClosable | 是否可以点击遮罩关闭弹层 | boolean | true | 否 |
|
| 25 |
|
| 26 | ### 函数式调用 PopConfirm.show({...param})
|
| 27 |
|
| 28 | | 参数 | 说明 | 类型 | 默认值 | 是否必传 |
|
| 29 | | ----------------- | ------------------------------------------------- | ------------------------ | -------------------- | -------- |
|
| 30 | | message | 警告提示标题 | string | 无 | 是 |
|
| 31 | | description | 警告提示内容 | string 或者 React 组件 | 无 | 否 |
|
| 32 | | confirmText | 确认按钮自定义文本 | string | 是 | 否 |
|
| 33 | | cancelText | 关闭按钮自定义文本 | string | 否 | 否 |
|
| 34 | | placement | 气泡框位置,只提供四种，可选 top left right bottom | string | top | 否 |
|
| 35 | | onConfirm | 确定按钮点击回调函数 | ()=>{} | 否 | 否 |
|
| 36 | | onCancel | 取消按钮点击回调函数 | ()=>{} | 否 | 否 |
|
| 37 | | extraCls | 自定义组件容器 class,一般用于覆盖组件默认样式使用 | string | 无 | No |
|
| 38 | | translation | 语言包 用于翻译组件内置常量 | {no: string,yes: string} | {no: '否',yes: '是'} |
|
| 39 | | tipIcon | 自定义的提示图标 | JSX.Element | 无 | 否 |
|
| 40 | | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function() |
|
| 41 |
|
| 42 | > 提供函数式调用 demo
|
| 43 |
|
| 44 | ```javascript
|
| 45 | //属性说明
|
| 46 | export interface PopConfirmProps {
|
| 47 | message: string; //警告提示标题
|
| 48 | description?: string | React.ReactNode; //描述
|
| 49 | placement?: string; //默认top 函数模式下支持top | bottom | left | right四个位置
|
| 50 | confirmText?: string; //确认按钮渲染文本
|
| 51 | cancelText?: string; //关闭按钮自定义文本
|
| 52 | tipIcon?: JSX.Element; //自定义图标的icon
|
| 53 | extraCls?: string;
|
| 54 | onCancel?: (e: ReactMouseEvent) => void; //取消回调
|
| 55 | onConfirm?: (e: ReactMouseEvent) => void; //确定回调
|
| 56 | translation?: { [key: string]: any }; //翻译 {no: '否',yes: '是'}
|
| 57 | getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement; //挂载节点 默认body
|
| 58 | }
|
| 59 | export interface IPopConfirmFunPorps extends PopConfirmProps {
|
| 60 | target: HTMLElement; //目标元素dom节点
|
| 61 | }
|
| 62 | import Popconfirm from '@beisen-phoenix/popconfirm';
|
| 63 | const { useCallback, useRef } = React;
|
| 64 | const PopConfirmFun: React.FC = () => {
|
| 65 | const containerRef = useRef < HTMLDivElement > null;
|
| 66 | const handleClick = useCallback((e: React.MouseEvent) => {
|
| 67 | PopConfirm.show({
|
| 68 | message: '测试',
|
| 69 | target: e.currentTarget,
|
| 70 | placement: 'bottom',
|
| 71 | getPopupContainer: () => {
|
| 72 | return containerRef.current;
|
| 73 | }
|
| 74 | // container: containerRef.current
|
| 75 | });
|
| 76 | }, []);
|
| 77 | return (
|
| 78 | <div ref={containerRef}>
|
| 79 | <button
|
| 80 | // style={{ marginLeft: '1200px', marginTop: '200px' }}
|
| 81 | onClick={handleClick}>
|
| 82 | test
|
| 83 | </button>
|
| 84 | </div>
|
| 85 | );
|
| 86 | };
|
| 87 | ```
|
| 88 |
|
| 89 | ## changelog
|
| 90 |
|
| 91 | > 2019/11/8 新增 PopConfirm.show 函数式调用
|