Skip to content

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 指定消息类型,可选值为 successinfowarningerror 以及 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 中的子方法 successinfowarnerrorlog 可以快速创建不同类型的消息提示。这些子方法都拥有同样的形参,包括 messageduration 以及 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>

Released under the MIT License.