Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@beisen-phoenix/popconfirm
Advanced tools
鼠标点击元素,弹出气泡样式的卡片
参数 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
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 | 否 |
参数 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
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>
);
};
新增 hasConfirmBtn、hasCancelBtn 两个属性,用于控制是、否按钮的显示隐藏
新增 lang 属性,用于表示当前的语言环境,取值范围为“zh_CN,zh_TW,en_US”内部新增中文简体、英文、中文繁体语言包。
新增内置语言包
2019/11/8 新增 PopConfirm.show 函数式调用
FAQs
> 鼠标点击元素,弹出气泡样式的卡片
We found that @beisen-phoenix/popconfirm demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.