ConfirmableButton 双重确认按钮
通常用于需要再次确认的操作。
基础用法
示例代码
vue
<template>
<epp-confirmable-button tip="Click Again" @confirm="del"> Delete </epp-confirmable-button>
</template>
<script lang="ts" setup>
const del = () => {
console.log('Make sure');
};
</script>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
自定义提示内容
示例代码
vue
<template>
<epp-confirmable-button @confirm="del">
<template #tip>
<el-icon type="danger" class="m-r-md">
<Discount />
</el-icon>
Click Again for Deleting
</template>
<template #default>
Delete?
<el-icon>
<Close />
</el-icon>
</template>
</epp-confirmable-button>
</template>
<script lang="ts" setup>
import { Discount, Close } from '@element-plus/icons-vue';
const del = () => {
console.log('Make Sure');
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
自定义属性
示例代码
vue
<template>
<epp-confirmable-button
:confirm-state="{ type: 'warning', text: true, bg: true }"
:popover-props="{ effect: 'dark', showArrow: true }"
>
<template #tip>
<el-icon type="warning" class="m-r-md">
<Discount />
</el-icon>
Click Again for Transfer Money
</template>
Transfer
</epp-confirmable-button>
</template>
<script lang="ts" setup>
import { Discount } from '@element-plus/icons-vue';
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| tip | 提示文字 | string | — | — |
| default-state | 默认按钮状态，可使用按钮所有属性，参考Button组件 | Record<string, any> | — | { text: true, type: 'primary' } |
| confirm-state | 确认按钮状态，可使用按钮所有属性，参考Button组件 | Record<string, any> | — | { text: false, type: 'danger' } |
| popover-props | 提示框属性，参考Popover组件 | Record<string, any> | - | - |
Slots
| 名称 | 说明 |
|---|---|
| - | 自定义按钮内容 |
| tip | 自定义提示内容 |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| confirm | 确认时触发 | - |