README
气泡确认框
鼠标点击元素,弹出气泡样式的卡片
API
组件式调用
参数 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
message | 警告提示标题 | string | 无 | 是 |
description | 警告提示内容 | string 或者 React 组件 | 无 | 否 |
confirmText | 确认按钮自定义文本 | string | 是 | 否 |
cancelText | 关闭按钮自定义文本 | string | 否 | 否 |
placement | 气泡框位置,可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom | string | top | 否 |
onConfirm | 确定按钮点击回调函数 | ()=>{} | 否 | 否 |
onCancel | 取消按钮点击回调函数 | ()=>{} | 否 | 否 |
onVisibleChange | 显示隐藏的回调函数, 与确定取消按钮解耦 | (visible)=>{} | 否 | 否 |
extraCls | 自定义组件容器 class,一般用于覆盖组件默认样式使用 | string | 无 | No |
translation | 语言包 用于翻译组件内置常量 | {no: string,yes: string} | {no: '否',yes: '是'} | |
tipIcon | 自定义的提示图标 | JSX.Element | 无 | 否 |
visible | 是否显示 用于受控模式 | boolean | false | 否 |
getPopupContainer | 浮层渲染父节点,默认渲染到 body 上 | Function(triggerNode) | () => document.body | |
maskClosable | 是否可以点击遮罩关闭弹层 | boolean | true | 否 |
lang | 当前语言环境(zh_CN,en_US,zh_TW) | string | zh_CN | 否 |
函数式调用 PopConfirm.show({...param})
参数 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
message | 警告提示标题 | string | 无 | 是 |
description | 警告提示内容 | string 或者 React 组件 | 无 | 否 |
confirmText | 确认按钮自定义文本 | string | 是 | 否 |
cancelText | 关闭按钮自定义文本 | string | 否 | 否 |
placement | 气泡框位置,只提供四种,可选 top left right bottom | string | top | 否 |
onConfirm | 确定按钮点击回调函数 | ()=>{} | 否 | 否 |
onCancel | 取消按钮点击回调函数 | ()=>{} | 否 | 否 |
extraCls | 自定义组件容器 class,一般用于覆盖组件默认样式使用 | string | 无 | No |
translation | 语言包 用于翻译组件内置常量 | {no: string,yes: string} | {no: '否',yes: '是'} | |
tipIcon | 自定义的提示图标 | JSX.Element | 无 | 否 |
lang | 当前语言环境(zh_CN,en_US,zh_TW) | string | zh_CN | 否 |
getPopupContainer | 浮层渲染父节点,默认渲染到 body 上 | Function() | ||
hasCancelBtn | 是否显示 cancel 按钮 | boolean | true | |
hasConfirmBtn | 是否显示确认按钮 | boolean | true |
提供函数式调用 demo
//属性说明
export interface PopConfirmProps {
message: string; //警告提示标题
description?: string | React.ReactNode; //描述
placement?: string; //默认top 函数模式下支持top | bottom | left | right四个位置
confirmText?: string; //确认按钮渲染文本
cancelText?: string; //关闭按钮自定义文本
tipIcon?: JSX.Element; //自定义图标的icon
extraCls?: string;
onCancel?: (e: ReactMouseEvent) => void; //取消回调
onConfirm?: (e: ReactMouseEvent) => void; //确定回调
translation?: { [key: string]: any }; //翻译 {no: '否',yes: '是'}
getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement; //挂载节点 默认body
hasCancelBtn?: boolean; //是否显示取消按钮
hasConfirmBtn?: boolean; //是否显示确定按钮
}
export interface IPopConfirmFunPorps extends PopConfirmProps {
target: HTMLElement; //目标元素dom节点
}
import Popconfirm from "@beisen-phoenix/popconfirm";
const { useCallback, useRef } = React;
const PopConfirmFun: React.FC = () => {
const containerRef = useRef < HTMLDivElement > null;
const handleClick = useCallback((e: React.MouseEvent) => {
PopConfirm.show({
message: "测试",
target: e.currentTarget,
placement: "bottom",
getPopupContainer: () => {
return containerRef.current;
}
// container: containerRef.current
});
}, []);
return (
<div ref={containerRef}>
<button
// style={{ marginLeft: '1200px', marginTop: '200px' }}
onClick={handleClick}
>
test
</button>
</div>
);
};
changelog
2019-11-25
新增 hasConfirmBtn、hasCancelBtn 两个属性,用于控制是、否按钮的显示隐藏
2019-11-19
新增 lang 属性,用于表示当前的语言环境,取值范围为“zh_CN,zh_TW,en_US”内部新增中文简体、英文、中文繁体语言包。
新增内置语言包
2019/11/8 新增 PopConfirm.show 函数式调用