<template>
<view class="tm-timeline">
<block v-if="model=='center'">
<block v-for="(item,index) in listData" :key="index">
<view v-if="(index+1)%2" class="tm-timeline-item " >
<view :style="{
width: bwi(item)+'px',
height: bwi(item)+'px'
}" :class="[item['icon']?'pa-4':'',item.color?item.color:color_tmeme,`shadow-${item.color?item.color:color_tmeme}-4`,black_tmeme?'bk':'']" class=" flex-center rounded tm-timeline-jidian border-white-a-2">
<tm-icons style="line-height: 0;" dense v-if="item.icon" color="white" :size="item.iconSize||24" :name="item.icon"></tm-icons>
</view>
<view class=" tm-timeline-item-content relative">
<view :class="[`text-${(item.color?item.color:color_tmeme)}`]" v-if="item.time" class="tm-timeline-item-right pr-36 text-weight-b text-size-n text-align-right">
{{item.time}}
</view>
<!-- <tm-divider :vertical="true" :width="4" :height="100"></tm-divider> -->
<view :class="[`border-${item.borderColor?item.borderColor:borderColor}-l-1`,black_tmeme?'bk':'']" class="tm-timeline-item-right pl-36 ">
<view v-if="item.title" class="mb-12 text-align-left">
<text class="text-weight-b text-size-n" :class="[`text-${(item.color?item.color:color_tmeme)}`]">{{item.title}}</text>
</view>
<view class="text-align-left pb-24">
<text class="text-size-s text-grey-darken-1">
{{item.content}}
</text>
</view>
</view>
</view>
</view>
<view v-if="(index+1)%2==0" class="tm-timeline-item ">
<view :style="{
width: bwi(item)+'px',
height: bwi(item)+'px'
}" :class="[item['icon']?'pa-4':'',item.color?item.color:color_tmeme,`shadow-${item.color?item.color:color_tmeme}-4`,black_tmeme?'bk':'']" class="flex-center rounded tm-timeline-jidian border-white-a-2">
<tm-icons style="line-height: 0;" dense v-if="item.icon" color="white" :size="item.iconSize||24" :name="item.icon"></tm-icons>
</view>
<view class=" tm-timeline-item-content relative">
<view :class="[index!==listData.length-1?(`border-${item.borderColor?item.borderColor:borderColor}-r-1`):'',black_tmeme?'bk':'']" class="tm-timeline-item-left pr-36 ">
<view v-if="item.title" class="mb-12 text-align-right">
<text class="text-weight-b text-size-n" :class="[`text-${(item.color?item.color:color_tmeme)}`]">{{item.title}}</text>
</view>
<view class="text-align-right pb-24">
<text class="text-size-s text-grey-darken-1">
{{item.content}}
</text>
</view>
</view>
<view v-if="item.time" :class="[`text-${(item.color?item.color:color_tmeme)}`]" class="tm-timeline-item-right pl-36 text-weight-b text-size-n ">
{{item.time}}
</view>
</view>
</view>
</block>
</block>
<block v-if="model=='left'">
<block v-for="(item,index) in listData" :key="index">
<view class="tm-timeline-item tm-timeline-item--leftDir">
<view style="width: 160upx;">
<view :style="{
width: bwi(item)+'px',
height: bwi(item)+'px'
}" :class="[item['icon']?'pa-4':'',item.color?item.color:color_tmeme,`shadow-${item.color?item.color:color_tmeme}-4`,black_tmeme?'bk':'']" class="flex-center rounded tm-timeline-jidian border-white-a-2">
<tm-icons style="line-height: 0;" dense v-if="item.icon" color="white" :size="item.iconSize||24" :name="item.icon"></tm-icons>
</view>
<view :style="{
marginTop:'-'+botop(item)+'px'
}" :class="[index!==listData.length-1?'tm-timeline-item-boder':'',`${item.borderColor?item.borderColor:borderColor}`,black_tmeme?'bk':'']"></view>
</view>
<view class=" tm-timeline-item-content relative">
<view class="tm-timeline-item-left ">
<slot name="content" :data="item">
<view v-if="item.time" :class="['text-'+(item.color?item.color:color_tmeme)]" class="mb-0 tm-timeline-item-right text-size-s ">
{{item.time}}
</view>
<view v-if="item.title" class="mb-12 text-align-left">
<text :class="['text-'+(item.color?item.color:color_tmeme)]" class="text-weight-b text-size-n ">{{item.title}}</text>
</view>
<view class="text-align-left pb-24 mb-32">
<text class="text-size-s text-grey-darken-1">
{{item.content}}
</text>
</view>
</slot>
</view>
</view>
</view>
</block>
</block>
<block v-if="model=='right'">
<block v-for="(item,index) in listData" :key="index">
<view class="tm-timeline-item tm-timeline-item--leftDir endright">
<view class=" tm-timeline-item-content relative">
<view class="tm-timeline-item-left ">
<view v-if="item.time" :class="[`text-${(item.color?item.color:color_tmeme)}`]" class="mb-0 tm-timeline-item-right text-size-s text-align-right">
{{item.time}}
</view>
<view v-if="item.title" class="mb-12 text-align-right">
<text :class="[`text-${(item.color?item.color:color_tmeme)}`]" class="text-weight-b text-size-n ">{{item.title}}</text>
</view>
<view class="text-align-right pb-24 mb-32">
<text class="text-size-s text-grey-darken-1">
{{item.content}}
</text>
</view>
</view>
</view>
<view style="width: 140upx;">
<view :style="{
width: bwi(item)+'px',
height: bwi(item)+'px'
}" :class="[item['icon']?'pa-4':'',item.color?item.color:color_tmeme,`shadow-${item.color?item.color:color_tmeme}-4`,black_tmeme?'bk':'']" class="flex-center rounded tm-timeline-jidian border-white-a-2">
<tm-icons style="line-height: 0;" dense v-if="item.icon" color="white" :size="item.iconSize||24" :name="item.icon"></tm-icons>
</view>
<view :style="{
marginTop:'-'+botop(item)+'px'
}" :class="[index!==listData.length-1?'tm-timeline-item-boder':'',`${item.borderColor?item.borderColor:borderColor}`,black_tmeme?'bk':'']"></view>
</view>
</view>
</block>
</block>
</view>
</template>
<script>
/**
* timeline 时间轴
* @property {Boolean} reverse = [] 默认：false ,是否反转数据。
* @property {String} border-color = [] 默认：grey-lighten-2 ,默认线的颜色。
* @property {String} color = [] 默认：primary ,认主题和节点颜色如果。
* @property {Number} size = [] 默认：32 ,默认的节点大小，单位upx
* @property {String} model = [left|center|right] 默认：center ,时间轴的方向。
* @property {Array} list = [] 默认：[] ,数据。{
title:'',
content:'我是内容我是内容我是内容',
time:"2020年7月",
color:"blue",
icon:'icon-position-fill',
iconSize:36,
borderColor:'blue'
},
*/
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
export default {
components:{tmIcons},
name: 'tm-timeline',
props:{
list:{
type:Array,
default:()=>{
return [];
}
},
// 是否反转内容
reverse:{
type:Boolean,
default:false
},
// 默认线的颜色，
borderColor:{
type:String,
default:'grey-lighten-2'
},
// 默认主题和节点颜色如果
color:{
type:String,
default:'primary'
},
size:{
type:Number,
default:36
},
black:{
type:Boolean|String,
default:null
},
model:{
type:String,
default:'center' // left|center|right
},
// 跟随主题色的改变而改变。
fllowTheme:{
type:Boolean|String,
default:true
}
},
data() {
return {
listData:[],
};
},
watch:{
list:{
deep:true,
handler(){
this.jsList = this.list;
}
}
},
computed:{
black_tmeme: function() {
if (this.black !== null) return this.black;
return this.$tm.vx.state().tmVuetify.black;
},
color_tmeme:function(){
if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
return this.$tm.vx.state().tmVuetify.color;
}
return this.color;
},
jsList:{
get:function(){
return this.listData;
},
set:function(val){
if(this.reverse){
this.listData = this.list.reverse();
}else{
this.listData = this.list;
}
}
}
},
mounted() {
this.jsList = this.list;
},
methods: {
botop(d){
return uni.upx2px(d.size+8||32)
},
bwi(item){
if(!item||!item['size']){
return uni.upx2px(this.size||24)
}else if(item['size']){
return uni.upx2px(item['size']||24)
}
return uni.upx2px(24)
}
}
};
</script>
<style lang="less" scoped>
.tm-timeline {
.tm-timeline-item {
.tm-timeline-item-left,
.tm-timeline-item-right {
width: 200upx;
flex-shrink: 0;
// transform: translateY(-34upx);
}
.tm-timeline-item-content{
display: flex;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
}
.tm-timeline-jidian {
margin: auto;
}
&.tm-timeline-item--leftDir{
display: flex;
flex-flow: row;
&.endright{
justify-content: flex-end;
}
.tm-timeline-item-left,
.tm-timeline-item-right {
width:auto;
max-width: 400upx;
}
.tm-timeline-item-boder{
height: 100%;
width: 1px;margin: auto;
}
.tm-timeline-jidian {
position: relative;
margin: auto;
z-index: 2;
}
.tm-timeline-item-content{
display: flex;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
}
}
}
</style>