NoticeBar 通知栏

基础用法

template

<vz-notice-bar :text="text" type="primary"></vz-notice-bar>

<vz-notice-bar :text="text" type="success"></vz-notice-bar>

<vz-notice-bar :text="text" type="warning"></vz-notice-bar>

<vz-notice-bar :text="text" type="danger"></vz-notice-bar>

<vz-notice-bar :text="text" type="info"></vz-notice-bar>

script

import { ref } from "vue";

const text = ref("豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。");

垂直滚动

template

<vz-notice-bar :text="textList" type="info"></vz-notice-bar>

script

import { ref } from "vue";

const textList = ref([
  "豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。",
  "物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。",
  "雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。",
]);

设置圆角

<vz-notice-bar :text="text" type="info" radius="10rpx"></vz-notice-bar>

禁止滚动

<vz-notice-bar :text="text" :scrollable="false" type="info"></vz-notice-bar>

多行展示

<vz-notice-bar :text="text" type="info" icon="" wrapable></vz-notice-bar>

自定义颜色

<vz-notice-bar :text="text" type="info" icon="" wrapable></vz-notice-bar>

使用插槽

仅支持水平方向使用插槽展示文本内容，且当文本内容改变后，需要手动调用组件内的 reset() 方法重新设置滚动速度

<vz-notice-bar type="info">
  <template #prefix>
    <vz-icon name="vz-icon-home"></vz-icon>
  </template>
  <view>{{ text }}</view>
  <template #suffix>
    <vz-icon name="vz-icon-arrow-right"></vz-icon>
  </template>
</vz-notice-bar>

Props

属性名	说明	类型	默认值
text	文本内容。为数组时垂直滚动	string / string[]	-
type	颜色类型	primary / success / danger / warning / info	-
scrollable	是否开启滚动播放	boolean	true
wrapable	是否换行展示文本	boolean	false
duration	垂直滚动时滚动时间间隔 ms	number	3000
speed	水平滚动时滚动速度 rpx/s	number	120
icon	图标	string	vz-icon-volume
iconColor	图标颜色	string	-
iconSize	图标大小	string / number	-
paddingX	padding-x	string / number	24rpx
height	高度	string / number	--vz-height-base
color	文本和图标颜色	string	inherit
bg	背景	string	-
radius	圆角大小	string / number	-
gap	图标与文本之间的间距	string / number	--vz-gap-large
i-class	根节点样式类	string	-
i-style	根节点样式	Vue.CSSProperties	-

Events

事件名	说明	参数
click	点击事件	{ text, index }

Slots

插槽名	说明
default	默认插槽
prefix	前置插槽
suffix	后置插槽

CSS

变量名	说明	默认值
--vz-notice-padding-x	props.paddingX	24rpx
--vz-notice-padding-y	换行展示文本时生效	20rpx
--vz-notice-height	props.height	20rpx
--vz-notice-color	props.color	inherit
--vz-notice-bg	props.bg	-
--vz-notice-radius	props.radius	-
--vz-notice-gap	props.gap	--vz-gap-large

SCSS

$notice-bar: (
  "padding-x": 24rpx,
  "padding-y": 20rpx,
  "height": getCssVar("height", "base"),
  "gap": getCssVar("gap", "large"),
);