NoticeBar 通知栏

通知栏组件，用于在页面顶部展示通知提醒。

组件类型

基本用法

设置 text 文本内容和 prefix 左侧图标。

<wd-notice-bar text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息" prefix="warn-bold" />

组件变体

类型修改

设置 type 可修改通知类型，通知类型共有三种 info|warning|danger，默认值为warning。

<wd-notice-bar text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息" prefix="warn-bold" custom-class="space" />
<wd-notice-bar text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息" prefix="check-outline" type="info" custom-class="space" />
<wd-notice-bar text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息" prefix="wifi-error" type="danger" />

:deep(.space) {
  margin-bottom: 10px;
}

可关闭的

设置 closable 属性，使通知栏可以关闭。

<wd-notice-bar text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息" closable />

内容形态

禁止滚动

设置 scrollable 为 false 可以关闭滚动效果，通知栏会保持静态展示。

<wd-notice-bar text="欲买桂花同载酒，终不似，少年游" :scrollable="false" prefix="stop" />

插槽演示

未传 prefix 属性时，可以通过 prefix 插槽自定义左侧内容；suffix 插槽会覆盖默认的关闭图标区域。

<wd-notice-bar :scrollable="false">
  <template #prefix>
    <wd-icon class="prefix" name="warn-bold">占位符</wd-icon>
  </template>
  通知被禁或时段内消息屏蔽可能造成消…
  <template #suffix>
    <div style="color: #4d80f0">查看</div>
  </template>
</wd-notice-bar>

:deep(.prefix) {
  font-size: 18px;
  padding-right: 4px;
  width: 18px;
  height: 18px;
}

多行展示

设置 wrapable 属性为 true 且同时禁止滚动 scrollable 即可开启多行展示。

<wd-notice-bar text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息" wrapable :scrollable="false" />

组件样式

自定义颜色

设置 color 修改文字和图标颜色，设置 background-color 修改背景颜色。

<wd-notice-bar
  text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息"
  prefix="check-outline"
  color="#34D19D"
  background-color="#f0f9eb"
/>

特殊用法

多文本轮播

将一个string[]传递给text属性，即可开启多文本轮播，并且会在展示下一条文本时触发next事件，该事件接收一个number参数，代表的是当前展示的文本数组索引

<wd-notice-bar :text="textArray" prefix="check-outline" @next="onNext" />

import { ref } from 'vue'

const textArray = ref([
  '欢迎使用wot design uni',
  '该组件库基于uniapp ->Vue3, ts构建',
  '项目地址：https://github.com/wot-ui/wot-ui',
  '我们的目标是打造最强uniapp组件库',
  '诚挚邀请大家共同建设',
  '这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息'
])

const onNext = (index: number) => {
  console.log('展示下一条，index: ', index)
  console.log('文本是：' + textArray.value[index])
}

垂直滚动

1. direction传递vertical即可开启垂直滚动，目前仅支持一个方向的垂直滚动
2. text为数组时才会进行滚动

<wd-notice-bar prefix="warn-bold" direction="vertical" :text="textArray" :delay="3" custom-class="space" />
<wd-notice-bar prefix="warn-bold" direction="vertical" text="只有一条消息不会滚动" :delay="3" custom-class="space" />

点击事件

点击通知内容区时会触发 click 事件，返回当前展示文本和对应索引。

<wd-notice-bar :text="textArray" prefix="thunderbolt" @click="handleClick" />

function handleClick(result: { text: string; index: number }) {
  console.log(result)
}

重置播放动画 ^(1.3.13)

通过ref获取组件实例，调用reset方法即可重置播放动画。当你遇到NoticeBar的播放动画异常的情况时，可以调用reset方法重置动画。

例如：在APP-VUE端，Tabbar页面使用NoticeBar时，从其它界面返回到NoticeBar页面，会偶发NoticeBar动画异常，此时可以调用reset方法重置动画。

参考issues：#358、#650

<wd-notice-bar ref="notice" prefix="warn-bold" direction="vertical" :text="textArray" :delay="3" />
<wd-button @click="handleReset">重置播放动画</wd-button>

// uni_modules
import { type NoticeBarInstance } from '@/uni_modules/wot-design-uni/components/wd-notice-bar/types'
// npm
// import { type NoticeBarInstance } from 'wot-design-uni/components/wd-notice-bar/types'

const notice = ref<NoticeBarInstance>()

const textArray = ref([
  '欢迎使用wot design uni',
  '该组件库基于uniapp ->Vue3, ts构建',
  '项目地址：https://github.com/wot-ui/wot-ui',
  '我们的目标是打造最强uniapp组件库',
  '诚挚邀请大家共同建设',
  '这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息'
])

function handleReset() {
  notice.value?.reset()
}

Attributes

参数	说明	类型	默认值
text	通知栏文案	string | string[]	''
type	通知栏类型，可选值为 warning、info、danger	NoticeBarType	warning
prefix	左侧图标名称	string	-
scrollable	是否开启滚动播放	boolean	true
delay	滚动动画初始延时，单位为秒	number	1
speed	滚动速度，单位为 px/s	number	50
closable	是否显示关闭按钮	boolean	false
wrapable	是否换行展示；仅在 scrollable=false 的横向模式下生效	boolean	false
color	文字和图标颜色	string	-
background-color	背景颜色	string	-
direction	滚动方向，可选值为 horizontal、vertical	NoticeBarScrollDirection	horizontal
custom-class	根节点自定义类名	string	''
custom-style	根节点自定义样式	string	''

Events

事件名称	说明	参数
close	点击关闭按钮时触发	-
next	切换到下一条文本时触发	index: number
click v1.2.16	点击内容区时触发	{ text: string, index: number }

Methods

方法名称	说明	参数
reset v1.3.13	重置播放动画	-

Slots

name	说明
prefix	自定义前置内容；传入 prefix 属性时该插槽不生效
suffix	自定义后置内容；会覆盖默认关闭图标
default	自定义通知文本内容；仅在 direction='horizontal' 时生效

外部样式类

类名	说明
custom-class	根节点样式

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-notice-bar-padding	$padding-main $padding-loose	公告栏内边距
--wot-notice-bar-font-size	$typography-body-size-main	公告栏文字字号
--wot-notice-bar-radius	$radius-zero	公告栏圆角
--wot-notice-bar-line-height	$typography-body-line--height-size-main	公告栏文字行高
--wot-notice-bar-warning-bg	$warning-surface	警告态背景色
--wot-notice-bar-warning-color	$warning-main	警告态文字颜色
--wot-notice-bar-info-bg	$primary-1	信息态背景色
--wot-notice-bar-info-color	$primary-6	信息态文字颜色
--wot-notice-bar-danger-bg	$danger-surface	危险态背景色
--wot-notice-bar-danger-color	$danger-main	危险态文字颜色
--wot-notice-bar-prefix-size	$n-20	前缀图标大小
--wot-notice-bar-prefix-margin-right	$spacing-tight	前缀图标右侧间距
--wot-notice-bar-suffix-size	$n-20	后缀图标大小
--wot-notice-bar-suffix-margin-left	$spacing-tight	后缀图标左侧间距
--wot-notice-bar-suffix-color	inherit	后缀图标颜色

源代码

文档

• 组件