Ci2Order.vue/App/components/z-tabs/z-tabs.vue

<template>
	<view>
	
			
		
		<view class="tab flex-n plr-50" :style="{background:bgcolor,width:'calc('+ width +' - 99rpx)'}" :class="shadow?'shadow-2':''">
			<view class="flex-1 item flex-n fjc" v-for="(item,index) in tabs" :key="index" :style="{color:idx==index?textselectedcolor:textcolor,'font-size':idx==index?textselectedSize:textSize}"
			 @click="click(index)">
				<view class="text flex-n">
					<view class="color_point"  v-if="colorList.length>0"  :style="{background:colorList[index]}"></view>
				{{item}}
					<view class="dot" v-if="showdot"></view>
				</view>

			</view>
			<view class="slide" :style="{'margin':'0 calc(((100% - 100rpx) / '+tabs.length+' - 140rpx) / 2)',transform: 'translateX(calc(((100% - 100rpx)  / '+tabs.length+') * '+ idx+'))', 'transition-duration': '0.3s'}">
				<view class="underline" :style="{background:linecolor}"></view>
			</view>

		</view>
		
		<view style="height: 98rpx"></view>
	</view>
</template>

<script>
	export default {
		name: "z-tabs",
		props: {
			tabs: Array,
			width:{
				type: Number|String,
				default: '100%',
				},
			value: {
				type: Number,
				default: 0
			},
			colorList:{
				type:Array,
				default:()=>[]
			},
			shadow: Boolean,
			bgcolor: {
				type: String,
				default: '#354054'
			},
			showdot: Boolean,
			textcolor: {
				type: String,
				default: '#737985'
			},
			textSize: {
				type: String,
				default: '28rpx'
			},
			textselectedSize: {
				type: String,
				default: '32rpx'
			},
			textselectedcolor: {
				type: String,
				default: 'white'
			},
			linecolor: {
				type: String,
				default: '#0075FF'
			},
		},
		model: {
			prop: 'value'
		},
		data() {
			return {
				idx: 0,
			}
		},
		watch:{
			value(newval,oldval){
				this.idx =newval;
			}
		},
		mounted() {
			this.idx = this.value;
			console.log(this.value)
		},
		methods: {
			click(idx) {
				console.log(idx)
				if (this.idx != idx) {
					this.idx = idx;			
				}
				this.$emit('change', idx)
				this.$emit('input', idx)
			}
		}
	}
</script>

<style scoped lang="scss">
	.tab {
		height: 98rpx;
		line-height: 98rpx;
		position: fixed;
		// width: calc(100% - 100rpx);
		z-index: 333;
		
		.item {
			text-align: center;

			.text {
				position: relative;
				width: fit-content;
			}

			.dot {
				position: absolute;
				width: 10rpx;
				height: 10rpx;
				border-radius: 5rpx;
				background: #ff0000;
				right: -15rpx;
				top: 20rpx;
			}
		}

		.slide {
			position: absolute;
			width: 100%;
			bottom: 0;

			.underline {
				width: 140rpx;
				height: 10rpx;
			}
		}
	}
	.color_point{
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		margin-top:40rpx;
		margin-right: 10rpx;
	}
</style>