first

components/my-components/my-tabs.vue

@@ -0,0 +1,144 @@
+<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="[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">
+				{{textKey?item[textKey]:item}}
+			</view>
+
+		</view>
+	</view>
+
+</template>
+
+<script setup>
+	import {
+		computed,
+		ref,
+		watch
+	} from 'vue';
+	const props = defineProps({
+		size:{
+			type: String,
+			default:''
+		},
+		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 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(() => current.value, (newval) => {
+		emit('update:modelValue', newval)
+		emit('change', newval)
+	})
+</script>
+
+<style lang="scss" scoped>
+	.zhanwei {
+		.item {
+			opacity: 0;
+		}
+	}
+
+	.bg {
+		background: #E6F0FF;
+		padding: 7rpx 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: 9rpx 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;
+			color: #fff;
+			font-weight: bold;
+		}
+	}
+</style>