Yao 1d7c23b289
[refactor] Toast: 升级为自定义组件 (#191)
* toast 组件初始化

* toast 增加示例 && 逻辑补全

* toast 支持直接 loading 调用

* 增加 toast readme

* 去除多余的引用
2018-04-12 21:58:54 +08:00

54 lines
1.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## Toast 轻提示
### 使用指南
在 json 文件中配置 toast 组件
```json
"usingComponents": {
"zan-toast": "/path/to/zanui-weapp/dist/toast/index"
}
```
在需要使用的页面里引入组件库模板和脚本
```html
<zan-toast id="zan-toast-test"></zan-toast>
```
```js
const Toast = require('path/to/zanui-weapp/dist/toast/toast');
Page({
// ...
// 可以在任意方法里直接调用,即可唤起
handleClick() {
Toast({
message: 'toast me',
selector: '#zan-toast-test'
});
}
});
```
#### 加载提示
```js
Toast.loading({
selector: '#zan-toast-test'
});
```
### 参数说明
#### 方法
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| Toast | `options`, `timeout` | - | 展示提示 |
| Toast.loading | `options` | - | 展示加载提示 |
| Toast.clear | - | - | 关闭提示 |
#### options 具体参数如下
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| message | toast 显示文案 | String | - | |
| type | 提示类型 | String | - | loading success fail |
| icon | toast 显示图标,可以用 icon 里面支持的所有图标 | String | - | - |
| image | toast 显示图标,为图片的链接,传入此值后会覆盖 icon 值 | String | - | |
| timeout | toast 显示时间小于0则会一直显示需要手动调用 clearZanToast 清除 | Number | - | |