tabs封装

<template>
	<view>
		<scroll-view :scroll-x="true">
			<view class="tabs"
				:style="{backgroundColor: backgroundColor, fontSize: fontSize + 'rpx', fontWeight: fontWeight, color: color, justifyContent: justifyContent}">
				<view @click="clickItem(index)" v-for="(item,index) in list" :key="index" class="tabs-item"
					:class="{'active-tabs': index === activeIndex}" :style="[index === activeIndex ? cssVars : {}]">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "t-tabs",
		props: {
			list: {
				type: Array,
				default: []
			},
			activeIndex: {
				type: Number | String,
				default: 0
			},
			backgroundColor: {
				type: String,
				default: '#fff'
			},
			fontSize: {
				type: Number,
				default: 24
			},
			fontWeight: {
				type: Number,
				default: 500
			},
			color: {
				type: String,
				default: '#666666'
			},
			lineHeight: {
				type: Number,
				default: 2
			},
			lineWidth: {
				type: String,
				default: ''
			},
			justifyContent: {
				type: String,
				default: ''
			}
		},
		data() {
			return {};
		},
		computed: {
			cssVars() {
				return {
					'--height': this.lineHeight + 'px',
				}
			}
		},
		methods: {
			clickItem(index) {
				if(this.activeIndex != index)
					this.$emit('change', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		width: 100%;
		height: 80rpx;
		display: inline-flex;
		align-items: center;

		.tabs-item {
			height: 100%;
			font-size: 26rpx;
			font-family: PingFang;
			margin-left: 33rpx;
			display: flex;
			align-items: center;
			letter-spacing: 1px;
			white-space: nowrap;
			&:not(:first-child) {
				margin-right: 5rpx;
			}
		}

		.active-tabs {
			color: #FA332B;
			position: relative;

			&::before {
				content: '';
				display: inline-block;
				width: 100%;
				height: var(--height);
				background: #FA332B;
				border-radius: 4rpx;
				position: absolute;
				bottom: 6rpx;
			}
		}

	}
</style>