# 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);
  }
})