Sard

Appearance

100%
在新窗口打开⤴

NoticeBar公告栏

介绍 ​

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

代码演示 ​

基础使用 ​

公告栏的内容长度溢出时会自动开启滚动播放。

vue
<template>
  <s-notice-bar>这是一条公告！</s-notice-bar>

  <s-notice-bar>这是一条很长很长很长很长很长很长很长很长很长很长的公告！</s-notice-bar>
</template>

动态数据 ​

NoticeBar 组件是通过 animation 来实现高效的滚动动画的， 会根据内容宽度动态设置动画时长，以实现固定速率滚动。

vue
<template>
  <s-notice-bar>
    {{ text }}
  </s-notice-bar>

  <s-slider v-model="value" :min="0" :max="26" show-value class="mt-8 mx-4" />
</template>

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

const value = ref(0)

const text = computed(() => {
  return `这是一条很长...${Array(value.value)
    .fill(0)
    .map((_, i) => {
      return String.fromCharCode(i + 65)
    })
    .join(' ')}...的公告！`
})
</script>
vue
<template>
  <s-notice-bar>
    {{ text }}
  </s-notice-bar>

  <s-slider v-model="value" :min="0" :max="26" show-value class="mt-8 mx-4" />
</template>

<script setup lang="js">
import { computed, ref } from 'vue'
const value = ref(0)
const text = computed(() => {
  return `这是一条很长...${Array(value.value)
    .fill(0)
    .map((_, i) => {
      return String.fromCharCode(i + 65)
    })
    .join(' ')}...的公告！`
})
</script>

强制滚动 ​

设置 scrollable="always" 属性时，无论公告栏内容多少都会滚动。

vue
<template>
  <s-notice-bar scrollable="always">这是一条公告！</s-notice-bar>

  <s-notice-bar scrollable="always">
    这是一条很长很长很长很长很长很长很长很长很长很长的公告！
  </s-notice-bar>
</template>

强制不滚动 ​

设置 scrollable="never" 属性时，无论公告栏内容多少都不会滚动。

vue
<template>
  <s-notice-bar scrollable="never">这是一条公告！</s-notice-bar>

  <s-notice-bar scrollable="never">
    这是一条很长很长很长很长很长很长很长很长很长很长的公告！
  </s-notice-bar>
</template>

多行展示 ​

默认文本不换行，设置 wrap 可以使其换行。

vue
<template>
  <s-notice-bar wrap>这是一条很长很长很长很长很长很长很长很长很长很长的公告！</s-notice-bar>
</template>

自定义左边图标 ​

设置 leftIcon 插槽可以自定义左边的图标；或者设置 hideLeftIcon 属性隐藏左侧图标。

vue
<template>
  <s-notice-bar>
    <template #left-icon>
      <demo-icon name="bell" size="16px" />
    </template>
    这是一条很长很长很长很长很长很长很长很长很长很长的公告！
  </s-notice-bar>

  <s-notice-bar hideLeftIcon>这是一条很长很长很长很长很长很长很长很长很长很长的公告！</s-notice-bar>

  <s-notice-bar>
    <template #left-icon>
      <span style="font-size: 16px">消息:</span>
    </template>
    这是一条很长很长很长很长很长很长很长很长很长很长的公告！
  </s-notice-bar>
</template>

可关闭的 ​

设置 closable 属性可以在右边显示关闭按钮。

vue
<template>
  <s-notice-bar closable @close="onClick">
    这是一条很长很长很长很长很长很长很长很长很长很长的公告！
  </s-notice-bar>
</template>

<script setup lang="ts">
import { toast } from 'sard'
const onClick = () => {
  toast('close')
}
</script>
vue
<template>
  <s-notice-bar closable @close="onClick">
    这是一条很长很长很长很长很长很长很长很长很长很长的公告！
  </s-notice-bar>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onClick = () => {
  toast('close')
}
</script>

可链接的 ​

设置 linkable 属性可以在右边显示箭头。

