TnNoticeBar-通知栏

该组件一般用于展示通知信息。

组件位置

nodeuni_modules

typescript

import TnNoticeBar from '@tuniao/tnui-vue3-uniapp/components/notice-bar/src/notice-bar.vue'

import TnNoticeBar from '@tuniao/tnui-vue3-uniapp/components/notice-bar/src/notice-bar.vue'

typescript

import TnNoticeBar from '@/uni_modules/tuniaoui-vue3/components/notice-bar/src/notice-bar.vue'

import TnNoticeBar from '@/uni_modules/tuniaoui-vue3/components/notice-bar/src/notice-bar.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

通过data设置一个通知内容，数组里面存放的是通知的内容信息
通过show控制显示还是隐藏通知栏

vue

<script lang="ts" setup>
const noticeData = [
  'TuniaoUI For Vue3 UNIAPP版本全新发布 2023-05-17',
  '新版本提供了cli的方式进行初始化项目',
  '新版本能更好的与VSCode进行结合',
  '图鸟承接小程序、web、UI设计等业务, 欢迎咨询',
]
</script>

<template>
  <TnNoticeBar :data="noticeData" />
</template>

<script lang="ts" setup>
const noticeData = [
  'TuniaoUI For Vue3 UNIAPP版本全新发布 2023-05-17',
  '新版本提供了cli的方式进行初始化项目',
  '新版本能更好的与VSCode进行结合',
  '图鸟承接小程序、web、UI设计等业务, 欢迎咨询',
]
</script>

<template>
  <TnNoticeBar :data="noticeData" />
</template>

修改滚动方式

可以通过direction和loop的参数修改通知的滚动方式

水平连续滚动-默认滚动方式

将direction设置为horizontal，loop设置为true，即可实现水平连续滚动

在该模式下speed修改的是每秒显示的像素

vue

<template>
  <TnNoticeBar :data="noticeData" direction="horizontal" loop />
</template>

<template>
  <TnNoticeBar :data="noticeData" direction="horizontal" loop />
</template>

水平分条显示

将direction设置为horizontal，loop设置为false，即可实现水平分条显示

在该模式下speed修改的是每条通知显示的时间

vue

<template>
  <TnNoticeBar :data="noticeData" direction="horizontal" :loop="false" />
</template>

<template>
  <TnNoticeBar :data="noticeData" direction="horizontal" :loop="false" />
</template>

垂直分条显示

将direction设置为vertical，即可实现垂直分条显示

在该模式下，loop参数无效

在该模式下speed修改的是每条通知显示的时间

vue

<template>
  <TnNoticeBar :data="noticeData" direction="vertical" />
</template>

<template>
  <TnNoticeBar :data="noticeData" direction="vertical" />
</template>

修改通知栏的样式

可以通过修改color和bg-color的值来修改通知栏的字体颜色和背景颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色和字体颜色

可以通过修改font-size来修改通知栏的字体大小

vue

<template>
  <TnNoticeBar :data="noticeData" bg-color="tn-gray-light" color="#01beff" />
</template>

<template>
  <TnNoticeBar :data="noticeData" bg-color="tn-gray-light" color="#01beff" />
</template>

设置通知栏左右图标

通过left-icon和left-icon-color设置左图标和左图标的颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色

通过right-icon和right-icon-color设置右图标和右图标的颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色

设置左图标和样式

vue

<template>
  <TnNoticeBar :data="noticeData" left-icon="sound" left-icon-color="tn-grey" />
</template>

<template>
  <TnNoticeBar :data="noticeData" left-icon="sound" left-icon-color="tn-grey" />
</template>

设置右图标和样式

vue

<template>
  <TnNoticeBar
    :data="noticeData"
    right-icon="close"
    right-icon-color="tn-red"
  />
</template>

<template>
  <TnNoticeBar
    :data="noticeData"
    right-icon="close"
    right-icon-color="tn-red"
  />
</template>

设置暂停播放和不自动播放

在水平连续滚动的时，将pause设置为false，通知滚动一次之后就不会继续滚动

在水平和垂直分条显示时，将pause设置为false，通知将不会自动滚动

将auto-play设置为false将不会在初始化完成后自动播放通知，需要用户手动进行设置

vue

<template>
  <TnNoticeBar :data="noticeData" :pause="false" />
</template>

<template>
  <TnNoticeBar :data="noticeData" :pause="false" />
</template>

vue

<template>
  <TnNoticeBar :data="noticeData" :auto-play="false" />
</template>

<template>
  <TnNoticeBar :data="noticeData" :auto-play="false" />
</template>

数据为空时自动隐藏

设置auto-hidden为true后在data数据为空时，将会自动隐藏通知栏

vue

<template>
  <TnNoticeBar :data="noticeData" auto-hidden />
</template>

<template>
  <TnNoticeBar :data="noticeData" auto-hidden />
</template>

API

Props

属性名	说明	类型	默认值	可选值
show	显示通知栏	Boolean	`true`	`false`
data	通知栏数据	String[]	-	-
bg-color	背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-
text-color	文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
font-size	文字大小，默认单位为 rpx，可以传入带单位的尺寸值	String	-	-
left-icon	设置通知栏左边显示的图标	String	-	图标有效值
left-icon-color	左图标颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
left-icon-size	左图标字体大小，默认单位为 rpx	String	-	-
right-icon	设置通知栏右边显示的图标	String	-	图标有效值
right-icon-color	右图标颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
right-icon-size	右图标字体大小，默认单位为 rpx	String	-	-
pause	暂停播放通知	Boolean	`false`	`true`
auto-play	初始化完成后自动播放	Boolean	`true`	`false`
direction	通知滚动的方向	String	horizontal	vertical
loop	循环播放通知	Boolean	`true`	`false`
speed	通知播放速度，在 `direction` 为 `horizontal` 以及 `loop` 为 `true` 时表示每秒滚动的像素数，在 `direction` 为 `vertical` 或者 `direction` 为 `horizontal` 且 `loop` 为 `false` 时表示切换的时间间隔单位 ms	Number	-	-
auto-hide	在 data 为空时是否自动隐藏	Boolean	`true`	`false`

Emits

事件名	说明	类型
click	通知点击事件，在水平连续滚动时默认返回 0	`(index: number) => void`
left-icon-click	左图标点击事件	`() => void`
right-icon-click	右图标点击事件	`() => void`

TnNoticeBar-通知栏 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

修改滚动方式 ​

水平连续滚动-默认滚动方式 ​

水平分条显示 ​

垂直分条显示 ​

修改通知栏的样式 ​

设置通知栏左右图标 ​

设置左图标和样式 ​

设置右图标和样式 ​

设置暂停播放和不自动播放 ​

数据为空时自动隐藏 ​

API ​

Props ​

Emits ​