当前位置：首页 > article >正文

ElementPlus---Timeline 时间线组件使用示例

article 2025/1/15 17:18:34

介绍

使用ElementPlus时间线组件在后台首页实现通知公告列表展示，使用Vue3开发。

实现代码

Vue3代码

<el-timeline>
    <el-timeline-item
      style="max-width: 600px"
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.releaseTime"
      placement="top"
    >
      <el-card>
        <h4>{{ activity.name }}</h4>
        <p>{{ activity.content }}</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item>
      <RouterLink to="/homeNotice">更多</RouterLink>
    </el-timeline-item>
  </el-timeline>

JS代码

///列表
const activities = ref<SysNotice[]>([])
onMounted(() => {
  getNoticeList()
})

const getNoticeList = async () => {
  const { code, data } = await crudApi.listUrl<SysNotice>(
    SysIndexUrl.GetNotice.replace('{num}', '3')
  )
  if (code === 200) {
    activities.value = data
  }
}

完整代码

<template>
  <el-timeline>
    <el-timeline-item
      style="max-width: 600px"
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.releaseTime"
      placement="top"
    >
      <el-card>
        <h4>{{ activity.name }}</h4>
        <p>{{ activity.content }}</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item>
      <RouterLink to="/homeNotice">更多</RouterLink>
    </el-timeline-item>
  </el-timeline>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { RouterLink } from 'vue-router'
import type { SysNotice } from '@/api/types'
import crudApi from '@/api/system/crudApi'
import { SysIndexUrl } from '@/api/urls'

///列表
const activities = ref<SysNotice[]>([])
onMounted(() => {
  getNoticeList()
})

const getNoticeList = async () => {
  const { code, data } = await crudApi.listUrl<SysNotice>(
    SysIndexUrl.GetNotice.replace('{num}', '3')
  )
  if (code === 200) {
    activities.value = data
  }
}
</script>

<style scoped>
.name {
  cursor: pointer;
}
</style>