my-tabs组件增加size属性

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"
+			<view class="u-flex-1 u-text-center item" :class="[index===current?'':'active',size]" @tap="changeCurrent(index)"
-			 :class="{active:index===current}"
+				v-for="(item,index) in props.list" :key="index">
-			 @tap="changeCurrent(index)" v-for="(item,index) in props.list" :key="index">
+				{{textKey?item[textKey]:item}}
-				{{item}}
 			</view>
-			
+
 		</view>
 		<view class="u-flex tabs u-absolute position-all">
-			
+
-			<view class="u-flex-1 u-text-center item"
+			<view class="u-flex-1 u-text-center item" :class="{active:index===current}" @tap="changeCurrent(index)"
-			 :class="{active:index===current}"
+				v-for="(item,index) in props.list" :key="index">
-			 @tap="changeCurrent(index)" v-for="(item,index) in props.list" :key="index">
+				{{textKey?item[textKey]:item}}
-				{{item}}
 			</view>
-			
+
 		</view>
 	</view>
-	
+
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
+	import {
-	const props=defineProps({
+		computed,
-		padding:{type:String},
+		ref,
-		list:{type:Array},
+		watch
-		defaultIndex:{
+	} from 'vue';
-			type:Number,
+	const props = defineProps({
-			default:0
+		size:{
+			type: String,
+			default:''
 		},
-		modelValue:{
+		padding: {
-			type:Number,
+			type: String
-			default:0
+		},
+		list: {
+			type: Array
+		},
+		textKey: {
+			type: String,
+			default: ''
+		},
+		defaultIndex: {
+			type: Number,
+			default: 0
+		},
+		modelValue: {
+			type: Number,
+			default: 0
 		}
 	})
-	const emit=defineEmits(['change','update:modelValue'])
+	const emit = defineEmits(['change', 'update:modelValue'])
-	let current=ref(props.modelValue||props.defaultIndex||0)
+	let current = ref(props.modelValue || props.defaultIndex || 0)
-	function changeCurrent(index){
+
-		current.value=index
+	function changeCurrent(index) {
+		current.value = index
 	}
-	const computedBlockStyle=computed(()=>{
+	const computedBlockStyle = computed(() => {
-		const oneWidth= 100/props.list.length
+		const oneWidth = 100 / props.list.length
-		const left= current.value*oneWidth
+		const left = current.value * oneWidth
-		return{
+		return {
-			width:oneWidth+'%',
+			width: oneWidth + '%',
-			left:left+'%'
+			left: left + '%'
 		}
 	})
-	watch(()=>props.modelValue,(newval)=>{
+	watch(() => props.modelValue, (newval) => {
-		current.value=newval
+		current.value = newval
 	})
-	watch(()=>current.value,(newval)=>{
+	watch(() => current.value, (newval) => {
-		emit('update:modelValue',newval)
+		emit('update:modelValue', newval)
-		emit('change',newval)
+		emit('change', newval)
 	})
-	
 </script>
 
 <style lang="scss" scoped>
-	.zhanwei{
+	.zhanwei {
-		.item{
+		.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;