Notify 消息通知

介绍

在页面顶部展示消息提示

安装

  1. import { createApp } from 'vue';
  2. import { Notify } from '@nutui/nutui';
  4. const app = createApp();
  5. app.use(Notify);

基本用法

  1. export default {
  2.   mounted() {
  3.       Notify.text('通知内容', {
  4.         onClosed() {
  5.           console.log('close');
  6.         },
  7.         onClick: () => {
  8.           console.log('click');
  9.         }
  10.       });
  11.   }
  12. }

通知类型

主要通知

  1.     mounted(){
  2.       Notify.primary('通知内容');
  3.     }

成功通知

  1.     mounted(){
  2.       Notify.success('通知内容');
  3.     }

危险通知

  1.     mounted(){
  2.       Notify.danger('通知内容');
  3.     }

警告通知

  1.     mounted(){
  2.       Notify.warn('通知内容');
  3.     }

自定义

自定义样式

  1.     mounted(){
  2.       Notify.text(val, {
  3.         color: '#ad0000',
  4.         background: '#ffe1e1'
  5.       });
  6.     }

自定义时长

  1.     mounted(){
  2.       Notify.text(val, {
  3.         duration: 10000
  4.       });
  5.     }

API

Props

字段说明类型默认值
type提示的信息String空
message展示文案，支持通过\n换行Booleanfalse
duration展示时长(ms)，值为 0 时，notify 不会消失String空
color字体颜色String空
background背景颜色String空
class-name自定义类名String/Number1

Events

事件名说明回调参数
on-click点击事件回调无
on-close关闭事件回调无

Notify 消息通知 - 图1