mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-07 01:28:30 +08:00
118 lines
3.0 KiB
Markdown
118 lines
3.0 KiB
Markdown
<frame/>
|
||
|
||
# Toast 轻提示
|
||
|
||
|
||
## 基本用法
|
||
|
||
需要在页面中引入该组件，作为挂载点。
|
||
|
||
```html
|
||
<wd-toast id="wd-toast"/>
|
||
<wd-button bind:click="showToast">toast</wd-button>
|
||
```
|
||
|
||
```javascript
|
||
import Toast from '/wot-design/toast/toast.js'
|
||
|
||
Page({
|
||
showToast () {
|
||
Toast('提示信息')
|
||
}
|
||
})
|
||
```
|
||
|
||
## 成功、异常、警告、常规
|
||
|
||
```javascript
|
||
Toast.success('操作成功')
|
||
Toast.error('手机验证码输入错误，请重新输入')
|
||
Toast.warning('提示信息')
|
||
Toast.info('常规提示信息')
|
||
```
|
||
|
||
## 提示位置
|
||
|
||
```javascript
|
||
// 顶部提示
|
||
Toast({
|
||
position: 'top',
|
||
msg: '提示信息'
|
||
})
|
||
|
||
// 底部提示
|
||
Toast({
|
||
position: 'bottom',
|
||
msg: '提示信息'
|
||
})
|
||
```
|
||
|
||
## 关闭提示
|
||
|
||
```javascript
|
||
Toast.close()
|
||
```
|
||
|
||
## loading 提示
|
||
|
||
`loading` 开启后需要用户手动关闭，关闭可以调用 `close`，或者再调用一次 toast 提示，因为 toast 只会存在一个，新的 toast 会自动顶掉旧的 toast。
|
||
|
||
```javascript
|
||
Toast.loading('加载中...')
|
||
```
|
||
|
||
修改 loading 指示器类型：
|
||
|
||
```javascript
|
||
Toast.loading({
|
||
loadingType: 'ring',
|
||
msg: '加载中...'
|
||
})
|
||
```
|
||
|
||
手动关闭 loading：
|
||
|
||
```javascript
|
||
Toast.close()
|
||
```
|
||
|
||
## Attributes
|
||
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||
|-----|-----|------|-------|-------|--------|
|
||
| options | 配置项，可以直接传入字符串作为提示信息 | string / object | - | - | - |
|
||
|
||
## options
|
||
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||
|-----|------|-----|------|--------|---------|
|
||
| msg | 消息内容 | string | - | - | - |
|
||
| duration | 持续时间，单位 ms，为0时表示不自动关闭 | number | - | 2000 | - |
|
||
| iconName | 图标类型 | string | success / error / warning | - | - |
|
||
| iconSize | 左侧图标尺寸 | string | - | 42px | - |
|
||
| iconClass | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string | - | - | - |
|
||
| customIcon | 自定义图标，开启后可以通过 custom-icon-class 类名自定义图标 | Boolean | - | false | - |
|
||
| position | 提示信息框的位置 | string | top / middle / bottom | middle | - |
|
||
| zIndex | toast 层级 | number | - | 100 | - |
|
||
| loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - |
|
||
| loadingColor | [加载中图标颜色](/component/loading) | string | - | #4D80F0 | - |
|
||
| context | 引用 `wd-toast` 的页面实例或自定义组件实例 | object | - | 当前页面实例 | 2.3.0 |
|
||
|
||
## Methods
|
||
|
||
| 方法名称 | 说明 | 参数 | 最低版本 |
|
||
|--------|------|-----|---------|
|
||
| success | 成功提示 | options | - |
|
||
| error | 关闭提示 | options | - |
|
||
| info | 常规提示 | options | - |
|
||
| warning | 警告提示 | options | - |
|
||
| loading | 加载提示 | options | - |
|
||
| close |手动关闭消息提示框，是Toast实例上的方法| - | - |
|
||
|
||
## 外部样式类
|
||
|
||
| 类名 | 说明 | 最低版本 |
|
||
|-----|------|--------|
|
||
| custom-class | 根结点样式 | - |
|
||
| custom-icon-class | 自定义图标类名 | - |
|