parent
ff88274554
commit
f0e9e55af2
@ -69,8 +69,14 @@ export type AlertProps = {
|
|||||||
contentClass?: string;
|
contentClass?: string;
|
||||||
/** 执行beforeClose回调期间,在内容区域显示一个loading遮罩*/
|
/** 执行beforeClose回调期间,在内容区域显示一个loading遮罩*/
|
||||||
contentMasking?: boolean;
|
contentMasking?: boolean;
|
||||||
|
/** 弹窗底部内容(与按钮在同一个容器中) */
|
||||||
|
footer?: Component | string;
|
||||||
/** 弹窗的图标(在标题的前面) */
|
/** 弹窗的图标(在标题的前面) */
|
||||||
icon?: Component | IconType;
|
icon?: Component | IconType;
|
||||||
|
/**
|
||||||
|
* 弹窗遮罩模糊效果
|
||||||
|
*/
|
||||||
|
overlayBlur?: number;
|
||||||
/** 是否显示取消按钮 */
|
/** 是否显示取消按钮 */
|
||||||
showCancel?: boolean;
|
showCancel?: boolean;
|
||||||
/** 弹窗标题 */
|
/** 弹窗标题 */
|
||||||
|
@ -1,6 +1,10 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { h, ref } from 'vue';
|
||||||
|
|
||||||
import { alert, confirm, VbenButton } from '@vben/common-ui';
|
import { alert, confirm, VbenButton } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { Checkbox, message } from 'ant-design-vue';
|
||||||
|
|
||||||
function showConfirm() {
|
function showConfirm() {
|
||||||
confirm('This is an alert message')
|
confirm('This is an alert message')
|
||||||
.then(() => {
|
.then(() => {
|
||||||
@ -18,6 +22,34 @@ function showIconConfirm() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function showfooterConfirm() {
|
||||||
|
const checked = ref(false);
|
||||||
|
confirm({
|
||||||
|
cancelText: '不要虾扯蛋',
|
||||||
|
confirmText: '是的,我们都是NPC',
|
||||||
|
content:
|
||||||
|
'刚才发生的事情,为什么我似乎早就经历过一般?\n我甚至能在事情发生过程中潜意识里预知到接下来会发生什么。\n\n听起来挺玄乎的,你有过这种感觉吗?',
|
||||||
|
footer: () =>
|
||||||
|
h(
|
||||||
|
Checkbox,
|
||||||
|
{
|
||||||
|
checked: checked.value,
|
||||||
|
class: 'flex-1',
|
||||||
|
'onUpdate:checked': (v) => (checked.value = v),
|
||||||
|
},
|
||||||
|
'不再提示',
|
||||||
|
),
|
||||||
|
icon: 'question',
|
||||||
|
title: '未解之谜',
|
||||||
|
}).then(() => {
|
||||||
|
if (checked.value) {
|
||||||
|
message.success('我不会再拿这个问题烦你了');
|
||||||
|
} else {
|
||||||
|
message.info('下次还要继续问你哟');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function showAsyncConfirm() {
|
function showAsyncConfirm() {
|
||||||
confirm({
|
confirm({
|
||||||
beforeClose({ isConfirm }) {
|
beforeClose({ isConfirm }) {
|
||||||
@ -37,6 +69,7 @@ function showAsyncConfirm() {
|
|||||||
<div class="flex gap-4">
|
<div class="flex gap-4">
|
||||||
<VbenButton @click="showConfirm">Confirm</VbenButton>
|
<VbenButton @click="showConfirm">Confirm</VbenButton>
|
||||||
<VbenButton @click="showIconConfirm">Confirm With Icon</VbenButton>
|
<VbenButton @click="showIconConfirm">Confirm With Icon</VbenButton>
|
||||||
|
<VbenButton @click="showfooterConfirm">Confirm With Footer</VbenButton>
|
||||||
<VbenButton @click="showAsyncConfirm">Async Confirm</VbenButton>
|
<VbenButton @click="showAsyncConfirm">Async Confirm</VbenButton>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -34,6 +34,8 @@ export type AlertProps = {
|
|||||||
contentClass?: string;
|
contentClass?: string;
|
||||||
/** 执行beforeClose回调期间,在内容区域显示一个loading遮罩*/
|
/** 执行beforeClose回调期间,在内容区域显示一个loading遮罩*/
|
||||||
contentMasking?: boolean;
|
contentMasking?: boolean;
|
||||||
|
/** 弹窗底部内容(与按钮在同一个容器中) */
|
||||||
|
footer?: Component | string;
|
||||||
/** 弹窗的图标(在标题的前面) */
|
/** 弹窗的图标(在标题的前面) */
|
||||||
icon?: Component | IconType;
|
icon?: Component | IconType;
|
||||||
/**
|
/**
|
||||||
|
@ -157,7 +157,11 @@ async function handleOpenChange(val: boolean) {
|
|||||||
</div>
|
</div>
|
||||||
<VbenLoading v-if="loading && contentMasking" :spinning="loading" />
|
<VbenLoading v-if="loading && contentMasking" :spinning="loading" />
|
||||||
</AlertDialogDescription>
|
</AlertDialogDescription>
|
||||||
<div class="flex justify-end gap-x-2" :class="`justify-${buttonAlign}`">
|
<div
|
||||||
|
class="flex items-center justify-end gap-x-2"
|
||||||
|
:class="`justify-${buttonAlign}`"
|
||||||
|
>
|
||||||
|
<VbenRenderContent :content="footer" />
|
||||||
<AlertDialogCancel v-if="showCancel" as-child>
|
<AlertDialogCancel v-if="showCancel" as-child>
|
||||||
<component
|
<component
|
||||||
:is="components.DefaultButton || VbenButton"
|
:is="components.DefaultButton || VbenButton"
|
||||||
|
Loading…
Reference in New Issue
Block a user