在繁重的業務工作中，如何提升自己的技術能力，而不是變為特定業務領域的熟練工，方法之一就是在業務工作當中提煉、抽象出通用的技術內容，總結歸納，並進一步思考是否有更好的解決辦法。
在公司的專案開發中，涉及到了移動端H5頁面的時間軸展示效果。現有的輪子比如ElementUI、iView中，都沒有專門的時間軸元件，於是就萌生了自己封裝一個的想法。
說幹就幹，杜絕拖延症，正好今天週末，就封裝了一個時間軸的元件上傳到了npm，大家有需求可以安裝試一下。
npm install uni-time-line -S
複製程式碼效果如下圖：
實現思路
開發一個vue元件，首先要確定好三要素props、slot和event。因為第一版功能比較簡單，所以只使用了props。
要實現一個時間軸，可以讓使用者自定義的內容包括，icon圖示的樣式、標題的文字、內容體的文字，還有兩個條目之間的距離。
於是我們props的定義就出來了：
uni_data: {//要使用時間軸的內容列表，包含標題和內容
type: Array,
default() {
return [
{
title: "這是標題",
content: "這是內容"
},
{
title: "標題過長會顯示省略號",
content: "內容過長會隱藏"
},
{
title: "更多效果可以自定義",
content: "更多效果可以自定義"
}
];
}
},
space: {//條目之間的距離，預設100px
type: String,
default: "100px"
},
uni_icon: {//icon的地址，預設提供一個我覺得還算好看的
type: String,
default: "http://qiniu.iborge.cn/dian.png"
}
複製程式碼上面的定義中，稍微不太好理解的是，如何將條目之間的距離動態的設定到style屬性上呢？在這裡我們使用了computed，即：
computed: {
uni_space() {
return "height:" + this.space;
}
},
複製程式碼這樣，使用者傳入100px，設定到屬性上就是style="height:100px".
下一步就是如何實現時間軸的效果，在這裡我想到的一個簡單的思路是使用div的左邊框。
其實大家看到的每條時間軸的豎線，都是一個box的左邊框。將其相對定位一下，將包含icon和標題的p絕對定位在豎線頂端，就實現了時間軸的效果。程式碼如下：
.uni_listbox {
box-sizing: border-box;
margin: 20px;
height: 60px;
position: relative;
}
.uni_listbox p {
position: absolute;
top: 0;
left: 0;
margin-left: -9px;
margin-top: -18px;
vertical-align: middle;
height: 16px;
line-height: 16px;
}
複製程式碼這麼一來，基本上完成了時間軸的效果，但還有一點小小的問題。就是列表的最後一項，會有一條豎線，但是下面已經沒有了新的內容。這樣看上去就會很難看，應該如何處理呢？其實只需要簡單的一句表示式就可以：
:class="[uni_data.length==index+1?uni_listbox_last:uni_listbox_notlast,uni_listbox]"
複製程式碼上面這句話的意思是，如果判斷當前為資料的最後一項，那麼就使用uni_listbox_last的樣式，否則就用uni_listbox_notlast,而uni_listbox的樣式，則不管條件如何都會生效。
這樣，我們只要把uni_listbox_last的邊框去掉，高度降低，就實現了文章開頭中圖片中的效果。
至此，時間軸的元件基本上就開發完了。
還可以根據自己的需求，新增標題行內容溢位顯示省略號等各種效果。
下面貼上完整的原始碼：
<template>
<div id="uni_timeline">
<div
:style="uni_space"
v-for="(item,index) in uni_data"
:key="index"
:class="[uni_data.length==index+1?uni_listbox_last:uni_listbox_notlast,uni_listbox]"
>
<p>
<img :src="uni_icon" :class="uni_timeline_icon">
<span class="uni_timeline_title">{{item.title}}</span>
</p>
<div class="uni_timeline_content">{{item.content}}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
uni_timeline_icon: "uni_timeline_icon",
uni_listbox_last: "uni_listbox_last",
uni_listbox_notlast: "uni_listbox_notlast",
uni_listbox: "uni_listbox"
};
},
computed: {
uni_space() {
return "height:" + this.space;
}
},
props: {
uni_data: {
type: Array,
default() {
return [
{
title: "這是標題",
content: "這是內容"
},
{
title: "標題過長會顯示省略號",
content: "內容過長會隱藏"
},
{
title: "更多效果可以自定義",
content: "更多效果可以自定義"
}
];
}
},
space: {
type: String,
default: "100px"
},
uni_icon: {
type: String,
default: "http://qiniu.iborge.cn/dian.png"
}
}
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
.uni_listbox {
box-sizing: border-box;
margin: 20px;
height: 60px;
position: relative;
}
.uni_listbox_last {
height: 20px;
}
.uni_listbox_notlast {
height: 60px;
margin-left: 18px;
border-left: 3px solid rgb(228, 228, 228);
}
.uni_listbox p {
position: absolute;
top: 0;
left: 0;
/* transform: translateY(-50%); */
margin-left: -9px;
margin-top: -18px;
vertical-align: middle;
height: 16px;
line-height: 16px;
}
.uni_timeline_icon {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
}
.uni_timeline_title {
font-weight: bold;
text-align: left;
display: inline-block;
width: 300px;
margin: 0 30px;
color: rgb(100, 100, 100);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.uni_timeline_content {
text-align: left;
height: 70%;
padding: 10px 21px;
font-size: 14px;
color: rgb(100, 100, 100);
overflow: hidden;
}
</style>
複製程式碼