Vue时间线组件
效果
背景
项目需要用到时间线组件，用于选择同一笔记不同时期的内容。一开始打算用elementui的组件，但不适合，于是网上搜了个遍，却没找到合适的，因此自己动手写了个，并记录下来当做vuejs的学习笔记。
步骤
一、创建项目环境
略。。百度
二、创建组件
略，没啥说的，就是新建了个.vue文件
三、写代码
1）写出大概的框架
每个时间段都是如上图所示的结构，左边部分是时间线，右边是内容。
组件模板如下:
<template>
<div id="time-line">
<div class="item">
<div class="item-index">2020-2-2 2:22:22</div>
<div class="item-content">HELLO WORLD</div>
</div>
</div>
</template>
2）css写出时间线
每一项的样式
.item {
margin-left: 30px; /*用左边margin显示时间线*/
calc(100% - 30px); /*因为左边部分用于显示时间线，所以右边部分减去30px*/
height: auto; /*高度由内容决定*/
position: relative;
margin-bottom: 10px;
cursor: pointer;
}
"::before"伪元素作出时间线的节点
.item::before {
content: "";
11px;
height: 11px;
border-radius: 100%;
background-color: #91c2fc;
position: absolute;
left: -15px;
}
效果图:
"::after"伪元素作出时间线线段
.item::after {
content: "";
3px;
height: calc(100% + 10px); /*加上10px是item底部的margin*/
background-color: #91c2fc;
position: absolute;
top: 0;
left: -11px;
}
效果图:
3) 完善内容部分的样式
设置index的样式
.item-index {
line-height: 12px;
font-size: 12px;
position: relative;
color: #656565;
}
效果图:
设置content部分换行效果
.item-content {
100%;
height: auto; /*由内容决定*/
position: relative;
white-space: pre-wrap; /*保留空白符序列，但是正常地进行换行*/
word-wrap: break-word; /*在长单词或 URL 地址内部进行换行*/
}
4）添加鼠标悬浮效果
.item:hover::before {
transform: scale3d(1.2, 1.2, 1);
background-color: #569ffb;
}
.item:hover::after {
transform: scale3d(1.1, 1, 1);
background-color: #569ffb;
}
.item:hover .item-index{
transform: scale3d(1.01, 1.01, 1);
color: #343434;
}
5）用“v-for”进行渲染
template:
<template>
<div id="time-line">
<div class="item" v-for="item in items" :key="item.index">
<div class="item-index">{{ item.index }}</div>
<div class="item-content">{{ item.content }}</div>
</div>
</div>
</template>
javascript:
<script>
export default {
name: "TimeLine",
data() {
return {
items: [
{
index: "2020-8-14 13:20:30",
content: "开始毕设。。"
},
{ index: "2020-8-15 13:20:30", content: "写前端。。" },
{
index: "2020-8-16 13:20:30",
content: "还在写前端。。"
},
{
index: "2020-8-17 13:20:30",
content: "仍在写前端。。"
},
{ index: "2020-8-18 13:20:30", content: "不想写前端。。" },
{ index: "2020-8-19 13:20:30", content: "还得写前端。。。。。" }
]
}
}
}
</script>
效果图:
6) 改成父组件传数据
javascript:
<script>
export default {
name: "TimeLine",
props: {
items: Array
},
}
</script>
父组件.vue:
<template>
<time-line :items="items"></time-line>
</template>
<script>
import TimeLine from "./components/TimeLine";
export default {
name: 'App',
components: {
TimeLine
},
data() {
return {
items: [
{
index: "2020-8-14 13:20:30",
content: "开始毕设。。"
},
{ index: "2020-8-15 13:20:30", content: "写前端。。" },
{
index: "2020-8-16 13:20:30",
content: "还在写前端。。"
},
{
index: "2020-8-17 13:20:30",
content: "仍在写前端。。"
},
{ index: "2020-8-18 13:20:30", content: "不想写前端。。" },
{ index: "2020-8-19 13:20:30", content: "还得写前端。。。。。" }
]
}
}
}
</script>
<style scoped></style>
7) 添加鼠标点击事件
给"item"添加鼠标点击事件
<div
class="item"
v-for="item in items"
:key="item.index"
@click="onClick(item.index, item.content)"
>
javascript:
<script>
export default {
name: "TimeLine",
props: {
items: Array,
callBack: Function /*父组件传入*/
},
methods: {
onClick(index, content) {
if (this.callBack) {
this.callBack(index, content);
}
}
},
}
</script>
父组件template:
<template>
<time-line
:items="items"
:call-back="timeLineCallBack"
>
</time-line>
</template>
父组件script的data加上回调函数:
data() {
return {
timeLineCallBack: function(index, content){
console.info("index:" + index + "
" + "content:" + content);
},
items: ...略...
}
}
8）完善代码，添加一个item让时间线后面闭合
略略~略~略略略
成品
其它时间线组件
ElementUI
效果图:
传送门
CSDN找到的
效果图:
传送门
jq22.com
效果图:
传送门
techbrood.com
效果图:
传送门