# Toast 轻提示

[toc]

`Toast` 组件是一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。此组件支持函数调用和组件调用两种方式。

## 组件引入

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

```json

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

```

## 用法

### 通知类型

通过 `type` 属性来设置通知类型，支持 `text`、`loading` 兩种类型，默认为 `text`。

```html
<tea-toast 
  type="text" 
  text="提示内容" 
  show="{{ show }}"
>
</tea-toast>
```

### 加载图标类型

通过 `loadingType` 属性设置加载图标类型，默认为 `spinner`。仅在 `type` 为 `loading` 时生效。

```html
<tea-toast 
  type="loading" 
  text="加載中" 
  loadingType="spinner" 
  show="{{ show }}"
>
</tea-toast>
```

### 自定义展示时长

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

```html
<tea-toast 
  type="text" 
  text="提示内容" 
  duration="3000" 
  show="{{ show }}"
>
</tea-toast>
```

### 函数调用

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

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

Toast.loading({
  mask: true,
  text: '加载中...',
  loadingType: 'circular',
});
```

## Props

| 参数          | 描述                                       | 类型        | 默认值       | 可选值                       |
| ----------- | ---------------------------------------- | --------- | --------- | ------------------------- |
| show        | 是否显示轻提示                                  | `Boolean` | `false`   | -                         |
| mask        | 是否显示遮罩层                                  | `Boolean` | `false`   | -                         |
| type        | 提示类型                                     | `String`  | `text`    | `["text", "loading"]`     |
| icon        | 图标名称，可选值请查阅 [Icon 组件](/mp/packages/icon) | `String`  | -         | -                         |
| text        | 提示文本                                     | `String`  | -         | -                         |
| loadingType | 加载图标类型                                   | `String`  | `spinner` | `["circular", "spinner"]` |
| duration    | 提示显示时间(ms)，值为 0 时，当前组件常驻不消失              | `Number`  | `2000`    | -                         |

## API

| 方法名           | 参数        | 描述      |
| ------------- | --------- | ------- |
| Toast.icon    | `options` | 展示带图标提示 |
| Toast.text    | `options` | 展示纯文字提示 |
| Toast.loading | `options` | 展示加载提示  |

## options

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

| 参数          | 描述                                       | 类型        | 默认值          | 可选值                       |
| ----------- | ---------------------------------------- | --------- | ------------ | ------------------------- |
| mask        | 是否显示遮罩层                                  | `Boolean` | `false`      | -                         |
| icon        | 图标名称，可选值请查阅 [Icon 组件](/mp/packages/icon) | `String`  | -            | -                         |
| text        | 提示文本                                     | `String`  | -            | -                         |
| selector    | 自定义选择器                                   | `String`  | `#tea-toast` | -                         |
| loadingType | 加载图标类型                                   | `String`  | `spinner`    | `["circular", "spinner"]` |
| duration    | 提示显示时间(ms)，值为 0 时，当前组件常驻不消失              | `Number`  | `2000`       | -                         |

## Slots

| 名称  | 描述      |
| --- | ------- |
| -   | 自定义显示内容 |

## 外部样式类

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

## CSS变量属性表

| 变量名                    | 默认值                      | 描述  |
| ---------------------- | ------------------------ | --- |
| toast-max-width        | 70%                      | -   |
| toast-text-size        | @font-size-sm            | -   |
| toast-text-color       | @text-base-inverse-color | -   |
| toast-background-color | rgba(0, 0, 0, .7)        | -   |
| toast-border-radius    | 4px                      | -   |
| toast-zindex           | @zindex-toast            | -   |