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>

// data 数据 及 方法
export default {
  data() {
  	return {
  		
  	}
  },
  methods: {
  	//调用此方法显示提示，需等组件初始化完成，避免在onLoad中调用
  	showToast: function(e) {
  		let params = {
  			title: "操作成功",
  			imgUrl: "/static/images/toast/check-circle.png",
  			icon: true
  		}
  		this.$refs.toast && this.$refs.toast.show(params);
  	}
  }
}

<!--微信小程序-->
<tui-toast id="toast"></tui-toast>

//微信小程序 方法调用
let toast;
Page({
 onReady: function (options) {
   toast = this.selectComponent("#toast")
 },
 showToast(){
   let params = {
   	title: "操作成功",
   	imgUrl: "/static/images/toast/check-circle.png",
   	icon: true
   }
   toast && toast.show(params);
 }
})

// Make sure to add code blocks to your code group

Slots

插槽名称	插槽说明
-	-

Props

属性名	类型	说明	默认值
zIndex	Number	toast z-index值	99999

Events

事件名	说明	回调参数
-	-	-

Methods

如何调用方法详见 进阶用法 介绍

方法名	说明	传入参数
show	调用该方法，显示toast信息	参数类型 Object

show方法传入参数说明

title ：标题内容

content ：详细描述

imgUrl ：icon地址

icon ：是否显示icon

duration ：显示时间 ms

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码