随着社交网络等平台的普及，时间轴逐渐成为了人们分享生活经历的一种流行形式。时间轴可以按照时间顺序展示一系列事件或活动，帮助人们回顾过去，了解历史，同时也可以用作展示个人成长、旅行日记、团队项目进展等内容。
在网页开发中，想要实现时间轴的展示，则可以使用Vue框架，来快速搭建并实现效果。下面我们就来了解如何使用Vue实现时间轴。
一、页面布局
时间轴通常分为两种形式：纵向时间轴和横向时间轴。横向时间轴一般展示某种时间段内一系列事件的内容，而纵向时间轴则按照时间顺序展示事件，类似一个时间线。
本文以纵向时间轴为例，首先根据设计稿，我们需要撰写页面布局代码；
<div class="timeline">
<div class="timeline-header">
<div class="timeline-header-line"></div>
</div>
<div class="timeline-container">
<div class="timeline-item">
<div class="timeline-item-time">2010年</div>
<div class="timeline-item-content">content 1</div>
</div>
<div class="timeline-item">
<div class="timeline-item-time">2012年</div>
<div class="timeline-item-content">content 2</div>
</div>
<div class="timeline-item">
<div class="timeline-item-time">2015年</div>
<div class="timeline-item-content">content 3</div>
</div>
<div class="timeline-item">
<div class="timeline-item-time">2017年</div>
<div class="timeline-item-content">content 4</div>
</div>
</div>
</div>在这里为了让样式更好的展示，我采用了flex布局。
二、定义数据及渲染
接下来，需要在 Vue 实例中定义数据并将数据渲染进页面中。
new Vue({
el: '#app',
data: {
list: [
{
time: '2010年',
content: 'content 1'
},
{
time: '2012年',
content: 'content 2'
},
{
time: '2015年',
content: 'content 3'
},
{
time: '2017年',
content: 'content 4'
}
]
}
})然后使用v-for指令在页面上循环遍历数据，并使用{{}}绑定数据到页面中。
<div class="timeline-item" v-for="item in list">
<div class="timeline-item-time">{{ item.time }}</div>
<div class="timeline-item-content">{{ item.content }}</div>
</div>三、实现动画效果
为了增加用户体验，我们可以为每个事件添加动画效果。将data中的list属性添加一个新属性isShow，用于标识是否显示当前事件内容。
data: {
list: [
{
time: '2010年',
content: 'content 1',
isShow: false
},
{
time: '2012年',
content: 'content 2',
isShow: false
},
{
time: '2015年',
content: 'content 3',
isShow: false
},
{
time: '2017年',
content: 'content 4',
isShow: false
}
]
}接下来，可以为每个事件添加点击事件，来控制当前事件内容展示和隐藏，这里我们需要用到Vue的事件处理器和class绑定。
<div class="timeline-item" v-for="(item, index) in list" :key="index">
<div class="timeline-item-time" @click="item.isShow = !item.isShow">
{{ item.time }}
</div>
<div class="timeline-item-content" :class="{show: item.isShow}">{{ item.content }}</div>
</div>我们可以在class属性中添加判断，如果当前item.isShow为真则添加show类，否则不添加，从而实现事件内容的展示和隐藏。
.timeline-item-content {
display:none;
height: 0;
transition:all .3s linear;
}
.show {
display:block;
height: auto;
}通过上面的代码可以实现一个最基本的时间轴组件。
最后简单贴上完整的代码。
<div id="app">
<div class="timeline">
<div class="timeline-header">
<div class="timeline-header-line"></div>
</div>
<div class="timeline-container">
<div class="timeline-item" v-for="(item, index) in list" :key="index">
<div class="timeline-item-time" @click="item.isShow = !item.isShow">
{{ item.time }}
</div>
<div class="timeline-item-content" :class="{show: item.isShow}">
{{ item.content }}
</div>
</div>
</div>
</div>
</div>
<style>
.timeline {
position: relative;
max-width: 1000px;
margin: 30px auto;
}
.timeline-header {
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background: #ccc;
transform: translate(-50%, calc(50% - 15px));
}
.timeline-header-line {
position: absolute;
top: 0;
left: 50%;
width: 50px;
height: 30px;
background: #ccc;
transform: translateX(-50%);
border-radius: 30px;
}
.timeline-container {
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.timeline-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
margin-bottom: 50px;
padding: 0 50px;
cursor: pointer;
}
.timeline-item:after {
content: '';
position: absolute;
top: 12px;
left: -15px;
width: 20px;
height: 20px;
background: #ccc;
border-radius: 50%;
}
.timeline-item:before {
content: '';
position: absolute;
top: 0;
left: -2px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #ccc;
}
.timeline-item:after,
.timeline-item:before {
z-index: 2;
}
.timeline-item-content {
display: none;
height: 0;
transition: all .3s linear;
position: relative;
z-index: 1;
width: 100%;
margin-left: 10px;
}
.timeline-item-time {
width: 150px;
font-size: 16px;
font-weight: bold;
color: #333;
text-align: right;
flex-shrink: 0;
margin-right: 20px;
}
.show {
display: block;
height: auto;
}
</style>
<script>
new Vue({
el: '#app',
data: {
list: [
{
time: '2010年',
content: 'content 1',
isShow: false
},
{
time: '2012年',
content: 'content 2',
isShow: false
},
{
time: '2015年',
content: 'content 3',
isShow: false
},
{
time: '2017年',
content: 'content 4',
isShow: false
}
]
}
})
</script>以上是如何使用 Vue 实现时间轴？的详细内容。更多信息请关注PHP中文网其他相关文章！
