Popconfirm 气泡确认框

点击某个元素弹出一个简单的气泡确认框

展示位置

Popconfirm 提供 9 种展示位置。

使用 title 属性来设置点击参考元素时显示的信息。由 placement 属性决定 Popconfirm 的位置。该属性值格式为：[方向]-[对齐位置]，可供选择的四个方向分别是top、left、right、bottom，可供选择的三种对齐方式分别是start、end、null，默认的对齐方式为null。以 placement="left-end" 为例，气泡确认框会显示在悬停元素的左侧，且提示信息的底部与悬停元素的底部对齐。

export function PopconfirmPlacement() {  return (    <div className={styles.placement}>      <div className={`${styles.row} ${styles.center}`}>        <ElPopconfirm title="Top Left prompts info" placement="top-start">          <ElButton>top-start</ElButton>        </ElPopconfirm>        <ElPopconfirm title="Top Center prompts info" placement="top">          <ElButton>top</ElButton>        </ElPopconfirm>        <ElPopconfirm title="Top Right prompts info" placement="top-end">          <ElButton>top-end</ElButton>        </ElPopconfirm>      </div>      <div className={`${styles.row} ${styles.between}`}>        <ElPopconfirm title="Left Top prompts info" placement="left-start">          <ElButton>left-start</ElButton>        </ElPopconfirm>        <ElPopconfirm title="Right Top prompts info" placement="right-start">          <ElButton>right-start</ElButton>        </ElPopconfirm>      </div>      <div className={`${styles.row} ${styles.between}`}>        <ElPopconfirm title="Left Center prompts info" placement="left">          <ElButton style={{ margin: "12px 0" }}>left</ElButton>        </ElPopconfirm>        <ElPopconfirm title="Right Center prompts info" placement="right">          <ElButton>right</ElButton>        </ElPopconfirm>      </div>      <div className={`${styles.row} ${styles.between}`}>        <ElPopconfirm title="Left Bottom prompts info" placement="left-end">          <ElButton>left-end</ElButton>        </ElPopconfirm>        <ElPopconfirm title="Right Bottom prompts info" placement="right-end">          <ElButton>right-end</ElButton>        </ElPopconfirm>      </div>      <div className={`${styles.row} ${styles.center}`}>        <ElPopconfirm title="Bottom Left prompts info" placement="bottom-start">          <ElButton>bottom-start</ElButton>        </ElPopconfirm>        <ElPopconfirm title="Bottom Center prompts info" placement="bottom">          <ElButton>bottom</ElButton>        </ElPopconfirm>        <ElPopconfirm title="Bottom Right prompts info" placement="bottom-end">          <ElButton>bottom-end</ElButton>        </ElPopconfirm>      </div>    </div>  );}

基础用法

Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。

在 Popconfirm 中，只有 title 属性可用，content 属性会被忽略。

自定义弹出框的内容

可以在 Popconfirm 中自定义内容。

export function PopconfirmCustomize() {  const [clicked, setClicked] = useState(false);  return (    <ElPopconfirm      width={220}      icon={<InfoFilled />}      iconColor="#626AEF"      title="Are you sure to delete this?"      onCancel={() => setClicked(true)}      actions={({ confirm, cancel }) => (        <>          <ElButton size="small" onClick={cancel}>No!</ElButton>          <ElButton            type="danger"            size="small"            disabled={!clicked}            onClick={confirm}          >            Yes?          </ElButton>        </>      )}    >      <ElButton>Delete</ElButton>    </ElPopconfirm>  );}

多种让 Popconfirm 出现的方法

点击按钮触发事件

export function PopconfirmTriggerEvent() {  return (    <ElPopconfirm      confirmButtonText="Yes"      cancelButtonText="No"      icon={<InfoFilled />}      iconColor="#626AEF"      title="Are you sure to delete this?"    >      <ElButton>Delete</ElButton>    </ElPopconfirm>  );}

API

Attributes

属性名	说明	类型	默认
title	标题	`string`	—
effect 2.11.2	Tooltip 主题，内置了 dark / light 两种	`enum` / `string`	light
confirm-button-text	确认按钮文字	`string`	—
cancel-button-text	取消按钮文字	`string`	—
confirm-button-type	确认按钮类型	`enum`	primary
cancel-button-type	取消按钮类型	`enum`	text
icon	自定义图标	`string` / `Component`	QuestionFilled
icon-color	Icon 颜色	`string`	#f90
hide-icon	是否隐藏 Icon	`boolean`	false
hide-after	关闭时的延迟	`number`	200
teleported	是否将 popover 的下拉列表插入至 body 元素	`boolean`	true
persistent	当 popover 组件长时间不触发且 persistent 属性设置为 false 时，popover 将会被删除	`boolean`	false
width	弹层宽度，最小宽度 150px	`string` / `number`	150
tooltip	继承自 Tooltip 的所有属性，但不包括：popper-class、popper-style、fallback-placements	—	—

Events

事件名	说明	类型
confirm	点击确认按钮时触发	`Function`
cancel	点击取消按钮时触发	`Function`

Slots

插槽名	说明	类型
reference	触发 Popconfirm 显示的 HTML 元素	—
actions 2.8.1	页脚的内容	`object`

暴露

方法名	详情	Type
popperRef 2.10.7	el-popper 组件实例	`object`
hide 2.10.7	hide popconfirm	`Function`