ConfirmableButton

Usually used for operations that require reconfirmation.

Basic

Example code

<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>

Custom Prompt Content

Example code

<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>

Custom Attributes

Example code

<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>

Attributes

Parameter	Description	Type	Optional Values	Default Value
tip	Prompt text	string	—	—
default-state	Default button state. All button properties can be used. Refer to the Button component.	Record<string, any>	—	{ text: true, type: 'primary' }
confirm-state	Confirmation button state. All button properties can be used. Refer to the Button component.	Record<string, any>	—	{ text: false, type: 'danger' }
popover-props	Popover properties. Refer to the Popover component.	Record<string, any>	-	-

Slots

Name	Description
-	Custom button content
tip	Custom prompt content

Events

Event Name	Description	Callback Parameter
confirm	Triggered upon confirmation	-