40 lines
913 B
Vue
40 lines
913 B
Vue
|
<script lang="ts" setup>
|
||
|
|
import { alert, confirm, VbenButton } from '@vben/common-ui';
|
||
|
|
|
||
|
|
function showConfirm() {
|
||
|
|
confirm('This is an alert message')
|
||
|
|
.then(() => {
|
||
|
|
alert('Confirmed');
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
alert('Canceled');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function showIconConfirm() {
|
||
|
|
confirm({
|
||
|
|
content: 'This is an alert message with icon',
|
||
|
|
icon: 'success',
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function showAsyncConfirm() {
|
||
|
|
confirm({
|
||
|
|
beforeClose() {
|
||
|
|
return new Promise((resolve) => setTimeout(resolve, 2000));
|
||
|
|
},
|
||
|
|
content: 'This is an alert message with async confirm',
|
||
|
|
icon: 'success',
|
||
|
|
}).then(() => {
|
||
|
|
alert('Confirmed');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="flex gap-4">
|
||
|
|
<VbenButton @click="showConfirm">Confirm</VbenButton>
|
||
|
|
<VbenButton @click="showIconConfirm">Confirm With Icon</VbenButton>
|
||
|
|
<VbenButton @click="showAsyncConfirm">Async Confirm</VbenButton>
|
||
|
|
</div>
|
||
|
|
</template>
|