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顯示時間線*/
width: calc(100% - 30px); /*因為左邊部分用於顯示時間線，所以右邊部分減去30px*/
height: auto; /*高度由內容決定*/
position: relative;
margin-bottom: 10px;
cursor: pointer;
}
"::before"偽元素作出時間線的節點
.item::before {
content: "";
width: 11px;
height: 11px;
border-radius: 100%;
background-color: #91c2fc;
position: absolute;
left: -15px;
}
效果圖:
"::after"偽元素作出時間線線段
.item::after {
content: "";
width: 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 {
width: 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 + "\n" + "content:" + content);
},
items: ...略...
}
}
8）完善代碼，添加一個item讓時間線后面閉合
略略~略~略略略
成品
其它時間線組件
ElementUI
效果圖:
傳送門
CSDN找到的
效果圖:
傳送門
jq22.com
效果圖:
傳送門
techbrood.com
效果圖:
傳送門