介绍
使用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>