当前位置：首页 > VUE

vue实现公告栏

2026-02-23 14:43:31VUE

vue实现公告栏的方法

公告栏通常用于展示动态信息，以下是几种常见的实现方式：

使用v-for循环渲染公告列表

通过数组存储公告内容，利用v-for动态渲染：

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

<script>
export default {
  data() {
    return {
      announcements: [
        { content: '系统维护通知' },
        { content: '新版本上线公告' },
        { content: '节假日安排通知' }
      ]
    }
  }
}
</script>

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

实现滚动公告栏

添加CSS动画实现滚动效果：

<template>
  <div class="scroll-announcement">
    <div class="scroll-content" :style="{ animationDuration: duration + 's' }">
      <span v-for="(item, index) in announcements" :key="index">
        {{ item.content }} &nbsp;&nbsp;&nbsp;
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      announcements: [
        { content: '重要通知：系统将于今晚升级' },
        { content: '欢迎使用新版本系统' },
        { content: '客服热线：400-123-4567' }
      ],
      duration: 10
    }
  }
}
</script>

<style>
.scroll-announcement {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.scroll-content {
  display: inline-block;
  animation: scroll linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

使用第三方组件

Element UI的走马灯组件适合实现公告栏：

<template>
  <el-carousel 
    direction="vertical" 
    :autoplay="true" 
    height="40px" 
    indicator-position="none">
    <el-carousel-item v-for="item in announcements" :key="item.id">
      <div class="announcement-text">{{ item.content }}</div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      announcements: [
        { id: 1, content: '系统升级通知' },
        { id: 2, content: '新功能上线公告' },
        { id: 3, content: '维护时间调整' }
      ]
    }
  }
}
</script>

<style>
.announcement-text {
  line-height: 40px;
  text-align: center;
}
</style>

带关闭功能的公告栏

实现可关闭的公告栏组件：

<template>
  <div v-if="showAnnouncement" class="notice-bar">
    <span>{{ currentAnnouncement }}</span>
    <button @click="closeAnnouncement">×</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      announcements: ['紧急通知：服务器维护', '新用户注册优惠'],
      currentIndex: 0,
      showAnnouncement: true
    }
  },
  computed: {
    currentAnnouncement() {
      return this.announcements[this.currentIndex]
    }
  },
  methods: {
    closeAnnouncement() {
      this.showAnnouncement = false
    }
  }
}
</script>

<style>
.notice-bar {
  position: relative;
  padding: 10px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
}
.notice-bar button {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
}
</style>

定时切换公告内容

使用定时器实现公告内容轮播：

<template>
  <div class="announcement-container">
    <transition name="fade">
      <div class="announcement" :key="currentIndex">
        {{ announcements[currentIndex] }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      announcements: [
        '春节放假通知',
        '系统升级公告',
        '用户反馈奖励计划'
      ],
      currentIndex: 0,
      interval: null
    }
  },
  mounted() {
    this.interval = setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.announcements.length
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.interval)
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.announcement-container {
  height: 30px;
  overflow: hidden;
}
</style>

这些方法可以根据实际需求选择使用，或组合使用以实现更复杂的公告栏功能。

vue实现公告栏