# Notify 消息通知

[toc]

`Notify` 组件大多放置在窗口顶部显示，用于系统提醒等通知。此组件支持函数调用和组件调用两种方式。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-notify": "../dist/notify/index"
  }
}

```

## 用法

### 通知类型

通过 `variant` 属性来设置通知类型，支持 `default`、`info`、`success`、`warning`、`danger`、`loading` 六种类型，默认为 `default`。

```html
<tea-notify 
  variant="success" 
  text="消息通知内容" 
  show="{{ show }}"
>
</tea-notify>
```

### 展示左侧图标

通过 `icon` 属性设置左侧图标。

```html
<tea-notify 
  variant="success" 
  icon="success-fill" 
  text="消息通知内容" 
  show="{{ show }}"
>
</tea-notify>
```

### 自定义展示时长

通过 `duration` 属性设置展示时长，单位为 `ms`，默认为 `2000`。当值为 `0` 时，当前组件常驻不消失。

```html
<tea-notify 
  variant="success" 
  text="消息通知内容" 
  duration="3000" 
  show="{{ show }}"
>
</tea-notify>
```

### 函数调用

```html
<tea-notify id="tea-notify" />
```

```javascript
import Notify from 'path/to/@tencent/tea-mp/dist/notify/notify.js';

Notify({
  variant: 'success',
  text: '消息通知内容',
  duration: 5000
});
```

## Props

| 参数       | 描述                                         | 类型        | 默认值       | 可选值                                                              |
| -------- | ------------------------------------------ | --------- | --------- | ---------------------------------------------------------------- |
| variant  | 通知类型                                       | `String`  | `default` | `["default", "info", "success", "warning", "danger", "loading"]` |
| icon     | 左侧图标名称，可选值请参见 [Icon 组件](/mp/packages/icon) | `String`  | -         | -                                                                |
| text     | 展示文案                                       | `String`  | -         | -                                                                |
| duration | 展示时长(ms)，值为 0 时，当前组件常驻不消失                  | `Number`  | `2000`    | -                                                                |
| show     | 是否显示消息通知                                   | `Boolean` | `false`   | -                                                                |

## API

| 方法名    | 参数        | 描述     |
| ------ | --------- | ------ |
| Notify | `options` | 展示消息通知 |

## options

通过函数调用 Notify 组件时，支持传入以下参数：

| 参数       | 描述                                         | 类型       | 默认值           | 可选值                                                              |
| -------- | ------------------------------------------ | -------- | ------------- | ---------------------------------------------------------------- |
| variant  | 通知类型                                       | `String` | `default`     | `["default", "info", "success", "warning", "danger", "loading"]` |
| selector | 自定义选择器                                     | `String` | `#tea-notify` | -                                                                |
| icon     | 左侧图标名称，可选值请参见 [Icon 组件](/mp/packages/icon) | `String` | -             | -                                                                |
| text     | 展示文案                                       | `String` | -             | -                                                                |
| duration | 展示时长(ms)，值为 0 时，当前组件常驻不消                   | `String` | `2000`        | -                                                                |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                             | 默认值                                 | 描述  |
| ------------------------------- | ----------------------------------- | --- |
| notify-height                   | 50px                                | -   |
| notify-text-size                | @font-size-md                       | -   |
| notify-text-base-color          | @text-base-color                    | -   |
| notify-text-color               | @text-base-inverse-color            | -   |
| notify-padding-horizontal       | @padding-md                         | -   |
| notify-info-background-color    | @color-info                         | -   |
| notify-success-background-color | @color-success                      | -   |
| notify-warning-background-color | @color-warning                      | -   |
| notify-danger-background-color  | @color-danger                       | -   |
| notify-default-background-color | @background-base-color              | -   |
| notify-icon-margin-right        | 10px                                | -   |
| notify-box-shadow               | 0 2px 4px 0 rgba(158, 158, 158, .5) | -   |
| notify-zindex                   | @zindex-notify                      | -   |