vue实现公告查看

Vue实现公告查看功能

在Vue中实现公告查看功能，可以通过组件化方式构建公告列表和详情页。以下是具体实现方法：

数据准备 公告数据通常存储在数组中，每个公告对象包含标题、内容、发布时间等字段：

data() {
  return {
    announcements: [
      { id: 1, title: '系统维护通知', content: '将于今晚进行系统升级...', date: '2023-05-10' },
      { id: 2, title: '新功能上线', content: '新增用户反馈功能...', date: '2023-05-08' }
    ],
    currentAnnouncement: null
  }
}

公告列表组件 使用v-for渲染公告列表，点击条目触发查看详情：

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

详情查看方法 点击公告时设置当前选中公告：

methods: {
  viewDetail(item) {
    this.currentAnnouncement = item
  }
}

详情弹窗组件 使用条件渲染显示公告详情：

<template>
  <div v-if="currentAnnouncement" class="announcement-detail">
    <h2>{{ currentAnnouncement.title }}</h2>
    <p class="date">{{ currentAnnouncement.date }}</p>
    <div class="content">{{ currentAnnouncement.content }}</div>
    <button @click="currentAnnouncement = null">关闭</button>
  </div>
</template>

样式优化 添加基础样式提升用户体验：

.announcement-item {
  padding: 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.announcement-detail {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

后端数据对接 实际项目中可通过axios获取公告数据：

created() {
  axios.get('/api/announcements')
    .then(response => {
      this.announcements = response.data
    })
}

路由方案 对于复杂场景可使用vue-router实现页面级公告详情：

{
  path: '/announcement/:id',
  component: AnnouncementDetail,
  props: true
}

以上实现可根据实际需求调整，如添加分页加载、未读标记等功能。关键点在于维护当前选中状态，通过组件通信或状态管理实现数据流转。