使用场景
在触发位置附近确认一个简单操作。
确认与取消
选择确认更新状态；取消保留原状态。
确认与取消
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamPopconfirm
title="确认归档这条记录？"
confirm-button-text="归档"
cancel-button-text="保留"
:icon="InfoFilled"
@confirm="result = '已归档'"
@cancel="result = '已保留'"
>
<template #reference>
<AsamButton type="default" native-type="button">归档记录</AsamButton>
</template>
</AsamPopconfirm>
<p class="example-paragraph" role="status">{{ result }}</p>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPopconfirmBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const result = ref('等待操作');
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamPopconfirm
title="确认归档这条记录？"
confirm-button-text="归档"
cancel-button-text="保留"
:icon="InfoFilled"
@confirm="result = '已归档'"
@cancel="result = '已保留'"
>
<template #reference>
<AsamButton type="default" native-type="button">归档记录</AsamButton>
</template>
</AsamPopconfirm>
<p class="example-paragraph" role="status">{{ result }}</p>
</template>
<script setup>
defineOptions({ name: 'AsamPopconfirmBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const result = ref('等待操作');
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>自定义确认操作
actions 插槽保留确认/取消回调语义。
自定义确认操作
vue
<template>
<AsamPopconfirm title="清理本地草稿？" @confirm="cleared = true">
<template #reference>
<AsamButton type="default" native-type="button">清理草稿</AsamButton>
</template>
<template #actions="{ confirm, cancel }">
<AsamButton type="default" native-type="button" @click="cancel">保留草稿</AsamButton>
<AsamButton type="default" native-type="button" @click="confirm">确认清理</AsamButton>
</template>
</AsamPopconfirm>
<p class="example-paragraph" role="status">{{ cleared ? '草稿已清理' : '草稿仍保留' }}</p>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPopconfirmActionsDemo' });
import { ref } from 'vue';
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
const cleared = ref(false);
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<AsamPopconfirm title="清理本地草稿？" @confirm="cleared = true">
<template #reference>
<AsamButton type="default" native-type="button">清理草稿</AsamButton>
</template>
<template #actions="{ confirm, cancel }">
<AsamButton type="default" native-type="button" @click="cancel">保留草稿</AsamButton>
<AsamButton type="default" native-type="button" @click="confirm">确认清理</AsamButton>
</template>
</AsamPopconfirm>
<p class="example-paragraph" role="status">{{ cleared ? '草稿已清理' : '草稿仍保留' }}</p>
</template>
<script setup>
defineOptions({ name: 'AsamPopconfirmActionsDemo' });
import { ref } from 'vue';
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
const cleared = ref(false);
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>使用约定
title、confirmButtonText、cancelButtonText 和 icon/iconColor 配置确认内容。 完整说明。
完整用法
以下用法使用本库公开入口。每个示例提供完整 TS/JS SFC，参数、事件、插槽和实例类型见本页 API。服务实例由创建方负责关闭；HTML 内容仅用于调用方已知的可信字符串。
定位方向
定位方向
vue
<template>
<div class="popconfirm-base-box demo-layout-1">
<div class="row center demo-layout-2">
<AsamPopconfirm class="box-item" title="左上方显示提示" placement="top-start">
<template #reference>
<AsamButton type="default">顶部左侧</AsamButton>
</template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="顶部居中显示提示" placement="top">
<template #reference>
<AsamButton type="default">顶部</AsamButton>
</template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="右上方显示提示" placement="top-end">
<template #reference>
<AsamButton type="default">顶部右侧</AsamButton>
</template>
</AsamPopconfirm>
</div>
<div class="row demo-layout-3">
<AsamPopconfirm class="box-item" title="左上方显示提示" placement="left-start">
<template #reference>
<AsamButton type="default">左侧顶部</AsamButton>
</template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="右上方显示提示" placement="right-start">
<template #reference>
<AsamButton type="default">右侧顶部</AsamButton>
</template>
</AsamPopconfirm>
</div>
<div class="row demo-layout-4">
<AsamPopconfirm class="box-item" title="左侧居中显示提示" placement="left">
<template #reference>
<AsamButton type="default" class="mt-3 mb-3">左侧</AsamButton>
</template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="右侧居中显示提示" placement="right">
<template #reference>
<AsamButton type="default">右侧</AsamButton>
</template>
</AsamPopconfirm>
</div>
<div class="row demo-layout-5">
<AsamPopconfirm class="box-item" title="左下方显示提示" placement="left-end">
<template #reference>
<AsamButton type="default">左侧底部</AsamButton>
</template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="右下方显示提示" placement="right-end">
<template #reference>
<AsamButton type="default">右侧底部</AsamButton>
</template>
</AsamPopconfirm>
</div>
<div class="row center demo-layout-6">
<AsamPopconfirm class="box-item" title="左下方显示提示" placement="bottom-start">
<template #reference> <AsamButton type="default">底部左侧</AsamButton></template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="底部居中显示提示" placement="bottom">
<template #reference> <AsamButton type="default">底部</AsamButton></template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="右下方显示提示" placement="bottom-end">
<template #reference>
<AsamButton type="default">底部右侧</AsamButton>
</template>
</AsamPopconfirm>
</div>
</div>
</template>
<script lang="ts" setup>
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
</script>
<style>
.popconfirm-base-box {
width: 600px;
}
.popconfirm-base-box .row {
display: flex;
align-items: center;
justify-content: space-between;
}
.popconfirm-base-box .center {
justify-content: center;
}
.popconfirm-base-box .box-item {
width: 110px;
margin-top: 10px;
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mt-3 {
margin-top: calc(var(--asam-space-xs) * 3);
}
.mb-3 {
margin-bottom: calc(var(--asam-space-xs) * 3);
}
</style>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
.demo-layout-2 {
gap: var(--asam-space-md);
}
.demo-layout-3 {
gap: var(--asam-space-md);
}
.demo-layout-4 {
gap: var(--asam-space-md);
}
.demo-layout-5 {
gap: var(--asam-space-md);
}
.demo-layout-6 {
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="popconfirm-base-box demo-layout-1">
<div class="row center demo-layout-2">
<AsamPopconfirm class="box-item" title="左上方显示提示" placement="top-start">
<template #reference>
<AsamButton type="default">顶部左侧</AsamButton>
</template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="顶部居中显示提示" placement="top">
<template #reference>
<AsamButton type="default">顶部</AsamButton>
</template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="右上方显示提示" placement="top-end">
<template #reference>
<AsamButton type="default">顶部右侧</AsamButton>
</template>
</AsamPopconfirm>
</div>
<div class="row demo-layout-3">
<AsamPopconfirm class="box-item" title="左上方显示提示" placement="left-start">
<template #reference>
<AsamButton type="default">左侧顶部</AsamButton>
</template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="右上方显示提示" placement="right-start">
<template #reference>
<AsamButton type="default">右侧顶部</AsamButton>
</template>
</AsamPopconfirm>
</div>
<div class="row demo-layout-4">
<AsamPopconfirm class="box-item" title="左侧居中显示提示" placement="left">
<template #reference>
<AsamButton type="default" class="mt-3 mb-3">左侧</AsamButton>
</template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="右侧居中显示提示" placement="right">
<template #reference>
<AsamButton type="default">右侧</AsamButton>
</template>
</AsamPopconfirm>
</div>
<div class="row demo-layout-5">
<AsamPopconfirm class="box-item" title="左下方显示提示" placement="left-end">
<template #reference>
<AsamButton type="default">左侧底部</AsamButton>
</template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="右下方显示提示" placement="right-end">
<template #reference>
<AsamButton type="default">右侧底部</AsamButton>
</template>
</AsamPopconfirm>
</div>
<div class="row center demo-layout-6">
<AsamPopconfirm class="box-item" title="左下方显示提示" placement="bottom-start">
<template #reference> <AsamButton type="default">底部左侧</AsamButton></template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="底部居中显示提示" placement="bottom">
<template #reference> <AsamButton type="default">底部</AsamButton></template>
</AsamPopconfirm>
<AsamPopconfirm class="box-item" title="右下方显示提示" placement="bottom-end">
<template #reference>
<AsamButton type="default">底部右侧</AsamButton>
</template>
</AsamPopconfirm>
</div>
</div>
</template>
<script setup>
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
</script>
<style>
.popconfirm-base-box {
width: 600px;
}
.popconfirm-base-box .row {
display: flex;
align-items: center;
justify-content: space-between;
}
.popconfirm-base-box .center {
justify-content: center;
}
.popconfirm-base-box .box-item {
width: 110px;
margin-top: 10px;
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mt-3 {
margin-top: calc(var(--asam-space-xs) * 3);
}
.mb-3 {
margin-bottom: calc(var(--asam-space-xs) * 3);
}
</style>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
.demo-layout-2 {
gap: var(--asam-space-md);
}
.demo-layout-3 {
gap: var(--asam-space-md);
}
.demo-layout-4 {
gap: var(--asam-space-md);
}
.demo-layout-5 {
gap: var(--asam-space-md);
}
.demo-layout-6 {
gap: var(--asam-space-md);
}
</style>显隐与关闭守卫
显隐与关闭守卫
vue
<template>
<AsamPopconfirm title="确定删除此项吗？">
<template #reference>
<AsamButton type="default">删除</AsamButton>
</template>
</AsamPopconfirm>
</template>
<script lang="ts" setup>
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
</script>vue
<template>
<AsamPopconfirm title="确定删除此项吗？">
<template #reference>
<AsamButton type="default">删除</AsamButton>
</template>
</AsamPopconfirm>
</template>
<script setup>
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
</script>完整交互：customize
完整交互：customize
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamPopconfirm
width="220"
:icon="InfoFilled"
icon-color="#626AEF"
title="确定删除此项吗？"
@cancel="onCancel"
>
<template #reference>
<AsamButton type="default">删除</AsamButton>
</template>
<template #actions="{ confirm, cancel }">
<AsamButton type="default" size="small" @click="cancel">No!</AsamButton>
<AsamButton type="default" size="small" :disabled="!clicked" @click="confirm">
是否确认？
</AsamButton>
</template>
</AsamPopconfirm>
</template>
<script lang="ts" setup>
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
import { ref } from 'vue';
import { InfoFilled } from '@asam-ui/icons-vue';
const clicked = ref(false);
function onCancel() {
clicked.value = true;
}
</script>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamPopconfirm
width="220"
:icon="InfoFilled"
icon-color="#626AEF"
title="确定删除此项吗？"
@cancel="onCancel"
>
<template #reference>
<AsamButton type="default">删除</AsamButton>
</template>
<template #actions="{ confirm, cancel }">
<AsamButton type="default" size="small" @click="cancel">No!</AsamButton>
<AsamButton type="default" size="small" :disabled="!clicked" @click="confirm">
是否确认？
</AsamButton>
</template>
</AsamPopconfirm>
</template>
<script setup>
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
import { ref } from 'vue';
import { InfoFilled } from '@asam-ui/icons-vue';
const clicked = ref(false);
function onCancel() {
clicked.value = true;
}
</script>完整交互：trigger-event
完整交互：trigger-event
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamPopconfirm
confirm-button-text="Yes"
cancel-button-text="No"
:icon="InfoFilled"
icon-color="#626AEF"
title="确定删除此项吗？"
@confirm="confirmEvent"
@cancel="cancelEvent"
>
<template #reference>
<AsamButton type="default">删除</AsamButton>
</template>
</AsamPopconfirm>
</template>
<script lang="ts" setup>
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const confirmEvent = () => {
console.log('confirm!');
};
const cancelEvent = () => {
console.log('cancel!');
};
</script>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamPopconfirm
confirm-button-text="Yes"
cancel-button-text="No"
:icon="InfoFilled"
icon-color="#626AEF"
title="确定删除此项吗？"
@confirm="confirmEvent"
@cancel="cancelEvent"
>
<template #reference>
<AsamButton type="default">删除</AsamButton>
</template>
</AsamPopconfirm>
</template>
<script setup>
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const confirmEvent = () => {
console.log('confirm!');
};
const cancelEvent = () => {
console.log('cancel!');
};
</script>组合职责与生命周期
reference 提供单个触发元素，confirm/cancel 发出原 MouseEvent；actions 插槽接收 confirm/cancel，可自定义操作按钮而保持同一事件语义。 完整说明。
局部与全局挂载
切换公开挂载参数后，再打开浮层观察内容位于当前组件附近或挂载到 body。 开关显示当前模式，两个模式均可操作；关闭后可以再次切换。
局部与全局挂载
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div ref="mountTarget" class="popup-stage" :class="{ local: !globalPopup }">
<div class="popup-mode">
<ContainerSwitch
v-model="globalPopup"
active-text="全局挂载到 body"
inactive-text="局部挂载到当前区域"
/>
</div>
<AsamPopconfirm
title="确认归档这条记录？"
confirm-button-text="归档"
cancel-button-text="保留"
:icon="InfoFilled"
@confirm="result = '已归档'"
@cancel="result = '已保留'"
:teleported="globalPopup"
>
<template #reference>
<AsamButton type="default" native-type="button">归档记录</AsamButton>
</template>
</AsamPopconfirm>
<p class="example-paragraph" role="status">{{ result }}</p>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPopconfirmBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const result = ref('等待操作');
import { ref as containerRef } from 'vue';
import { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';
const globalPopup = containerRef(true);
const mountTarget = containerRef<HTMLElement>();
</script>
<style scoped>
.popup-stage {
position: relative;
isolation: isolate;
min-height: 140px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode {
margin-bottom: var(--asam-space-lg);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div ref="mountTarget" class="popup-stage" :class="{ local: !globalPopup }">
<div class="popup-mode">
<ContainerSwitch
v-model="globalPopup"
active-text="全局挂载到 body"
inactive-text="局部挂载到当前区域"
/>
</div>
<AsamPopconfirm
title="确认归档这条记录？"
confirm-button-text="归档"
cancel-button-text="保留"
:icon="InfoFilled"
@confirm="result = '已归档'"
@cancel="result = '已保留'"
:teleported="globalPopup"
>
<template #reference>
<AsamButton type="default" native-type="button">归档记录</AsamButton>
</template>
</AsamPopconfirm>
<p class="example-paragraph" role="status">{{ result }}</p>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamPopconfirmBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamPopconfirm } from '@asam-ui/ui';
import { InfoFilled } from '@asam-ui/icons-vue';
const result = ref('等待操作');
import { ref as containerRef } from 'vue';
import { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';
const globalPopup = containerRef(true);
const mountTarget = containerRef();
</script>
<style scoped>
.popup-stage {
position: relative;
isolation: isolate;
min-height: 140px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode {
margin-bottom: var(--asam-space-lg);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>API
属性 AsamPopconfirmProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
role | — | enum"group" | "dialog" | "grid" | "listbox" | "menu" | "navigation" | "tooltip" | "tree"完整类型："group" | "dialog" | "grid" | "listbox" | "menu" | "navigation" | "tooltip" | "tree" | undefined | — |
visible | — | boolean | null | undefined | false |
onUpdate:visible | — | ((value: boolean) => void) | undefined | — |
showAfter | — | number | undefined | — |
autoClose | — | number | undefined | — |
boundariesPadding | — | number | undefined | — |
gpuAcceleration | — | boolean | undefined | false |
offset | — | number | undefined | — |
placement | — | enum"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"完整类型：(AsamPopconfirmProps)["placement"] | — |
popperOptions | — | (AsamPopconfirmProps)["popperOptions"] | — |
strategy | — | enum"fixed" | "absolute"完整类型："fixed" | "absolute" | undefined | — |
arrowOffset | — | number | undefined | — |
id | — | string | undefined | — |
style | — | import("vue").StyleValue | false |
className | — | AsamPopconfirmProps["className"] | false |
enterable | — | boolean | undefined | false |
pure | — | boolean | undefined | false |
focusOnShow | — | boolean | undefined | false |
trapping | — | boolean | undefined | false |
referenceEl | — | HTMLElement | undefined | — |
triggerTargetEl | — | HTMLElement | undefined | — |
stopPopperMouseEvent | — | boolean | undefined | false |
zIndex | — | number | undefined | — |
ariaLabel | — | string | undefined | — |
loop | — | boolean | undefined | false |
appendTo | — | string | HTMLElement | undefined | — |
content | — | string | undefined | — |
rawContent | — | boolean | undefined | false |
transition | — | string | undefined | — |
disabled | — | boolean | undefined | false |
onMouseenter | — | ((e: MouseEvent) => void) | undefined | — |
onMouseleave | — | ((e: MouseEvent) => void) | undefined | — |
onClick | — | ((e: PointerEvent) => void) | undefined | — |
onKeydown | — | ((e: KeyboardEvent) => void) | undefined | — |
onFocus | — | ((e: FocusEvent) => void) | undefined | — |
onBlur | — | ((e: FocusEvent) => void) | undefined | — |
onContextmenu | — | ((e: PointerEvent) => void) | undefined | — |
open | — | boolean | undefined | false |
trigger | — | enum"hover" | "focus" | "click" | "contextmenu"完整类型：(AsamPopconfirmProps)["trigger"] | — |
triggerKeys | — | string[] | undefined | — |
focusOnTarget | — | boolean | undefined | false |
showArrow | — | boolean | undefined | false |
title | 标题 | string | undefined | undefined |
confirmButtonText | 确认按钮文字 | string | undefined | undefined |
cancelButtonText | 取消按钮文字 | string | undefined | undefined |
confirmButtonType | 确认按钮类型 | enum"" | "default" | "text" | "primary" | "success" | "danger" | "warning" | "info"完整类型："" | "default" | "text" | "primary" | "success" | "danger" | "warning" | "info" | undefined | "primary" |
cancelButtonType | 取消按钮类型 | enum"" | "default" | "text" | "primary" | "success" | "danger" | "warning" | "info"完整类型："" | "default" | "text" | "primary" | "success" | "danger" | "warning" | "info" | undefined | "text" |
icon | 自定义图标 | (AsamPopconfirmProps)["icon"] | 工厂函数（每个实例创建） |
iconColor | Icon 颜色 | string | undefined | "#f90" |
hideIcon | 是否隐藏 Icon | boolean | undefined | false |
hideAfter | 关闭时的延迟 | number | undefined | 200 |
effect | Tooltip 主题，内置了 dark / light 两种 | enum"light" | "dark"完整类型：(AsamPopconfirmProps)["effect"] | "light" |
teleported | 是否将 popover 的下拉列表插入至 body 元素 | boolean | undefined | true |
persistent | 当 popover 组件长时间不触发且 persistent 属性设置为 false 时, popover 将会被删除 | boolean | undefined | false |
width | 弹层宽度，最小宽度 150px | string | number | undefined | 150 |
virtualTriggering | 用来标识虚拟触发是否被启用 | boolean | undefined | false |
virtualRef | 浮层依附的参考元素。 | (AsamPopconfirmProps)["virtualRef"] | undefined |
事件 AsamPopconfirmEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
confirm | — | [event: MouseEvent] | — |
cancel | — | [event: MouseEvent] | — |
update:visible | — | [value: boolean] | — |
before-show | — | [event?: Event | undefined] | — |
before-hide | — | [event?: Event | undefined] | — |
show | — | [event?: Event | undefined] | — |
hide | — | [event?: Event | undefined] | — |
open | — | [event?: Event | undefined] | — |
close | — | [event?: Event | undefined] | — |
插槽 AsamPopconfirmSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
reference | — | (() => unknown) | undefined | — |
actions | — | ((props: { confirm: (event: MouseEvent) => void; cancel: (event: MouseEvent) => void; }) => unknown) | undefined | — |
实例方法与状态 AsamPopconfirmExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
popperRef | — | (AsamPopconfirmExpose)["popperRef"] | — |
hide | — | () => void | — |
用法与契约补充说明
使用约定
title、confirmButtonText、cancelButtonText 和 icon/iconColor 配置确认内容。confirm/cancel 事件分别接收触发事件；reference 插槽提供触发控件，actions 插槽可通过 confirm/cancel 回调提供自定义操作。浮层显隐与定位参数属于本入口公开 Props，无独立四档 size；复杂输入确认用 MessageBox。
组合职责与生命周期
reference 提供单个触发元素，confirm/cancel 发出原 MouseEvent；actions 插槽接收 confirm/cancel，可自定义操作按钮而保持同一事件语义。title、图标、按钮文字与按钮类型负责确认呈现，tooltip 相关属性管理显隐、触发、挂载和定位。hide 与 popperRef 为实例入口。它承载确认动作，不承担持久表单校验；复杂表单使用 Dialog。
关联组件
参数与事件补充说明
固定 2.14.7 公开参数；运行时默认值来自已安装组件。
参数与事件说明
role
必填：否；声明来源：ASAM 声明。
role 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："group" / "dialog" / "grid" / "listbox" / "menu" / "navigation" / "tooltip" / "tree"
visible
必填：否；声明来源：ASAM 声明。
visible 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）onUpdate:visible
必填：否；声明来源：ASAM 声明。
onUpdate:visible 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: boolean): void
showAfter
必填：否；声明来源：ASAM 声明。
autoClose
必填：否；声明来源：ASAM 声明。
boundariesPadding
必填：否；声明来源：ASAM 声明。
gpuAcceleration
必填：否；声明来源：ASAM 声明。
gpuAcceleration 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）offset
必填：否；声明来源：ASAM 声明。
placement
必填：否；声明来源：ASAM 声明。
placement 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："auto" / "auto-start" / "auto-end" / "top" / "bottom" / "right" / "left" / "top-start" / "top-end" / "bottom-start" / "bottom-end" / "right-start" / "right-end" / "left-start" / "left-end"
popperOptions
必填：否；声明来源：ASAM 声明。
popperOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
popperOptions.placement:AsamPopconfirmProps["placement"]— 依赖声明枚举：
"auto"/"auto-start"/"auto-end"/"top"/"bottom"/"right"/"left"/"top-start"/"top-end"/"bottom-start"/"bottom-end"/"right-start"/"right-end"/"left-start"/"left-end"popperOptions.modifiers:PublicMember<NonNullable<(AsamPopconfirmProps)["popperOptions"]>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<(AsamPopconfirmProps)["popperOptions"]>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<(AsamPopconfirmProps)["popperOptions"]>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamPopconfirmProps)["popperOptions"]>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
strategy
必填：否；声明来源：ASAM 声明。
strategy 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："fixed" / "absolute"
arrowOffset
必填：否；声明来源：ASAM 声明。
id
必填：否；声明来源：ASAM 声明。
style
必填：否；声明来源：ASAM 声明。
style 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
false（隐式 Boolean 默认；已安装组件）className
必填：否；声明来源：ASAM 声明。
className 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（隐式 Boolean 默认；已安装组件）enterable
必填：否；声明来源：ASAM 声明。
enterable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）pure
必填：否；声明来源：ASAM 声明。
pure 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）focusOnShow
必填：否；声明来源：ASAM 声明。
focusOnShow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）trapping
必填：否；声明来源：ASAM 声明。
trapping 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）referenceEl
必填：否；声明来源：ASAM 声明。
referenceEl 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
triggerTargetEl
必填：否；声明来源：ASAM 声明。
triggerTargetEl 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
stopPopperMouseEvent
必填：否；声明来源：ASAM 声明。
stopPopperMouseEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）zIndex
必填：否；声明来源：ASAM 声明。
ariaLabel
必填：否；声明来源：ASAM 声明。
loop
必填：否；声明来源：ASAM 声明。
loop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）appendTo
必填：否；声明来源：ASAM 声明。
appendTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
content
必填：否；声明来源：ASAM 声明。
rawContent
必填：否；声明来源：ASAM 声明。
rawContent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）transition
必填：否；声明来源：ASAM 声明。
disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）onMouseenter
必填：否；声明来源：ASAM 声明。
onMouseenter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: MouseEvent): void
onMouseleave
必填：否；声明来源：ASAM 声明。
onMouseleave 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: MouseEvent): void
onClick
必填：否；声明来源：ASAM 声明。
onClick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: PointerEvent): void
onKeydown
必填：否；声明来源：ASAM 声明。
onKeydown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: KeyboardEvent): void
onFocus
必填：否；声明来源：ASAM 声明。
onFocus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: FocusEvent): void
onBlur
必填：否；声明来源：ASAM 声明。
onBlur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: FocusEvent): void
onContextmenu
必填：否；声明来源：ASAM 声明。
onContextmenu 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: PointerEvent): void
open
必填：否；声明来源：ASAM 声明。
open 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）trigger
必填：否；声明来源：ASAM 声明。
trigger 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "focus" / "click" / "contextmenu"
triggerKeys
必填：否；声明来源：ASAM 声明。
focusOnTarget
必填：否；声明来源：ASAM 声明。
focusOnTarget 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）showArrow
必填：否；声明来源：ASAM 声明。
showArrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）title
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
confirmButtonText
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
cancelButtonText
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
confirmButtonType
必填：否；声明来源：上游声明。
confirmButtonType 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "default" / "text" / "primary" / "success" / "danger" / "warning" / "info"
默认值与来源
"primary"（已安装运行时；已安装组件）固定上游文档默认：primary（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'primary'（2.14.7；源码事实，未作为 ASAM 运行实测）
cancelButtonType
必填：否；声明来源：上游声明。
cancelButtonType 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "default" / "text" / "primary" / "success" / "danger" / "warning" / "info"
默认值与来源
"text"（已安装运行时；已安装组件）固定上游文档默认：text（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'text'（2.14.7；源码事实，未作为 ASAM 运行实测）
icon
必填：否；声明来源：上游声明。
icon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamPopconfirmProps)["icon"]>, (...args: never[]) => unknown>>[1]): any
icon.__isFragment:undefined— 依赖声明icon.__isTeleport:undefined— 依赖声明icon.__isSuspense:undefined— 依赖声明
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：QuestionFilled（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：() => QuestionFilled（2.14.7；源码事实，未作为 ASAM 运行实测）
iconColor
必填：否；声明来源：上游声明。
默认值与来源
"#f90"（已安装运行时；已安装组件）固定上游文档默认：#f90（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'#f90'（2.14.7；源码事实，未作为 ASAM 运行实测）
hideIcon
必填：否；声明来源：上游声明。
hideIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
hideAfter
必填：否；声明来源：上游声明。
默认值与来源
200（已安装运行时；已安装组件）固定上游文档默认：200（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：200（2.14.7；源码事实，未作为 ASAM 运行实测）
effect
必填：否；声明来源：上游声明。
effect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark"
默认值与来源
"light"（已安装运行时；已安装组件）固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
teleported
必填：否；声明来源：上游声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
persistent
必填：否；声明来源：上游声明。
persistent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
width
必填：否；声明来源：上游声明。
默认值与来源
150（已安装运行时；已安装组件）固定上游文档默认：150（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：150（2.14.7；源码事实，未作为 ASAM 运行实测）
virtualTriggering
必填：否；声明来源：上游声明。
virtualTriggering 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）virtualRef
必填：否；声明来源：上游声明。
virtualRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
virtualRef.getBoundingClientRect:() => DOMRect— 上游声明事件参数：
(): DOMRect
默认值与来源
undefined（已安装运行时；已安装组件）AsamPopconfirmProps 公开类型视图
ts
import type { Attrs } from 'vue';
import type { AsamPopconfirmProps } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamPopconfirmProps
type PublicContract = {
"role"?: "group" | "dialog" | "grid" | "listbox" | "menu" | "navigation" | "tooltip" | "tree" | undefined;
"visible"?: boolean | null | undefined;
"onUpdate:visible"?: ((value: boolean) => void) | undefined;
"showAfter"?: number | undefined;
"autoClose"?: number | undefined;
"boundariesPadding"?: number | undefined;
"gpuAcceleration"?: boolean | undefined;
"offset"?: number | undefined;
"placement"?: (AsamPopconfirmProps)["placement"];
"popperOptions"?: (AsamPopconfirmProps)["popperOptions"];
"strategy"?: "fixed" | "absolute" | undefined;
"arrowOffset"?: number | undefined;
"id"?: string | undefined;
"style"?: import("vue").StyleValue;
"className"?: AsamPopconfirmProps["className"];
"enterable"?: boolean | undefined;
"pure"?: boolean | undefined;
"focusOnShow"?: boolean | undefined;
"trapping"?: boolean | undefined;
"referenceEl"?: HTMLElement | undefined;
"triggerTargetEl"?: HTMLElement | undefined;
"stopPopperMouseEvent"?: boolean | undefined;
"zIndex"?: number | undefined;
"ariaLabel"?: string | undefined;
"loop"?: boolean | undefined;
"appendTo"?: string | HTMLElement | undefined;
"content"?: string | undefined;
"rawContent"?: boolean | undefined;
"transition"?: string | undefined;
"disabled"?: boolean | undefined;
"onMouseenter"?: ((e: MouseEvent) => void) | undefined;
"onMouseleave"?: ((e: MouseEvent) => void) | undefined;
"onClick"?: ((e: PointerEvent) => void) | undefined;
"onKeydown"?: ((e: KeyboardEvent) => void) | undefined;
"onFocus"?: ((e: FocusEvent) => void) | undefined;
"onBlur"?: ((e: FocusEvent) => void) | undefined;
"onContextmenu"?: ((e: PointerEvent) => void) | undefined;
"open"?: boolean | undefined;
"trigger"?: (AsamPopconfirmProps)["trigger"];
"triggerKeys"?: string[] | undefined;
"focusOnTarget"?: boolean | undefined;
"showArrow"?: boolean | undefined;
"title"?: string | undefined;
"confirmButtonText"?: string | undefined;
"cancelButtonText"?: string | undefined;
"confirmButtonType"?: "" | "default" | "text" | "primary" | "success" | "danger" | "warning" | "info" | undefined;
"cancelButtonType"?: "" | "default" | "text" | "primary" | "success" | "danger" | "warning" | "info" | undefined;
"icon"?: (AsamPopconfirmProps)["icon"];
"iconColor"?: string | undefined;
"hideIcon"?: boolean | undefined;
"hideAfter"?: number | undefined;
"effect"?: (AsamPopconfirmProps)["effect"];
"teleported"?: boolean | undefined;
"persistent"?: boolean | undefined;
"width"?: string | number | undefined;
"virtualTriggering"?: boolean | undefined;
"virtualRef"?: (AsamPopconfirmProps)["virtualRef"];
};参数与事件说明
confirm
必填：是；声明来源：ASAM 声明。
cancel
必填：是；声明来源：ASAM 声明。
update:visible
必填：是；声明来源：ASAM 声明。
before-show
必填：是；声明来源：ASAM 声明。
before-hide
必填：是；声明来源：ASAM 声明。
show
必填：是；声明来源：ASAM 声明。
hide
必填：是；声明来源：ASAM 声明。
open
必填：是；声明来源：ASAM 声明。
close
必填：是；声明来源：ASAM 声明。
AsamPopconfirmEmits 公开类型视图
ts
import type { AsamPopconfirmEmits } from '@asam-ui/ui';
// AsamPopconfirmEmits
type PublicContract = {
"confirm": [event: MouseEvent];
"cancel": [event: MouseEvent];
"update:visible": [value: boolean];
"before-show": [event?: Event | undefined];
"before-hide": [event?: Event | undefined];
"show": [event?: Event | undefined];
"hide": [event?: Event | undefined];
"open": [event?: Event | undefined];
"close": [event?: Event | undefined];
};参数与事件说明
reference
必填：否；声明来源：ASAM 声明。
reference 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
actions
必填：否；声明来源：ASAM 声明。
actions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: { confirm: (event: MouseEvent) => void; cancel: (event: MouseEvent) => void; }): unknown
AsamPopconfirmSlots 公开类型视图
ts
import type { AsamPopconfirmSlots } from '@asam-ui/ui';
// AsamPopconfirmSlots
type PublicContract = {
"reference"?: (() => unknown) | undefined;
"actions"?: ((props: { confirm: (event: MouseEvent) => void; cancel: (event: MouseEvent) => void; }) => unknown) | undefined;
};参数与事件说明
popperRef
必填：是；声明来源：上游声明。
hide
必填：是；声明来源：上游声明。
hide 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamPopconfirmExpose 公开类型视图
ts
import type { AsamPopconfirmExpose } from '@asam-ui/ui';
// AsamPopconfirmExpose
type PublicContract = {
"popperRef": (AsamPopconfirmExpose)["popperRef"];
"hide": () => void;
};