my-tabs组件增加size属性

components/my-components/my-tabs.vue

@@ -4,19 +4,17 @@
 		<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>
@@ -25,10 +23,26 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
+	import {
+		computed,
+		ref,
+		watch
+	} from 'vue';
 	const props = defineProps({
-		padding:{type:String},
-		list:{type:Array},
+		size:{
+			type: String,
+			default:''
+		},
+		padding: {
+			type: String
+		},
+		list: {
+			type: Array
+		},
+		textKey: {
+			type: String,
+			default: ''
+		},
 		defaultIndex: {
 			type: Number,
 			default: 0
@@ -40,6 +54,7 @@ import { computed, ref, watch } from 'vue';
 	})
 	const emit = defineEmits(['change', 'update:modelValue'])
 	let current = ref(props.modelValue || props.defaultIndex || 0)
+
 	function changeCurrent(index) {
 		current.value = index
 	}
@@ -58,7 +73,6 @@ import { computed, ref, watch } from 'vue';
 		emit('update:modelValue', newval)
 		emit('change', newval)
 	})
-	
 </script>
 
 <style lang="scss" scoped>
@@ -67,13 +81,16 @@ import { computed, ref, watch } from 'vue';
 			opacity: 0;
 		}
 	}
+
 	.bg {
 		background: #E6F0FF;
 		padding: 4rpx 10rpx;
 	}
+
 	.border-r-16 {
 		border-radius: 16rpx;
 	}
+
 	.active-block {
 		background-color: $my-main-color;
 		color: #fff;
@@ -86,11 +103,13 @@ import { computed, ref, watch } from 'vue';
 		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;
@@ -103,13 +122,18 @@ import { computed, ref, watch } from 'vue';
 			overflow: hidden;
 			z-index: 1;
 		}
+
 		.item {
 			padding: 8rpx 0;
 			transition: all .2s ease-in-out;
 			position: relative;
 			background-color: transparent;
 			z-index: 2;
+			&.large{
+				padding: 16rpx 0;
 			}
+		}
+
 		.item.active {
 			border-radius: 8rpx;
 			// background-color: $my-main-color;