# Message

消息组件

### 特性及兼容性

无

## 引入

### 引入组件

在 `app.json` 或 `page.json` 中引入组件：

```json
"usingComponents": {
  "t-message": "tdesign-miniprogram/message/message"
}
```

### 引入 API

若以 API 形式调用 Message，则需在页面 `page.js` 中引入组件 API：

```js
import Message from 'tdesign-miniprogram/message/index';
```

## 用法

### 消息提示

用 API `Message.info` 方法调用反馈类对话框

```html
<!-- page.wxml -->
<t-message id="t-message" />
```

```js
// page.js
Message.info({
  content: '消息内容',
});
```

## API

### `<Message>` 组件

组件路径：`tdesign-miniprogram/message/message`

#### Props

| 属性            | 值类型                  | 默认值    | 说明                                                                                                                                                                       |
| --------------- | ----------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | --------------- |
| visible         | Boolean                 | false     | 是否显示，隐藏时默认销毁组件                                                                                                                                               | N              |
| content         | String / Slot           | -         | 用于自定义消息弹出内容。                                                                                                                                                   | N              |
| theme           | String                  | info      | 消息组件风格。可选值：info/success/warning/error。                                                                                                                         | N              |
| duration        | Number                  | 3000      | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。                                                                                  | N              |
| offset          | `Object`                | -         | 偏移量，默认[0,0]                                                                                                                                                          |
| closeBtn        | String / Boolean /Slot  | undefined | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。                              | N              |
| externalClasses | Array                   | -         | 样式类名，分别用于设置 组件外层、消息内容、左侧图标、操作按钮、关闭按钮等元素类名。`['t-class', 't-class-content', 't-class-icon', 't-class-action', 't-class-close-btn']` | N              |
| icon            | String / Boolean / Slot | true      | 消息提醒前面的图标。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 'info' 或 'bell' 则显示组件内置图标。也可以完全自定义图标节点。TS 类型：`boolean  | 'warning_fill' | 'sound_fill'` N |
| marquee         | Object                  | -         | 跑马灯效果,delay 动画延迟时间 (s);speed 滚动速率 (px/s)。N                                                                                                                 |
| zIndex          | Number                  | -         | 元素层级，样式默认为 5000                                                                                                                                                  | N              |

### Event

| 事件名         | 说明                                     | 参数             |
| -------------- | ---------------------------------------- | ---------------- |
| closeBtnClick  | 点击关闭 icon 时触发                     | -                |
| actionBtnClick | 点击按钮时触发, 可通过 self 拿到组件实例 | `{ self: this }` |

### Slot

| 事件名   | 说明                |
| -------- | ------------------- |
| icon     | 左侧 icon 处        |
| action   | 右侧操作按钮。 N    |
| closeBtn | 按钮（关闭 icon）处 |

### 外部样式

| class             | 说明        |
| ----------------- | ----------- |
| t-class           | 根节点      |
| t-class-content   | 文本内容    |
| t-class-icon      | 左侧 icon   |
| t-class-action    | 右侧 button |
| t-class-close-btn | 右侧 icon   |

### 编程式调用

| 方法                       | type    | 返回值 | 说明                                                                                                         |
| -------------------------- | ------- | ------ | ------------------------------------------------------------------------------------------------------------ |
| Message.info(`options`)    | info    | `void` | 弹出消息，参数参考 Props,额外可指定`{context: WechatMiniprogram.Component.TrivialInstance,selector: string}` |
| Message.success(`options`) | success | `void` | 弹出消息，参数参考 Props,额外可指定`{context: WechatMiniprogram.Component.TrivialInstance,selector: string}` |
| Message.warning(`options`) | warning | `void` | 弹出消息，参数参考 Props,额外可指定`{context: WechatMiniprogram.Component.TrivialInstance,selector: string}` |
| Message.error(`options`)   | error   | `void` | 弹出消息，参数参考 Props,额外可指定`{context: WechatMiniprogram.Component.TrivialInstance,selector: string}` |