Skip to content

Confirm 消息确认框

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

基本用法

通过库中的 NueConfirm 方法可以快速创建消息确认框。

NueConfirm 方法接收一个 options 对象作为参数,其中的 content 用于指定确认框的内容。

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

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

const showConfirm = () => {
    NueConfirm({ content: '确定要继续吗?' }).then(
        () => NueMessage.success('选择已确认'),
        () => NueMessage.info('选择已取消')
    );
};
</script>

自定义标题文字

通过 title 属性来自定义确认框的标题文字。

<template>
    <nue-button @click="showConfirm">打开带有自定义标题的确认框</nue-button>
</template>

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

const showConfirm = () => {
    NueConfirm({
        content: '你确定要继续吗',
        title: '提示'
    }).then(
        () => NueMessage.success('选择已确认'),
        () => NueMessage.info('选择已取消')
    );
};
</script>

自定义按钮文字

通过 confirmButtonTextcancelButtonText 属性来自定义确认框的按钮文字。

<template>
    <nue-button @click="showConfirm">
        打开带有自定义按钮文本的确认框
    </nue-button>
</template>

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

const showConfirm = () => {
    NueConfirm({
        content: '你确定要继续吗',
        confirmButtonText: '是',
        cancelButtonText: '否'
    }).then(
        () => NueMessage.success('选择已确认'),
        () => NueMessage.info('选择已取消')
    );
};
</script>

Released under the MIT License.