Popconfirm 气泡确认框

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

基础用法

<script setup lang="ts">
import { ja, ko, en, zhCn, zhTw, EcConfigProvider } from "easy-collective-ui";
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>
    <ec-button @click="changelang" type="info" style="margin-right: 20px">change language</ec-button>
    <ec-config-provider :locale="locale">
        <ec-popconfirm title="Are you shure to delete this item?">
            <ec-button>Delete</ec-button>
        </ec-popconfirm>
    </ec-config-provider>
</template>

自定义弹出框内容

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

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

按钮回调

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

<template>
    <ec-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')"
    >
        <ec-button>Delete</ec-button>
    </ec-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 别名）