当前位置：首页 > VUE

vue实现文字公告

2026-02-20 09:47:03VUE

Vue 实现文字公告的方法

在 Vue 中实现文字公告可以通过多种方式，以下介绍几种常见的方法：

使用 v-for 和数组渲染公告列表

<template>
  <div class="announcement">
    <div v-for="(item, index) in announcements" :key="index" class="announcement-item">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      announcements: [
        '公告1：系统维护通知',
        '公告2：新功能上线',
        '公告3：重要更新提示'
      ]
    }
  }
}
</script>

<style>
.announcement {
  width: 300px;
  border: 1px solid #eee;
  padding: 10px;
}
.announcement-item {
  padding: 5px 0;
  border-bottom: 1px dashed #ccc;
}
</style>

实现滚动公告效果

可以通过 CSS 动画或 JavaScript 定时器实现文字滚动效果：

<template>
  <div class="scroll-announcement">
    <div class="scroll-content" :style="{ transform: `translateY(${offset}px)` }">
      <div v-for="(item, index) in announcements" :key="index" class="announcement-item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      announcements: [
        '滚动公告1：系统维护通知',
        '滚动公告2：新功能上线',
        '滚动公告3：重要更新提示'
      ],
      offset: 0,
      timer: null
    }
  },
  mounted() {
    this.startScroll()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    startScroll() {
      this.timer = setInterval(() => {
        this.offset -= 1
        if (this.offset <= -30) {
          this.offset = 0
          // 将第一条移到末尾实现循环
          this.announcements.push(this.announcements.shift())
        }
      }, 50)
    }
  }
}
</script>

<style>
.scroll-announcement {
  height: 30px;
  overflow: hidden;
  position: relative;
}
.scroll-content {
  position: absolute;
  transition: transform 0.3s ease;
}
.announcement-item {
  height: 30px;
  line-height: 30px;
}
</style>

使用第三方库实现更复杂效果

对于更复杂的公告效果，可以考虑使用第三方库如：

vue-marquee-text-component：专门用于实现跑马灯效果
vue-awesome-notifications：提供丰富的通知组件

安装和使用示例：

npm install vue-marquee-text-component

<template>
  <marquee-text :duration="10" :repeat="5">
    这是一条重要的跑马灯公告信息
  </marquee-text>
</template>

<script>
import MarqueeText from 'vue-marquee-text-component'

export default {
  components: {
    MarqueeText
  }
}
</script>