101 lines
5.7 KiB
Markdown
101 lines
5.7 KiB
Markdown
# 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}` |
|