mp_exhibitor_miniprog/components/common/u-tabs/index.vue

<template>
	<van-tabs :class="clazz" :active="tabActive" :ellipsis="false" @change="tabChange">
		<template v-for="(item, index) in tabs">
			
			<van-tab class="u-tab" :title="item.label" :name="item.value" :key="item.value"></van-tab>
		</template>
	</van-tabs>
</template>

<script>
	import VanTabs from '@/wxcomponents/vant/tabs/index'
	import VanTab from '@/wxcomponents/vant/tab/index'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			VanTabs,
			VanTab
		},
		props: {
			tabStyle: String,
			active: [String, Number],
			tabs: [Array]
		},
		computed: {
			clazz() {
				if (this.tabStyle === 'default') {
					return 'u-tabs u-tabs-detault'
				} else if (this.tabStyle === 'tag') {
					return 'u-tabs u-tabs-tag'
				} else {
					return 'u-tabs'
				}
			}
		},
		watch: {
			active(val) {
				this.tabActive = val
			}
		},
		data() {
			return {
				tabActive: undefined,
				data: [{
					label: '表面贴装',
					value: 1
				}, {
					label: '线束加工',
					value: 2
				}, {
					label: '工厂自动化',
					value: 3
				}, {
					label: '点胶注胶',
					value: 4
				}, {
					label: '电子制造服务',
					value: 5
				}, {
					label: '未来服务',
					value: 6
				}]
			}
		},
		created() {
			this.tabActive = this.active
		},
		mounted() {
		},
		methods: {
			tabChange(tab) {
				const e = {}
				e.detail = {
					index: tab.index,
					label: tab.title,
					value: tab.name
				}
				this.tabActive = e.detail.value
				this.$emit('update:active', this.tabActive)
				this.$emit('change', e)
			}
		}
	}
</script>
<style lang="scss">
	.u-tabs.u-tabs-tag {
		--tabs-line-height: 64rpx;
		--tabs-card-height: 64rpx;
		--tabs-bottom-bar-height: rpx;
		--tab-active-text-color: #E57519;
		--tab-background-color: #F5F5F5;
		--tab-active-background-color: #F9E3D1;
		--tab-margin-right: 10rpx;
		--tab-border-radius: 20rpx;
		.van-tab{
			font-size: $fontSize2;
			line-height: 50rpx;
		}
		.van-tabs--line{
			height: 50rpx;
		}
		.van-tabs__scroll--line{
			height: 100%;
		}
	}
	.u-tabs.u-tabs-detault{
		--tabs-line-height: 48rpx;
		--tabs-card-height: 50rpx;
		--tabs-bottom-bar-height: 0;
		--tab-active-text-color: #FFFFFF;
		--tab-background-color: #FFFFFF;
		--tab-active-background-color: #E57519;
		--tab-margin-right: 12rpx;
		--tab-border-radius: 6rpx;
		.van-tabs__nav{
			padding: 0;
		}
		.van-tab{
			font-size: $fontSize1;
			border: 1rpx solid #7D7D7D;
			height: 50rpx;
			color: #7D7D7D;
		}
		.van-tab--active{
			border-color: #E57519!important;
			color: #FFFFFF;
		}
		.van-tabs__wrap--scrollable .van-tab--complete{
			flex: none!important;
			padding: 0 30rpx;
		}
		.van-tabs--line{
			height: 50rpx;
		}
	}
	.u-tab{
		margin-right: 20rpx;
	}
</style>