Appearance

Return to top
On this page

Notification 消息提示

基础用法

普通通知，4.5 秒后自动消失。message配置标题，description配置描述

显示代码
vue
<template>
  <div>
    <n-button :plain="true" @click="open">Show notification</n-button>
    <n-button :plain="true" @click="openwithDesc">
      Show notification with description
    </n-button>
  </div>
</template>

<script setup lang="ts">
import { Notification } from 'neat-design';

const open = () => {
  Notification('我是个Notification');
};

const openwithDesc = () => {
  Notification({
    message: '我是个Notification',
    description: '大家好，我在这里出现了，我是这个Notification的内容',
  });
};
</script>

不同状态

用来显示「成功、警告、消息、错误」类的通知。

当需要自定义更多属性时，Notification 也可以接收一个对象为参数。 比如，设置 type 字段可以定义不同的状态，默认为 info。 此时标题内容以 message 的值传入，描述内容以 description 的值传入。

同时，库也为 Notification 的各种 type 注册了属性方法,可以在不传入 type 字段的情况下通过属性方法直接调用。

方法调用


属性调用


显示代码 custThunderboltIcon
vue
<template>
  <div>
    <n-button plain @click="notificationDefaultFun">
      Info Notification
    </n-button>
    <n-button type="info" plain @click="notificationInfoFun">
      Info Notification
    </n-button>
    <n-button type="warning" plain @click="notificationWarnFun">
      Warning Notification
    </n-button>
    <n-button type="danger" plain @click="notificationDangerFun">
      Error Notification
    </n-button>
    <n-button type="success" plain @click="notificationSuccessFun">
      Success Notification
    </n-button>

    <br />

    <n-button type="info" plain @click="notificationInfoAttr">
      Info Notification
    </n-button>
    <n-button type="warning" plain @click="notificationWarnAttr">
      Warning Notification
    </n-button>
    <n-button type="danger" plain @click="notificationDangerAttr">
      Error Notification
    </n-button>
    <n-button type="success" plain @click="notificationSuccessAttr">
      Success Notification
    </n-button>
  </div>
</template>

<script setup lang="ts">
import { Notification } from 'neat-design';

const notificationDefaultFun = () => {
  Notification('this is a notification.');
};
const notificationInfoFun = () => {
  Notification({
    type: 'info',
    message: 'this is a notification.',
  });
};
const notificationWarnFun = () => {
  Notification({
    type: 'warning',
    message: '警告',
  });
};
const notificationDangerFun = () => {
  Notification({
    type: 'danger',
    message: '一个危险提示',
    description: '你现在正在进行危险操作，请谨慎考虑',
  });
};
const notificationSuccessFun = () => {
  Notification({
    type: 'success',
    message: '成功',
    description: '成功了！太棒了！',
  });
};

const notificationInfoAttr = () => {
  Notification.info('this is a notification.');
};
const notificationWarnAttr = () => {
  Notification.warning('警告');
};
const notificationDangerAttr = () => {
  Notification.danger({
    message: '一个危险提示',
    description: '你现在正在进行危险操作，请谨慎考虑',
  });
};
const notificationSuccessAttr = () => {
  Notification.success({
    message: '成功',
    description: '成功了！太棒了！',
  });
};
</script>

消失时间与手动关闭

可以添加关闭按钮。

默认的 Notification 是不可以被人工关闭的。 如果你需要手动关闭功能，你可以把 showClose 设置为 true 此外，Notification 拥有可控的 duration， 默认的关闭时间为 4500 毫秒，当把这个属性的值设置为 0 便表示该消息不会被自动关闭。

显示代码
vue
<template>
  <n-button plain @click="closeInfo">Info Notification</n-button>
  <n-button plain @click="closeWarn">Warning Notification</n-button>
  <n-button plain @click="closeDanger">Error Notification</n-button>
  <n-button plain @click="closesuccess">Success Notification</n-button>
</template>

<script setup lang="ts">
import { Notification } from 'neat-design';
const closeInfo = () => {
  Notification({
    showClose: true,
    message: 'This is a message.',
  });
};
const closeWarn = () => {
  Notification({
    showClose: true,
    message: 'Congrats, this is a success message.',
    type: 'success',
  });
};
const closeDanger = () => {
  Notification({
    showClose: true,
    message: 'Warning, this is a warning message.',
    type: 'warning',
  });
};
const closesuccess = () => {
  Notification({
    showClose: true,
    message: '这是个需要手动关闭的通知.',
    type: 'danger',
    duration: 0,
  });
};
</script>

自定义 Icon

可以在配置对象中传入icon和color来自定义图标

显示代码
vue
<template>
  <div>
    <n-button plain @click="custThunderboltIcon">thunderbolt-fill</n-button>
    <n-button plain @click="custLikeIcon">like-fill</n-button>
  </div>
</template>

<script setup lang="ts">
import { Notification } from 'neat-design';
const custThunderboltIcon = () => {
  Notification({
    icon: 'thunderbolt-fill',
    color: 'orange',
    message: '看，这是一道闪电',
  });
};
const custLikeIcon = () => {
  Notification({
    icon: 'like-fill',
    color: 'red',
    message: '干得不错小老弟',
    description: '给你点个赞',
  });
};
</script>

全局注册时的使用方法

vue为我们提供了app.config.globalProperties来挂载全局属性和方法,如果不需要按需导入，而是在入口文件中直接注册整个组件库的话，则Notification将挂载到全局,名为$notification，不需要每个组件中都import

显示代码
js
//main.ts
import neatDesign from 'neat-design';
const app = createApp(App);
app.use(neatDesign);
app.mount('#app');
vue
<!-- 组件 -->
<template>
  <div>
    <n-button plain @click="globalNotification">Info Notification</n-button>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();

const globalNotification = () => {
  proxy.$notification({
    message: 'This is a message.',
    showClose: true,
  });
};
</script>

API

方法调用和属性方法调用参数一致

参数说明类型可选值默认值
typemessage 类型string['success','warning','danger','info']——
message消息提示标题string————
description消息提示描述string————
icon自定义图标名stringIcon——
color图标的颜色string————
duration自动关闭的延时，单位毫秒。设为 0 时不自动关闭number——4500
showClose是否显示关闭按钮boolean——false