# tui-tips 消息提示开源组件

介绍

包括顶部提示，居中提示，底部提示。可切换提示框背景颜色。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiTips from "@/components/thorui/tui-tips/tui-tips.vue"
export default {
	components:{
		tuiTips
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-tips": "/components/thorui/tui-tips/tui-tips"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

消息位置

通过 position 属性设置提示消息显示的位置，可设置 top，center，bottom，默认值top。

<!--顶部消息-->
<tui-tips></tui-tips>
<!--居中消息-->
<tui-tips position="center"></tui-tips>
<!--底部消息-->
<tui-tips position="bottom"></tui-tips>

样式设置

通过 backgroundColor，color，size 属性可分别设置消息框的背景色，字体颜色，字体大小。

<!--uni-app-->
<tui-tips backgroundColor="#5677fc" color="#fff" :size="30"></tui-tips>

<!--微信小程序-->
<tui-tips backgroundColor="#5677fc" color="#fff" size="{{30}}"></tui-tips>

组件调用

uni-app通过ref (opens new window) 来注册组件引用信息，微信小程序通过 this.selectComponent 获取子组件的实例对象，调用方法时确保已获取到组件实例。

组件中提供了 showTips 方法用来显示提示消息。

<!--uni-app-->
<tui-tips ref="toast"></tui-tips>

// data 数据 及 方法
export default {
 data() {
 	return {
 		
 	}
 },
 methods: {
 	//uni-app 方法调用
 	showTips: function(e) {
 		let options = {
 			msg: '一般消息提示~',
 			duration: 2000
 		};
 		//需等组件初始化完成，确认已获取到组件实例
 		this.$refs.toast && this.$refs.toast.showTips(options);
 	}
 }
}

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

// data 数据 及 方法
let toast;
Page({
  data: {
    
  },
  onReady: function (options) {
  	//需等组件初始化完成
    toast = this.selectComponent("#toast")
  },
 showTips(){
   let options = {
   	msg: '一般消息提示~',
   	duration: 2000
   };
   toast && toast.showTips(options);
 }
})

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

# Slots

插槽名称	插槽说明
-	-

# Props

属性名	类型	说明	默认值
position	String	显示位置： top，bottom，center	top
backgroundColor	String	提示框背景颜色	rgba(0, 0, 0, 0.7)
color	String	提示文本颜色	#fff
size	Number	提示文本字体大小	30

# Events

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

# Methods

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

方法名	说明	传入参数
showTips	调用该方法，显示提示消息	参数类型:Object。 { msg: "4S后关闭提示框", //提示信息 duration: 4000 //显示时长ms }