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>
自定义按钮文字
通过 confirmButtonText
和 cancelButtonText
属性来自定义确认框的按钮文字。
<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>