Popconfirm 气泡确认框

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

?

名称	分类	说明	类型	默认值
confirmButtonType	? 风格	确认按钮类型	ButtonType	'primary'
cancelButtonType	? 风格	取消按钮类型	ButtonType	—
hideIcon	? 风格	是否隐藏图标	boolean	false
showArrow	? 风格	是否显示箭头	boolean	false
effect	? 风格	主题	TooltipEffect	'dark'
width	? 尺寸	弹框宽度	number | string	150
iconColor	? 颜色	图标颜色	string	'#f90'
disabled	? 状态	是否禁用	boolean	false
hideAfter	? 行为	隐藏延迟（毫秒）	number	200
placement	? 行为	弹出位置	Placement	'bottom'
title	? 内容	标题	string	—
confirmButtonText	? 内容	确认按钮文字	string	'Yes'
cancelButtonText	? 内容	取消按钮文字	string	'No'
icon	? 内容	图标	string	'question-circle'
confirm	? 事件	点击确认按钮时触发	(event: MouseEvent) => void	—
cancel	? 事件	点击取消按钮时触发	(event: MouseEvent) => void	—
default	? 插槽	触发 Popconfirm 的元素		—
reference	? 插槽	同 default		—

基础用法

<template>
  <px-popconfirm title="Are you sure to delete this?" @confirm="onConfirm" @cancel="onCancel">
    <px-button type="danger">Delete</px-button>
  </px-popconfirm>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('Deleted!');
};

const onCancel = () => {
  PxMessage.info('Cancelled');
};
</script>

自定义内容

可以自定义按钮文字和图标。

<template>
  <px-popconfirm
    title="This will permanently delete the file. Continue?"
    confirm-button-text="Yes"
    cancel-button-text="No"
    icon="warning-box"
    icon-color="#f56c6c"
    @confirm="onConfirm"
  >
    <px-button type="danger">Delete File</px-button>
  </px-popconfirm>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('File deleted!');
};
</script>

弹出位置

使用 placement 属性设置弹出位置。

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <px-popconfirm title="Top placement" placement="top" @confirm="onConfirm">
      <px-button>Top</px-button>
    </px-popconfirm>
    <px-popconfirm title="Bottom placement" placement="bottom" @confirm="onConfirm">
      <px-button>Bottom</px-button>
    </px-popconfirm>
    <px-popconfirm title="Left placement" placement="left" @confirm="onConfirm">
      <px-button>Left</px-button>
    </px-popconfirm>
    <px-popconfirm title="Right placement" placement="right" @confirm="onConfirm">
      <px-button>Right</px-button>
    </px-popconfirm>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('Confirmed!');
};
</script>

箭头

设置 show-arrow 属性显示指向触发元素的像素风格箭头。

<template>
  <div style="display: flex; gap: 12px;">
    <px-popconfirm title="With arrow" show-arrow @confirm="onConfirm">
      <px-button>Show Arrow</px-button>
    </px-popconfirm>
    <px-popconfirm title="Without arrow" @confirm="onConfirm">
      <px-button>No Arrow</px-button>
    </px-popconfirm>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('Confirmed!');
};
</script>

主题

使用 effect 属性切换深色和浅色主题。

<template>
  <div style="display: flex; gap: 12px;">
    <px-popconfirm title="Dark effect" effect="dark" @confirm="onConfirm">
      <px-button>Dark</px-button>
    </px-popconfirm>
    <px-popconfirm title="Light effect" effect="light" @confirm="onConfirm">
      <px-button>Light</px-button>
    </px-popconfirm>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('Confirmed!');
};
</script>

隐藏图标

设置 hide-icon 属性来隐藏图标。

<template>
  <px-popconfirm title="Confirm action?" hide-icon @confirm="onConfirm">
    <px-button>Action</px-button>
  </px-popconfirm>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('Action confirmed!');
};
</script>

禁用

设置 disabled 属性阻止气泡确认框显示。

<template>
  <px-popconfirm title="Are you sure?" disabled @confirm="onConfirm">
    <px-button>Disabled Popconfirm</px-button>
  </px-popconfirm>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('Confirmed!');
};
</script>