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

介绍

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

实现代码

Vue3代码

html 复制代码
<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代码

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
  }
}

完整代码

js 复制代码
<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>
相关推荐
痴憨道人11 分钟前
openharmony sdk描述
javascript
loey_ln14 分钟前
FIber + webWorker
javascript·react.js
NightCyberpunk33 分钟前
HTML、CSS
前端·css·html
大霞上仙33 分钟前
element ui table 每行不同状态
vue.js·ui·elementui
xcLeigh44 分钟前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
zhenryx1 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
lv程序媛1 小时前
el-table表头前几列固定,后面几列根据接口返回的值不同展示不同
javascript·vue.js·elementui
ZwaterZ1 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
蒟蒻的贤1 小时前
vue学习11.21
javascript·vue.js·学习
初遇你时动了情2 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app