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>