写一个elementplus的首页公告列表代码
时间: 2023-04-04 17:05:03 浏览: 117
elementPlus.docx
好的,以下是elementplus的首页公告列表代码:
<template>
<div>
<el-card>
<div slot="header" class="clearfix">
<span>最新公告</span>
<el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
</div>
<el-divider></el-divider>
<el-timeline>
<el-timeline-item
v-for="(item, index) in timelineData"
:key="index"
:timestamp="item.timestamp"
placement="top"
>
<el-card>
<div class="timeline-item-header">
<span class="timeline-item-title">{{ item.title }}</span>
<span class="timeline-item-time">{{ item.time }}</span>
</div>
<div class="timeline-item-content">{{ item.content }}</div>
</el-card>
</el-timeline-item>
</el-timeline>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
timelineData: [
{
title: "欢迎使用elementplus",
time: "2022-01-01",
content: "elementplus是一款基于element-ui的组件库,提供了更多的组件和功能,欢迎使用。",
timestamp: new Date("2022-01-01").getTime(),
},
{
title: "elementplus更新啦",
time: "2022-01-05",
content: "elementplus新增了一些组件和功能,欢迎大家使用。",
timestamp: new Date("2022-01-05").getTime(),
},
{
title: "elementplus 1.0 正式发布",
time: "2022-01-10",
content: "elementplus 1.0 正式发布啦,感谢大家的支持。",
timestamp: new Date("2022-01-10").getTime(),
},
],
};
},
};
</script>
阅读全文