first

components/my-components/my-tabs.vue

@@ -0,0 +1,116 @@
+<template>
+	<view class="u-relative bg border-r-16">
+		
+		<view class="u-flex tabs zhanwei u-relative">
+			<view class="active-block" :style="computedBlockStyle">
+			</view>
+			<view class="u-flex-1 u-text-center item"
+			 :class="{active:index===current}"
+			 @tap="changeCurrent(index)" v-for="(item,index) in props.list" :key="index">
+				{{item}}
+			</view>
+			
+		</view>
+		<view class="u-flex tabs u-absolute position-all">
+			
+			<view class="u-flex-1 u-text-center item"
+			 :class="{active:index===current}"
+			 @tap="changeCurrent(index)" v-for="(item,index) in props.list" :key="index">
+				{{item}}
+			</view>
+			
+		</view>
+	</view>
+	
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+	const props=defineProps({
+		padding:{type:String},
+		list:{type:Array},
+		defaultIndex:{
+			type:Number,
+			default:0
+		},
+		modelValue:{
+			type:Number,
+			default:0
+		}
+	})
+	const emit=defineEmits(['change','update:modelValue'])
+	let current=ref(props.modelValue||props.defaultIndex||0)
+	function changeCurrent(index){
+		current.value=index
+		emit('update:modelValue',index)
+	}
+	const computedBlockStyle=computed(()=>{
+		const oneWidth= 100/props.list.length
+		const left= current.value*oneWidth
+		return{
+			width:oneWidth+'%',
+			left:left+'%'
+		}
+	})
+	watch(()=>current.value,()=>{
+		emit('change',current.value)
+	})
+	
+</script>
+
+<style lang="scss" scoped>
+	.zhanwei{
+		.item{
+			opacity: 0;
+		}
+	}
+	.bg{
+		background: #E6F0FF;
+		padding: 4rpx 10rpx;
+	}
+	.border-r-16{
+		border-radius: 16rpx;
+	}
+	.active-block{
+		background-color: $my-main-color;
+		color: #fff;
+		top: 4rpx;
+		bottom: 4rpx;
+		left: 10rpx;
+		position: absolute;
+		border-radius: 8rpx;
+		transition: all .2s ease-in-out;
+		overflow: hidden;
+		z-index: 1;
+	}
+	.tabs{
+		border-radius: 16rpx;
+		font-size: 28rpx;
+		color: #318AFE;
+		z-index: 2;
+		.active-block{
+			background-color: $my-main-color;
+			color: #fff;
+			top: 4rpx;
+			bottom: 4rpx;
+			left: 0;
+			position: absolute;
+			border-radius: 8rpx;
+			transition: all .2s ease-in-out;
+			overflow: hidden;
+			z-index: 1;
+		}
+		.item{
+			padding: 8rpx 0;
+			transition: all .2s ease-in-out;
+			position: relative;
+			background-color: transparent;
+			z-index: 2;
+		}
+		.item.active{
+			border-radius: 8rpx;
+			// background-color: $my-main-color;
+			color: #fff;
+		}
+	}
+</style>