vue实现公告查看

Vue 实现公告查看功能

公告查看功能通常包括公告列表展示、公告详情查看、公告滚动播放等。以下是实现公告查看功能的几种常见方法。

使用 v-for 渲染公告列表

通过 Vue 的 v-for 指令可以轻松渲染公告列表。假设有一个公告数据数组 announcements，可以在模板中循环渲染。

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

<script>
export default {
  data() {
    return {
      announcements: [
        { title: '公告1', content: '这是第一条公告的内容', date: '2023-10-01' },
        { title: '公告2', content: '这是第二条公告的内容', date: '2023-10-02' }
      ]
    }
  }
}
</script>

<style>
.announcement-list {
  margin: 20px;
}
.announcement-item {
  border-bottom: 1px solid #eee;
  padding: 10px;
}
</style>

公告详情查看

点击公告列表中的某一项可以跳转到公告详情页。可以使用 Vue Router 实现页面跳转。

<template>
  <div class="announcement-list">
    <div 
      v-for="(item, index) in announcements" 
      :key="index" 
      class="announcement-item"
      @click="viewDetail(item.id)"
    >
      <h3>{{ item.title }}</h3>
      <p>{{ item.content }}</p>
      <span>{{ item.date }}</span>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    viewDetail(id) {
      this.$router.push(`/announcement/${id}`);
    }
  }
}
</script>

在路由配置中定义详情页的路由：

const routes = [
  {
    path: '/announcement/:id',
    name: 'AnnouncementDetail',
    component: AnnouncementDetail
  }
];

公告滚动播放

如果需要实现公告滚动播放效果，可以使用 CSS 动画或 JavaScript 定时器。

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

<script>
export default {
  data() {
    return {
      offset: 0,
      announcements: [
        { title: '公告1', content: '这是第一条公告的内容' },
        { title: '公告2', content: '这是第二条公告的内容' }
      ]
    }
  },
  mounted() {
    setInterval(() => {
      this.offset -= 1;
      if (this.offset < -1000) {
        this.offset = 0;
      }
    }, 30);
  }
}
</script>

<style>
.announcement-marquee {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  background: #f5f5f5;
}
.marquee-content {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
}
</style>

使用第三方组件库

如果需要更复杂的功能，可以借助第三方组件库如 Element UI 或 Vuetify。

<template>
  <el-carousel :interval="3000" type="card" height="200px">
    <el-carousel-item v-for="(item, index) in announcements" :key="index">
      <h3>{{ item.title }}</h3>
      <p>{{ item.content }}</p>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      announcements: [
        { title: '公告1', content: '这是第一条公告的内容' },
        { title: '公告2', content: '这是第二条公告的内容' }
      ]
    }
  }
}
</script>

以上方法可以根据实际需求选择或组合使用。