# tui-toast 提示
介绍
toast提示:带icon提示,可隐藏,居中显示。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiToast from "@/components/thorui/tui-toast/tui-toast.vue"
export default {
components:{
tuiToast
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|---|
升级中 | √ | √ | √ | √ | √ | √ | √ |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-toast": "/components/thorui/tui-toast/tui-toast"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
组件调用
uni-app通过ref (opens new window) 来注册组件引用信息,微信小程序通过 this.selectComponent
获取子组件的实例对象。
组件中提供了 show
方法用来显示提示消息。
<!--uni-app-->
<tui-toast ref="toast"></tui-toast>
<!--微信小程序-->
<tui-toast id="toast"></tui-toast>
//uni-app 方法调用
showToast: function(e) {
let params = {
title: "操作成功",
imgUrl: "/static/images/toast/check-circle.png",
icon: true
}
this.$refs.toast.show(params);
}
//微信小程序 方法调用
let toast;
Page({
onReady: function (options) {
toast = this.selectComponent("#toast")
},
showToast(){
let params = {
title: "操作成功",
imgUrl: "/static/images/toast/check-circle.png",
icon: true
}
toast.show(params);
}
})
# Slots
none
# Props
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
zIndex | Number | toast z-index值 | 99999 |
# Methods
方法名 | 说明 | 传入参数 |
---|---|---|
show | 调用该方法,显示toast信息 | 参数类型 Object |
show方法传入参数说明
title
:标题内容
content
:详细描述
imgUrl
:icon地址
icon
:是否显示icon
duration
:显示时间 ms
# 预览
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |