wardrobe/tm-vuetify/components/tm-timeline/tm-timeline.vue

<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>