@beisen-phoenix/popconfirm NPM

气泡确认框

鼠标点击元素，弹出气泡样式的卡片

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 函数式调用

@beisen-phoenix/button @beisen-phoenix/common-utils @beisen-phoenix/icon @beisen-phoenix/popover @beisen-phoenix/style-token

@infinitebrahmanuniverse/nolb-_beisen-@everything-registry/sub-chunk-118 italent-create-task italent-task-item ux-work-report ux-work-report-drawer ux-work-report-statistics-drawer ux-adjusting-social-security ux-details-editor ux-increase-personnel ux-chatrobot-indexview ux-staff-adjustment ux-tl-template ux-stop-payment ux-task-drawer ux-new-social-archives ux-new-social-security ux-maintaining-social-security @molejs/react-table @molejs/data-table beisen-phoenix @beisen-cmps/italent-task-common-component @beisen-cmps/italent-create-summary @beisen-phoenix/table @beisen-phoenix/table-v2 @beisen-phoenix/react-table @beisen-platform/ux-standard-table @beisen-platform/platform-form @beisen-platform/schema-button-group @beisen-elearning/ux-p-man-courseware-lib @beisen-elearning/ux-p-man-create-exam @beisen-elearning/ux-p-man-plan-list @beisen-elearning/ux-p-man-plan-phase @beisen-elearning/ux-p-man-question-bank @beisen-elearning/ux-p-man-question-lib @beisen-phoenix/all-in-one @beisen/ocean-dateset-permission @beisen-elearning/manage-courses-edit @beisen/fast-table @beisen-phoenix/confirm @beisen-phoenix/data-table

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago