Confirm 消息确认框

消息确认框用于确认用户的操作，常用于删除、确认等场景。

基础用法

通过组件库暴露的方法 NueConfirm 创建一个消息确认框。

NueConfirm 方法接收一个 options 对象作为参数，其中：

content 用于指定确认框的内容
title 用于指定确认框的标题文字
confirmButtonText 用于指定确认按钮的文字
cancelButtonText 用于指定取消按钮的文字。

<template>
    <nue-button @click="showConfirm">基础确认对话框</nue-button>
</template>

<script lang="ts" setup>
import { NueConfirm, NueMessage } from 'nue-ui';

const showConfirm = () => {
    NueConfirm({
        title: '你确定要继续吗？',
        content: '执行此操作将无法撤销。这将永久删除您的帐户，并从我们的服务器上清除您的数据。',
        confirmButtonText: '继续',
        cancelButtonText: '不继续'
    }).then(([isByCancel]) => {
        if (isByCancel) {
            NueMessage.info('取消!');
            return;
        }
        NueMessage.success('确认!');
    });
};
</script>

关于返回值

需要注意的是，确认框的返回值为一个 Promise 对象。不管用户点击了确认按钮还是取消按钮，Promise 都将被 resolve。resolve 值为一个数组，其中包含一个布尔值 isByCancel，用于表示用户是否点击了取消按钮；以及回调函数 onConfirm 的返回值（如果有，没有则为 null）。当回调函数 onConfirm 或者组件内部执行出现错误时，Promise 会被 reject。

具体的类型定义如下（简化）：

typescript

type IsByCancel = boolean;
type OnConfirmResult = unknown;
type CallerResult = [IsByCancel, OnConfirmResult]
// 确认框的返回值类型
type CallerReturn = Promise<CallerResult>

自定义确认回调

通过属性 onConfirm 传入一个函数作为确认时的回调函数，函数会在用户点击确认按钮后执行。

组件同时支持异步的回调函数，当用户点击确认按钮后，组件会等待回调函数执行完毕，再执行确认的后续逻辑。执行其间所有的按钮都将处于禁用，确认按钮会显示为加载状态。

<template>
    <nue-button @click="openConfirmWithOnConfirm">打开确认对话框</nue-button>
</template>

<script lang="ts" setup>
import { NueConfirm, NueMessage } from 'nue-ui';

const openConfirmWithOnConfirm = () => {
    NueConfirm({
        title: '你确定要继续吗？',
        content: '执行此操作将无法撤销。这将永久删除您的帐户，并从我们的服务器上清除您的数据。',
        confirmButtonText: '继续',
        cancelButtonText: '不继续',
        onConfirm: async () => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const randomNumber = Math.floor(Math.random() * 100);
                    if (randomNumber % 2 === 0) {
                        resolve('执行成功!');
                    } else {
                        reject(new Error('执行失败!'));
                    }
                }, 1024);
            });
        }
    }).then(
        ([isByCancel, onConfirmResult]) => {
            if (isByCancel) return;
            NueMessage.success(onConfirmResult as string);
        },
        err => {
            if (err instanceof Error) {
                NueMessage.error(err.message);
                return;
            }
            NueMessage.error(err);
        }
    );
};
</script>

自定义动画

通过属性 animation 配置组件的起始动画效果。属性值接受 string 以及 { name: string; duration?: number } 类型值。其中 name 成员指定动画名称，（如果有指定）会被转换为 CSS 中的 animation-name 的值，需要在 CSS 中定义对应的动画效果；duration 属性指定动画持续时间，（如果有指定）会被转换为 CSS 中的 animation-duration 的值，单位建议为 ms。

通过属性 closeAnimation 配置组件的关闭动画效果。属性值接受类型值与 animation 属性一致；属性 overlayAnimation 和 overlayCloseAnimation 配置组件遮罩层动画效果。属性值接受类型值分别与 animation 和 closeAnimation 属性一致。

根据上述描述，动画相关属性分别为：animation、closeAnimation、overlayAnimation 以及 overlayCloseAnimation。

注意

请确保自定义动画效果在某个 CSS 文件中被定义，否则会导致动画失效。

<template>
    <nue-button @click="openConfirm2">打开确认对话框</nue-button>
</template>

<script lang="ts" setup>
import { NueConfirm } from 'nue-ui';

function openConfirm2() {
    NueConfirm({
        content: '自定义了 自身 以及 背景层 的 动画 以及 动画的持续时间。',
        confirmButtonText: '知道了',
        unuseCancelButton: true,
        animation: 'slide-in-from-top',
        closeAnimation: { name: 'slide-out-to-top', duration: 240 },
        overlayAnimation: 'fade-in',
        overlayCloseAnimation: { name: 'fade-out', duration: 240 }
    });
}
</script>

自定义主题

通过 theme 属性可以自定义确认框的主题。属性值为一个字符串，用于指定自定义主题的类名。

<template>
    <nue-button @click="showConfirm">基础确认对话框</nue-button>
</template>

<script lang="ts" setup>
import { NueConfirm } from 'nue-ui';

const showConfirm = () => {
    NueConfirm({
        title: '自定义主题',
        content: '自定义了主题',
        confirmButtonText: '知道了',
        unuseCancelButton: true,
        theme: 'my-confirm'
    });
};
</script>

<style>
/* 要注意弹出层并非在组件内部渲染，因此不能使用组件范围的样式，即非 scoped */
.nue-confirm--my-confirm {
    --nue-confirm-animation-name: my-confirm-open;
    --nue-confirm-close-animation-name: my-confirm-close;

    width: 16rem;
    height: 9rem;
    background-color: #212121;

    .nue-confirm__header {
        font-size: 1rem;
        color: #f9f9f9;
    }

    .nue-confirm__content {
        font-size: 0.875rem;
        color: #c5c5c5;
    }

    .nue-confirm__footer .nue-button--primary {
        background-color: #f2f2f2;
        color: #212121;
    }
}

@keyframes my-confirm-open {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes my-confirm-close {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-50px);
        opacity: 0;
    }
}
</style>

Confirm 消息确认框 ​

基础用法 ​

关于返回值 ​

自定义确认回调 ​

自定义动画 ​

自定义主题 ​