# Toast 轻提示
概述
Toast 轻提示，一种轻量级反馈/提示，适合用于页面转场、数据交互的等场景中。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面json文件中引入
{
"navigationBarTitleText": "轻提示",
"usingComponents": {
"fui-toast":"/components/firstui/fui-toast/fui-toast"
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：在根目录app.json文件中全局引入
"usingComponents": {
"fui-toast":"components/firstui/fui-toast/fui-toast"
}
1
2
3
2
3
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
无图标提示
通过 this.selectComponent 获取子组件的实例对象（调用时需要传入一个匹配选择器 selector），然后调用上面的实例方法。
<fui-toast id="toast"></fui-toast>
1
let toast;
Page({
onReady() {
toast = this.selectComponent("#toast")
},
showToast(e) {
let options = {}
options.text = '请输入手机号';
toast && toast.show(options)
}
})
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
带图标提示
通过 this.selectComponent 获取子组件的实例对象（调用时需要传入一个匹配选择器 selector），然后调用上面的实例方法。
<fui-toast id="toast"></fui-toast>
1
//调用方法showToast显示提示信息
let toast;
Page({
onReady() {
toast = this.selectComponent("#toast")
},
showToast(e) {
let options = {}
//提示信息
options.text = 'First UI !';
//图标图片地址
options.src = "/static/images/common/img_logo.png";
toast && toast.show(options)
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
自定义提示内容
将自定义内容放入组件内，调用显示时参数传空对象即可。
<fui-toast id="toast">
<view class="fui-toast__custom">
<fui-icon name="checkbox" color="#fff"></fui-icon>
<text class="fui-toast__txt">操作成功</text>
</view>
</fui-toast>
1
2
3
4
5
6
2
3
4
5
6
//调用方法showToast显示提示信息
let toast;
Page({
onReady() {
toast = this.selectComponent("#toast")
},
showToast(e) {
let options = {}
toast && toast.show(options)
}
})
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 自定义提示内容 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 其他说明 |
|---|---|---|---|---|
| padding | String | 提示框padding值 | 32rpx | - |
| background | String | 提示框背景颜色 | rgba(0,0,0,.6) | - |
| width | Number, String | 图标宽度（高度与宽度一致），单位rpx | 64 | - |
| size | Number, String | 提示信息字体大小，单位rpx | 30 | - |
| color | String | 提示信息文本颜色 | #fffF | - |
| zIndex | Number | 提示框z-index值 | 1001 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| - | - | - |
# Methods
通过 `this.selectComponent` 获取子组件的实例对象（调用时需要传入一个匹配选择器 selector），然后调用上面的实例方法。
| 方法名 | 说明 | 传入参数 |
|---|---|---|
| show | 显示提示信息 | { text:提示信息, src:提示图标，可选, duration:显示持续时间，单位ms，可选 } |