Popconfirm 气泡确认框

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

基础用法

<script setup lang="ts">
import { ja, ko, en, zhCn, zhTw, SwdConfigProvider } from "swd-design";
import { get } from "lodash-es";

import { computed, ref } from "vue";

const language = ref("");
const langMap = {
  ja,
  ko,
  en,
  zhCn,
  zhTw,
} as const;
const locale = computed(() => get(langMap, language.value));
const changelang = () => {
  const l = ["zhCn", "zhTw", "ko", "en", "ja"];
  language.value = l[(l.indexOf(language.value) + 1) % l.length];
};
</script>
<template>
  <swd-button @click="changelang" type="info" style="margin-right: 20px"
    >change language</swd-button
  >
  <swd-config-provider :locale="locale">
    <swd-popconfirm title="Are you shure to delete this item?">
      <swd-button>Delete</swd-button>
    </swd-popconfirm>
  </swd-config-provider>
</template>

自定义弹出框内容

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

<template>
  <swd-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?"
  >
    <swd-button>Delete</swd-button>
  </swd-popconfirm>
</template>

按钮回调

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

<template>
  <swd-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.success('Delete Success')"
    @cancel="$message.info('Cancel')"
  >
    <swd-button>Delete</swd-button>
  </swd-popconfirm>
</template>

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 别名）