Tips 警告消息

此组件用户弹出文字提示信息，可以修改文字和背景颜色。

注意：

由于uni中无法通过js创建元素，所以需要在页面中调用<tn-tips />组件，再通过ref开启。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	兼容中	兼容中	兼容中	兼容中

基本使用

通过ref弹出tips。

<template>
  <view>
    <tn-tips ref="tips" position="top"></tn-tips>
    <tn-button @click="open">
      弹出Tips
    </tn-button>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      open() {
        this.$refs.tips.show({
          msg: '对不起，网络连接失败',
          backgroundColor: '#E83A30',
          fontColor: '#FFFFFF',
          duration: 1500
        })
      }
    }
  }
</script>

切换显示的位置

通过设置position属性可以将信息显示在不同的地方，top(顶部),center(中间),bottom(底部)。

<tn-tips ref="tips" position="top"></tn-tips>

解决使用自定义导航栏时被遮挡的问题

此组件提供了top属性可以设置距离顶部的高度，当前属性在position为top时生效。

只需要将top属性设置为自定义顶部导航栏的高度即可解决问题。

<tn-tips ref="tips" position="top" :top="45"></tn-tips>

API

Props

属性名	说明	类型	默认值	可选值
position	消息显示的位置	String	top	center/bottom
top	消息距离顶部的距离，position设置为top生效，单位px	Number	-	-
zIndex	Tips的zIndex值	Number	19080	-

Params

这些参数通过ref调用<tn-toast />组件内部的show方法进行传入。

参数	说明	类型	默认值	可选值
msg	警告消息的内容	String	-	-
backgroundColor	警告消息容器的背景颜色	String	-	-
fontColor	警告消息的字体颜色	String	-	-
duration	消息提示持续时间，单位ms	Number	2000	-

Slots

none

Event

事件名称	说明	回调参数
close	Tips消息提示关闭时触发	-