Notify 消息通知

介绍

出现在顶部的通知组件。

使用指南

一般用法

<button bindtap="showNotify">打开通知</button>
<tms-notify show="{{show}}" message="{{content}}"/>

Component({
    methods: {
      showNotify(event) {
        this.setData({
          show: true,
          content: '这是一条消息通知',
        });
      },
    }
})

不同场景类型

<tms-notify show="{{show}}" message="{{content}}" type="{{type}}"/>

使用slot

<tms-notify show="{{show}}" message="{{content}}" use-slot>
    <view>这是slot内容</view>
</tms-notify>

API

属性	说明	类型	默认值	版本
show	控制打开及隐藏组件	boolean	false
message	显示内容	string
type	场景类型，可选值见下表。	string	primary
color	文字颜色	string	-
background	背景色	string	-
duration	展示时间，单位毫秒，Infinity为始终显示	number	3000
hide-icon	隐藏左侧图标	boolean	false
icon	自定义左侧图标	string	-
use-slot	使用slot	boolean	false

type的可选值

属性	说明
primary	主要通知
success	成功通知
warning	警告通知
error	错误通知

EVENTS

属性	说明	类型
bind:on-click	点击组件事件	(event) => {}

CSS变量

// 通知栏图标大小
--notify-icon-size: 52rpx;
// 通知栏字体大小
--notify-font-size: 32rpx;
// 通知栏line-height
--notify-line-height: 1.3;
// 通知栏默认主题背景色
--notify-primary-background: #E7EFFF;
// 通知栏默认主题文本颜色
--notify-primary-color: #3F82FF;
// 通知栏成功主题背景色
--notify-success-background: #07c160;
// 通知栏成功主题文本色
--notify-success-color: #FFF;
// 通知栏危险主题背景色
--notify-danger-background: #ee0a24;
// 通知栏危险主题文本颜色
--notify-danger-color: #FFF;
// 通知栏警告主题背景色
--notify-warning-background: #ff976a;
// 通知栏警告主题颜色
--notify-warning-color: #FFF;
// 通知栏错误主题背景色
--notify-error-background: rgb(238, 10, 36);
// 通知栏错误主题文本颜色
--notify-error-color: #FFF;

FAQ