pingpu_H5/components/ui-tabs/ui-tabs.vue

<template>
	<view class="tab-box">
		<view class="tab-box-scroll">
			<view class="tab-box-item" :class="{ 'active': active === item[nodeKey] }" :style="customStyle"
				v-for="(item, index) in list" :key="index" @tap="tabsClick(item[nodeKey])">
				{{item[nodeValue]}}
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 ** ui-tabs 组件
	 * 作者：李成龙
	 * @property {[Number|String,|Boolean} active  当前选中默认值
	 * @property {Array} list 选项列表
	 * @property {Number} size 字体大小
	 * @description 通用tab选项组件
	 * @example 
	 */
	import {
		throttle
	} from '@/utils/utils.js'
	export default {
		name: "ui-tabs",
		props: {
			active: {
				type: [Number, String, Boolean],
				default: 1
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			size: {
				type: Number,
				default: 28
			},
			defaultProps: {
				type: Object,
				default () {
					return {
						text: "text",
						value: "value"
					}
				}
			},
			wait: {
				type: Number,
				default: 500
			},
			// 整个组件的样式
			customStyle: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		computed: {
			nodeKey() {
				return this.defaultProps.value;
			},
			nodeValue() {
				return this.defaultProps.text;
			},
		},
		mounted() {
			this.tabsClick = throttle(this.tabsClick, this, this.wait);
		},
		methods: {
			tabsClick(type) {
				this.$emit('clickTab', type)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-box {
		position: relative;
		z-index: 10;
		overflow-x: scroll;
		
		display: flex;
		width: 100%;
		
		font-size: 30rpx;
		background-color: #fff;
		box-shadow: 0 5rpx 5rpx rgba(0, 0, 0, 0.02);
		
		.tab-box-scroll{
			display: flex;
			width: max-content;
		}
		
		.tab-box-item {
			display: inline-block;
			
			box-sizing: border-box;
			width: max-content;
			height: 90rpx;
			padding: 0 32rpx;
			
			line-height: 90rpx;
			text-align: center;
			
		}

		.active {
			position: relative;
			font-size: 32rpx;
			color: #333;

			&::after {
				content: ' ';
				display: block;
				width: 100rpx;
				height: 7rpx;
				position: absolute;
				border-radius: 100px;
				bottom: 0rpx;
				margin: auto;
				left: 0;
				right: 0;
				background-color: $color-primary;
			}
		}
	}
</style>