推荐开源项目:TimeLine - 基于Vue.js的时间线组件
<template>
<div class="timeline">
<div class="timeline-item" v-for="(item, index) in items" :key="index">
<div class="timeline-content">
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
</div>
<div class="timeline-icon">
<i :class="item.icon"></i>
</div>
<div class="timeline-date">
{{ item.date }}
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Timeline',
props: {
items: {
type: Array,
required: true
}
}
}
</script>
<style scoped>
.timeline {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.timeline-item {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
}
.timeline-content {
margin-right: 30px;
padding: 10px;
border-radius: 5px;
background-color: #f2f2f2;
}
.timeline-icon {
margin-right: 10px;
}
.timeline-icon i {
font-size: 20px;
}
.timeline-date {
margin-left: auto;
padding-left: 20px;
color: #888;
font-size: 0.8em;
}
</style>
这个简单的Vue.js时间线组件可以被用来展示一系列事件的发展历程。它接受一个items
数组作为prop,其中每个item都包含title
、description
、icon
和date
。组件使用了flexbox布局来排列时间线上的各个元素。这个例子展示了如何在Vue.js中创建一个可复用的时间线组件,并且可以通过简单地传递不同的数据来自定义每个时间点的内容。
评论已关闭