Popconfirm 气泡确认框

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

基础用法

<script setup lang="ts">

</script>
<template>
    <ym-popconfirm title="确定要删除这一项吗?">
      <ym-button>删除</ym-button>
    </ym-popconfirm>
</template>

自定义弹出框内容

可以通过 props 来自定义 Popconfirm 中内容

<template>
  <ym-popconfirm 
    width="220"
    confirm-button-text="删除"
    cancel-button-text="不，取消"
    icon="trash"
    icon-color="#626aef"
    title="你确定要删除吗？"
    cancelButtonType="danger"
    confirmButtonType="primary"
  >
    <ym-button>Delete</ym-button>
  </ym-popconfirm>
</template>

按钮回调

可以通过 confirm 和 cancel 两个事件的监听来获取点击按钮后的回调

<template>
  <ym-popconfirm
    width="220"
    confirm-button-text="Delete"
    cancel-button-text="No,Thanks"
    icon="trash"
    icon-color="#626aef"
    title="Are you sure to delete this item?"
    @confirm="message('Confirmed')"
    @cancel="message('Cancelled')"
  >
    <ym-button>Delete</ym-button>
  </ym-popconfirm>
</template>
<script setup>
const message = (msg) => {
  alert(msg)
}
</script>

Popconfirm API

Props

Name	Description	Type	Default
title	提示文字	string	--
confirm-button-text	确认按钮文字	string	Yes
cancel-button-text	取消按钮文字	string	No
confirm-button-type	确认按钮类型	string	primary
cancel-button-type	取消按钮类型	string	--
icon	图标	string	question-circle
icon-color	图标颜色	string	#f90
hide-icon	隐藏图标	boolean	false
hide-after	触发关闭的延时（单位：毫秒）	number	200
width	宽度	string	150px

Events

Name	Description	Type
confirm	点击确认按钮时触发	(event: MouseEvent) => void
cancel	点击取消按钮时触发	(event: MouseEvent) => void

Slots

Name	Description
default	默认插槽， 用于触发 Popconfirm 显示的 HTML 元素
reference	同上，（default 别名）