# tui-tips 消息提示

介绍

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

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

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

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

# 微信小程序引入(可在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>
样式设置

通过 backgroundColorcolorsize 属性可分别设置消息框的背景色,字体颜色,字体大小。

<!--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>

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

//uni-app 方法调用
showTips: function(e) {
	let options = {
		msg: '一般消息提示~',
		duration: 2000
	};
	this.$refs.toast.showTips(options);
}

//微信小程序 方法调用
let toast;
Page({
  onReady: function (options) {
    toast = this.selectComponent("#toast")
  },
  showTips(){
    let options = {
    	msg: '一般消息提示~',
    	duration: 2000
    };
    toast.showTips(options);
  }
})

# Slots

none

# Props

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

# Methods

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

# 预览

# 线上程序扫码预览

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