0.0.1-alpha.1 • Published 1 month ago
@doraemon-ui/miniprogram.toast v0.0.1-alpha.1
Toast 轻提示
一种轻量级反馈/提示,可以用来显示不会打断用户操作的内容,适合用于页面转场、数据交互的等场景中。
安装
我们推荐使用 npm 或 yarn 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。
npm install --save @doraemon-ui/miniprogram.toast
# or
yarn add @doraemon-ui/miniprogram.toast
如果你的网络环境不佳,推荐使用 cnpm。
使用指南
在 page.json 中引入组件
示例代码
WXML
JAVASCRIPT
WXSS
API
!> Toast
只支持指令式调用。
Toast.show
show
方法支持传入一个 props
对象,它包含了以下这些属性:
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
prefixCls | string | 自定义类名前缀 | dora-toast |
image | string | 自定义图片,image 的优先级高于 icon | - |
icon | string | 图标,可选值为 success、error、warn | - |
iconColor | string | 图标的颜色 | - |
text | string | 提示文本 | - |
position | string | 垂直方向显示位置,可选值为 top、bottom、center | - |
mask | boolean | 是否显示蒙层 | true |
maskClickable | boolean | 是否允许背景点击 | true |
zIndex | number | 设置蒙层的 z-index | 1000 |
duration | number | 提示的延迟时间,若小于等于 0 则不会自动关闭 | 1500 |
onClose | function | 点击关闭按钮或蒙层的回调函数 | - |
onClosed | function | 关闭后的回调函数 | - |
!> 同一时间只允许弹出一个轻提示,新出现的 Toast
会将之前正在显示中的 Toast
挤掉。
当然,也支持手动关闭一个轻提示。
const hideToast = Toast.show()
hideToast()
你也可以直接传入一个字符串,Toast.show
会自动把它作为 text
。
Toast.success
success
接受的参数同 show
,但不支持 image
icon
iconColor
属性,它的返回值不是一个控制器对象,而是 Promise<void>
。
此外,还有如下更多的方法:
- Toast.warn
- Toast.error
- Toast.info
Toast.clear
关闭所有显示中的 Toast
。
0.0.1-alpha.20
1 month ago
0.0.1-alpha.18
1 month ago
0.0.1-alpha.17
1 month ago
0.0.1-alpha.19
1 month ago
0.0.1-alpha.14
1 month ago
0.0.1-alpha.16
1 month ago
0.0.1-alpha.15
1 month ago
0.0.1-alpha.13
1 month ago
0.0.1-alpha.12
1 month ago
0.0.1-alpha.11
1 month ago
0.0.1-alpha.10
1 month ago
0.0.1-alpha.7
2 months ago
0.0.1-alpha.8
2 months ago
0.0.1-alpha.9
2 months ago
0.0.1-alpha.6
2 months ago
0.0.1-alpha.4
2 months ago
0.0.1-alpha.5
2 months ago
0.0.1-alpha.3
2 years ago
0.0.1-alpha.2
2 years ago
0.0.1-alpha.1
2 years ago