From 2b9aacdf731547d4b7fb2e029622287fe1731423 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Wed, 9 Oct 2024 17:32:21 +0800
Subject: [PATCH] =?UTF-8?q?my-tabs=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0size?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/my-components/my-tabs.vue | 120 ++++++++++++++++-----------
 1 file changed, 72 insertions(+), 48 deletions(-)

diff --git a/components/my-components/my-tabs.vue b/components/my-components/my-tabs.vue
index 9a5d15d..378770e 100644
--- a/components/my-components/my-tabs.vue
+++ b/components/my-components/my-tabs.vue
@@ -1,80 +1,97 @@
 <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 class="u-flex-1 u-text-center item" :class="[index===current?'':'active',size]" @tap="changeCurrent(index)"
+				v-for="(item,index) in props.list" :key="index">
+				{{textKey?item[textKey]: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 class="u-flex-1 u-text-center item" :class="{active:index===current}" @tap="changeCurrent(index)"
+				v-for="(item,index) in props.list" :key="index">
+				{{textKey?item[textKey]: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
+	import {
+		computed,
+		ref,
+		watch
+	} from 'vue';
+	const props = defineProps({
+		size:{
+			type: String,
+			default:''
 		},
-		modelValue:{
-			type:Number,
-			default:0
+		padding: {
+			type: String
+		},
+		list: {
+			type: Array
+		},
+		textKey: {
+			type: String,
+			default: ''
+		},
+		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
+	const emit = defineEmits(['change', 'update:modelValue'])
+	let current = ref(props.modelValue || props.defaultIndex || 0)
+
+	function changeCurrent(index) {
+		current.value = index
 	}
-	const computedBlockStyle=computed(()=>{
-		const oneWidth= 100/props.list.length
-		const left= current.value*oneWidth
-		return{
-			width:oneWidth+'%',
-			left:left+'%'
+	const computedBlockStyle = computed(() => {
+		const oneWidth = 100 / props.list.length
+		const left = current.value * oneWidth
+		return {
+			width: oneWidth + '%',
+			left: left + '%'
 		}
 	})
-	watch(()=>props.modelValue,(newval)=>{
-		current.value=newval
+	watch(() => props.modelValue, (newval) => {
+		current.value = newval
 	})
-	watch(()=>current.value,(newval)=>{
-		emit('update:modelValue',newval)
-		emit('change',newval)
+	watch(() => current.value, (newval) => {
+		emit('update:modelValue', newval)
+		emit('change', newval)
 	})
-	
 </script>
 
 <style lang="scss" scoped>
-	.zhanwei{
-		.item{
+	.zhanwei {
+		.item {
 			opacity: 0;
 		}
 	}
-	.bg{
+
+	.bg {
 		background: #E6F0FF;
 		padding: 4rpx 10rpx;
 	}
-	.border-r-16{
+
+	.border-r-16 {
 		border-radius: 16rpx;
 	}
-	.active-block{
+
+	.active-block {
 		background-color: $my-main-color;
 		color: #fff;
 		top: 4rpx;
@@ -86,12 +103,14 @@ import { computed, ref, watch } from 'vue';
 		overflow: hidden;
 		z-index: 1;
 	}
-	.tabs{
+
+	.tabs {
 		border-radius: 16rpx;
 		font-size: 28rpx;
 		color: #318AFE;
 		z-index: 2;
-		.active-block{
+
+		.active-block {
 			background-color: $my-main-color;
 			color: #fff;
 			top: 4rpx;
@@ -103,14 +122,19 @@ import { computed, ref, watch } from 'vue';
 			overflow: hidden;
 			z-index: 1;
 		}
-		.item{
+
+		.item {
 			padding: 8rpx 0;
 			transition: all .2s ease-in-out;
 			position: relative;
 			background-color: transparent;
 			z-index: 2;
+			&.large{
+				padding: 16rpx 0;
+			}
 		}
-		.item.active{
+
+		.item.active {
 			border-radius: 8rpx;
 			// background-color: $my-main-color;
 			color: #fff;