当前位置：首页 > VUE

vue公告通知页面实现

2026-02-24 02:30:55VUE

实现公告通知页面的基本思路

公告通知页面通常需要展示公告列表、公告详情，可能包含分页、未读标记等功能。Vue.js结合后端API可以实现动态数据交互。

页面结构设计

使用Vue单文件组件结构，通常包含以下部分：

公告列表区域
分页控件
公告详情弹窗
状态标记（如未读红点）

<template>
  <div class="notice-container">
    <h3>公告列表</h3>
    <ul class="notice-list">
      <li v-for="item in notices" :key="item.id" @click="showDetail(item)">
        <span :class="{ 'unread': !item.isRead }">{{ item.title }}</span>
        <span class="date">{{ formatDate(item.createTime) }}</span>
      </li>
    </ul>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="handlePageChange">
    </el-pagination>
    <el-dialog :title="currentNotice.title" :visible.sync="dialogVisible">
      <div v-html="currentNotice.content"></div>
    </el-dialog>
  </div>
</template>

数据获取与处理

通过axios调用后端API获取公告数据，处理分页和状态更新：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      notices: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      currentNotice: {},
      dialogVisible: false
    }
  },
  created() {
    this.fetchNotices();
  },
  methods: {
    async fetchNotices() {
      const res = await axios.get('/api/notices', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      });
      this.notices = res.data.list;
      this.total = res.data.total;
    },
    showDetail(item) {
      this.currentNotice = item;
      this.dialogVisible = true;
      if (!item.isRead) {
        this.markAsRead(item.id);
      }
    },
    async markAsRead(id) {
      await axios.patch(`/api/notices/${id}/read`);
      const index = this.notices.findIndex(item => item.id === id);
      this.$set(this.notices[index], 'isRead', true);
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchNotices();
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString();
    }
  }
}
</script>

样式设计

使用CSS或SCSS美化公告列表：

<style lang="scss" scoped>
.notice-container {
  padding: 20px;

  .notice-list {
    list-style: none;
    padding: 0;

    li {
      padding: 12px 16px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
      display: flex;
      justify-content: space-between;

      &:hover {
        background-color: #f5f5f5;
      }

      .unread {
        color: #f56c6c;
        font-weight: bold;
      }

      .date {
        color: #999;
        font-size: 12px;
      }
    }
  }
}
</style>