NoticeBar 通知栏

介绍

通知栏，用于循环播放展示一组消息通知。

导入

import NoticeBar from '@/components/display/NoticeBar.vue'

使用方法

基础用法

基础的通知栏用法，默认会滚动播放内容。

<template>
  <NoticeBar content="不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。" />
</template>

禁用滚动

通过设置 scroll 属性为 false 禁用滚动。

<template>
  <NoticeBar content="不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。" :scroll="false" />
</template>

禁用滚动情况下换行显示

在禁用滚动的情况下，可以设置 wrap 属性为 true 使文字换行显示。

<template>
  <NoticeBar content="不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。" :scroll="false" wrap />
</template>

自定义样式

通过 backgroundColor 和 textColor 属性可以自定义通知栏的背景颜色和文字颜色，也可以通过 icon 属性自定义左侧图标。

<template>
  <NoticeBar content="米袋虽空——樱花开哉！" :scroll="false" icon="smile" backgroundColor="rgb(236, 249, 255)" textColor="rgb(25, 137, 250)" />
</template>

自定义右侧图标

通过右侧图标插槽可以自定义通知栏右侧的图标。

<template>
  <NoticeBar content="米袋虽空——樱花开哉！" :scroll="false">
    <template #rightIcon>
      <Icon icon="arrow-right-bold" color="warning" />
    </template>
  </NoticeBar>
</template>

可以关闭的通知栏

通过设置 closeable 属性为 true 显示关闭按钮，点击关闭按钮会触发 close 事件。

<template>
  <NoticeBar v-if="show" content="米袋虽空——樱花开哉！" closeable :scroll="false" @close="show = false" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const show = ref(true);
</script>

API 参考

NoticeBar

通知栏组件。

Props

名称	说明	类型	必填	默认值
icon	左边的图标, 可以传入图片	string | undefined	-	'notification'
iconStyle	图标或者图片的自定义样式	ViewStyle	-	-
iconProps	图标额外属性	IconProps	-	-
content	内容	string	-	-
textStyle	文字的自定义样式	TextStyle	-	-
backgroundColor	背景颜色	string	-	'background.warning'
textColor	文字颜色	string	-	'text.warning'
scroll	是否滚动播放	boolean	-	true
scrollDuration	滚动动画时长（毫秒）	number	-	100000
wrap	文字是否换行，仅在非滚动播放时生效	boolean	-	false
closeable	是否显示关闭按钮。用户点击后会触发 close 事件，请自行处理 NoticeBar 的显示与否	boolean	-	false

Slots

名称	说明
leftIcon	左侧图标插槽
rightIcon	右侧图标插槽

Events

名称	说明	参数
click	点击事件	$event
close	关闭事件	$event

主题变量

名称	类型	默认值	说明
NoticeBarBackgroundColor	string	'background.warning'	背景颜色
NoticeBarTextColor	string	'text.warning'	文字颜色
NoticeBarScrollDuration	number	100000	滚动动画时长（毫秒）
NoticeBarPaddingVertical	number	12	垂直内边距
NoticeBarPaddingHorizontal	number	20	水平内边距
NoticeBarIconMarginRight	number	10	图标右侧边距