vue
<template>
  <s-notice-bar linkable @click="onClick">
    这是一条很长很长很长很长很长很长很长很长很长很长的公告！
  </s-notice-bar>
</template>

<script setup lang="ts">
import { toast } from 'sard'

const onClick = () => {
  toast('navigate to')
}
</script>
vue
<template>
  <s-notice-bar linkable @click="onClick">
    这是一条很长很长很长很长很长很长很长很长很长很长的公告！
  </s-notice-bar>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onClick = () => {
  toast('navigate to')
}
</script>

自定义右边图标 ​

设置 rightIcon 插槽可以修改右边的关闭按钮图标或者箭头图标。

vue
<template>
  <s-notice-bar closable>
    这是一条很长很长很长很长很长很长很长很长很长很长的公告！
    <template #right-icon>
      <demo-icon name="x-circle-fill" />
    </template>
  </s-notice-bar>
</template>

自定义样式 ​

通过 color 属性设置文本颜色，通过 background 属性设置背景色。

vue
<template>
  <s-notice-bar color="var(--s-color-primary)" background="rgba(var(--s-color-primary-rgb), 0.1)">
    这是一条很长很长很长很长很长很长很长很长很长很长的公告！
  </s-notice-bar>
</template>

垂直滚动 ​

搭配 NoticeBar 和 Swipe 组件，可以实现垂直滚动的效果。

vue
<template>
  <s-notice-bar vertical>
    <s-swiper vertical :interval="1500" loop style="height: 40px">
      <s-swiper-item>
        <div class="swipe-item">1. 这是一条公告！</div>
      </s-swiper-item>
      <s-swiper-item>
        <div class="swipe-item">2. 这是一条公告！</div>
      </s-swiper-item>
      <s-swiper-item>
        <div class="swipe-item">3. 这是一条公告！</div>
      </s-swiper-item>
    </s-swiper>
  </s-notice-bar>
</template>

<style lang="scss">
.swipe-item {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
</style>

API ​

NoticeBarProps ​

属性描述类型默认值
color自定义颜色string-
background自定义背景色string-
hide-left-icon隐藏左边图标booleanfalse
speed滚动速率 (px/s)number50
scrollable是否开启滚动播放，内容长度溢出时默认开启'auto' | 'never' | 'always''auto'
wrap是否开启文本换行booleanfalse
closable是否显示关闭按钮booleanfalse
linkable是否展示右侧箭头booleanfalse
visible是否显示公告栏booleantrue
vertical搭配 Swipe 组件实现垂直滚动booleanfalse

NoticeBarSlots ​

插槽描述属性
default自定义默认内容-
left-icon自定义左侧图标内容-
right-icon自定义右侧图标内容-

NoticeBarEmits ​

事件描述类型
click点击公告栏时触发(event: MouseEvent) => void
close点击关闭按钮时触发() => void

NoticeBarExpose ​

属性描述类型
update重置滚动时长() => void

主题定制 ​

样式变量 ​

CSS 变量值
--s-notice-bar-min-heightvar(--s-content-height-sm)
--s-notice-bar-padding-xvar(--s-content-padding-x)
--s-notice-bar-padding-yvar(--s-content-padding-y)
--s-notice-bar-font-sizevar(--s-font-size)
--s-notice-bar-color#f97316
--s-notice-bar-bgrgba(var(--s-color-warning-rgb), var(--s-opacity-theme-bg))
--s-notice-bar-wrap-line-heightvar(--s-line-height-snug)
--s-notice-bar-left-icon-sizevar(--s-size-lg)
--s-notice-bar-left-icon-margin-endvar(--s-size-xs)
--s-notice-bar-right-icon-paddingvar(--s-size-xs)
--s-notice-bar-right-icon-sizevar(--s-size)
--s-notice-bar-right-icon-margin-start0
--s-notice-bar-right-icon-margin-endcalc(var(--s-size-xs) * -1)

Released under the MIT License.

Copyright © 2023-present wuzhitao