Message 信息提示
用于提示用户操作执行结果或其他消息。
基础用法
使用组件库暴露的方法 NueMessage
创建一个信息提示。
NueMessage
方法接收一个 options
对象作为参数,其中的 message
属性表示提示信息。
<template>
<nue-button @click="showMsg">创建一个消息提示</nue-button>
</template>
<script lang="ts" setup>
import { NueMessage } from 'nue-ui';
const showMsg = () => {
NueMessage({ message: '创建Message成功' });
};
</script>
消息类型
通过属性 type
指定消息类型,可选值为 success
、info
、warning
、error
以及 log
。
<template>
<nue-div>
<nue-button @click="showTypedMsg('success')">成功</nue-button>
<nue-button @click="showTypedMsg('info')">信息</nue-button>
<nue-button @click="showTypedMsg('warning')">警告</nue-button>
<nue-button @click="showTypedMsg('error')">错误</nue-button>
<nue-button @click="showTypedMsg('log')">日志</nue-button>
</nue-div>
</template>
<script lang="ts" setup>
import { NueMessage } from 'nue-ui';
const showTypedMsg = type => {
NueMessage({
message: '创建Message成功',
type
});
};
</script>
消息图标
通过属性 icon
设置消息提示的图标。由于组件内部复用 <NueIcon>
组件,因此 icon
属性可选值为 <NueIcon>
组件的 name
属性可选值。
<template>
<nue-button @click="showMsgWithIcon('completed')">创建一个带图标的消息提示</nue-button>
</template>
<script lang="ts" setup>
import { NueMessage } from 'nue-ui';
const showMsgWithIcon = icon => {
NueMessage({
message: '创建Message成功',
icon
});
};
</script>
持续时间 & 手动关闭
通过 duration
属性设置消息提示的显示持续时间,接收 number
类型的值。持续时间的单位为毫秒,默认为 3000
(即 3 秒)。
当属性 duration
的值设置为 0
时,表示持续时间为 Infinity
,即消息提示不会自动消失,需要手动确认关闭。
<template>
<nue-div>
<nue-button @click="showMsgWithDuration(5000)">
创建一个持续时间为 5 秒的消息提示
</nue-button>
<nue-button @click="showMsgWithDuration(0)">创建一个需要手动关闭的消息提示</nue-button>
</nue-div>
</template>
<script lang="ts" setup>
import { NueMessage } from 'nue-ui';
const showMsgWithDuration = duration => {
const messageOptions = { message: '创建Message成功', duration };
NueMessage(messageOptions);
};
</script>
确定类型的快速使用
通过 NueMessage
中的子方法 success
、info
、warn
、error
、log
可以快速创建不同类型的消息提示。这些子方法都拥有同样的形参,包括 message
、duration
以及 icon
。
<template>
<nue-div>
<nue-button @click="NueMessage.success('成功', 5000, 'success')">成功</nue-button>
<nue-button @click="NueMessage.error('错误', 5000, 'clear')">错误</nue-button>
</nue-div>
</template>
<script lang="ts" setup>
import { NueMessage } from 'nue-ui';
</script>