# 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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码