front-end/ghs/src/components/plugin/tabs.vue

<template>
	<view
		class="tui-tabs-view"
		:class="[
			isFixed ? 'tui-tabs-fixed' : 'tui-tabs-relative',
			unlined ? 'tui-unlined' : '',
			isBoxShadow ? 'tui-tabs-view-shadow' : ''
		]"
		:style="{
			height: height + 'rpx',
			padding: `0 ${padding}rpx`,
			background: bgColor,
			top: isFixed ? top + 'px' : 'auto'
		}"
	>
		<div
			class="item-wrap"
			:style="{ width: isAdd ? `calc(100% - ${addTabWidth + 30}rpx)` : '100%' }"
		>
			<view
				v-for="(item, index) in tabs"
				:key="index"
				:class="[
					'tui-tabs-item',
					{ active: currentTab == index },
					{ 'border-left': borderLeft }
				]"
				:style="{ width: itemWidth }"
				@tap.stop="swichTabs(index)"
			>
				<view
					class="tui-tabs-title"
					:class="{
						'tui-tabs-active': currentTab == index,
						'tui-tabs-disabled': item.disabled
					}"
					:style="{
						fontSize: size + 'rpx',
						lineHeight: size + 'rpx',
						fontWeight: bold && currentTab == index ? 'bold' : 'normal'
					}"
				>
					<div class="tabs-title">{{ item.name }}</div>
					<!-- tab value -->
					<div class="tabs-value" v-if="item.value || item.value == 0">
						{{ item.value }}
					</div>
				</view>
			</view>
		</div>
		<!-- tab add -->
		<div
			class="tabs-add"
			v-if="isAdd"
			:style="{ width: `${addTabWidth}rpx` }"
			@click="add"
		>
			<i class="iconfont" :class="[addIcon]"></i>
			<span>{{ addText }}</span>
		</div>
		<!-- <view
			class="tui-tabs-slider"
			:style="{
				transform: 'translateX(' + scrollLeft + 'px)',
				width: sliderWidth + 'rpx',
				height: sliderHeight + 'rpx',
				borderRadius: sliderRadius,
				bottom: bottom,
				marginBottom: bottom == '50%' ? '-' + sliderHeight / 2 + 'rpx' : 0
			}"
		></view> -->
	</view>
</template>

<script>
export default {
	name: "tuiTabs",
	props: {
		// 标签页
		tabs: {
			type: Array,
			default() {
				return [];
			}
		},
		// rpx
		height: {
			type: Number,
			default: 80
		},
		// rpx 只对左右padding起作用，上下为0
		padding: {
			type: Number,
			default: 30
		},
		// 背景色
		bgColor: {
			type: String,
			default: "#FFFFFF"
		},
		// 是否固定
		isFixed: {
			type: Boolean,
			default: false
		},
		// px
		top: {
			type: Number, // #ifndef H5

			default: 0, // #endif
			// #ifdef H5

			default: 0
			// #endif
		},
		// 是否去掉底部线条
		unlined: {
			type: Boolean,
			default: false
		},
		// 当前选项卡
		currentTab: {
			type: Number,
			default: 0
		},
		// 滑块宽度
		sliderWidth: {
			type: Number,
			default: 68
		},
		// 滑块高度
		sliderHeight: {
			type: Number,
			default: 6
		},
		sliderRadius: {
			type: String,
			default: "50rpx"
		},
		// 滑块bottom
		bottom: {
			type: String,
			default: "0"
		},
		// 标签页宽度
		itemWidth: {
			type: String,
			default: "25%"
		},
		// 字体颜色
		color: {
			type: String,
			default: "#999"
		},
		// 字体大小
		size: {
			type: Number,
			default: 28
		},
		// 选中后 是否加粗 ，未选中则无效
		bold: {
			type: Boolean,
			default: false
		},
		// 是否显示borer-right
		borderLeft: {
			type: Boolean,
			default: false
		},
		// 是否有新增按钮
		isAdd: {
			type: Boolean,
			default: false
		},
		// 新增按钮的icon
		addIcon: {
			type: String,
			default: "icontianjiakehu"
		},
		addText: {
			type: String,
			default: "添加"
		},
		// 是否显示box-shadow
		isBoxShadow: {
			type: Boolean,
			default: true
		}
	},
	watch: {
		currentTab() {
			this.checkCor();
		}
	},
	created() {
		setTimeout(() => {
			// 高度自适应
			uni.getSystemInfo({
				success: res => {
					this.winWidth = res.windowWidth;
					this.checkCor();
				}
			});
		}, 50);
	},
	data() {
		return {
			winWidth: 0,
			scrollLeft: 0,
			addTabWidth: 130
		};
	},
	computed: {
		// addTabWidth() {
		// 	return uni.upx2px(130)
		// }
	},
	methods: {
		checkCor: function() {
			let addTabWidth = this.isAdd ? uni.upx2px(this.addTabWidth + 30) : 0;
			let tabsNum = this.tabs.length;
			let padding = (this.winWidth / 750) * this.padding;
			let width = this.winWidth - padding * 2 - addTabWidth;
			let left =
				(width / tabsNum - (this.winWidth / 750) * this.sliderWidth) / 2 + padding;
			let scrollLeft = left;
			if (this.currentTab > 0) {
				scrollLeft = scrollLeft + (width / tabsNum) * this.currentTab;
			}
			this.scrollLeft = scrollLeft;
		},
		// 点击标题切换当前页时改变样式
		swichTabs: function(index) {
			let item = this.tabs[index];
			if (item && item.disabled) return;
			if (this.currentTab == index) {
				return false;
			} else {
				this.$emit("change", {
					index: Number(index)
				});
			}
		},
		// 新增
		add() {
			this.$emit("add");
		}
	}
};
</script>

<style lang="scss" scoped>
.tabs-add {
	@include disFlex(center, center);
	height: 60px;
	border-left: 1px solid $borderColor;
	padding-left: 30px;
	color: $fontColor3;
	.iconfont {
		margin-right: 10px;
		font-size: 30rpx;
	}
}
.tui-tabs-view {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 9;
	.tui-tabs-item {
		&.border-left {
			border-left: 2px solid #ddd;
		}
	}
	.tui-tabs-item:first-child {
		&.border-left {
			border-left: none;
		}
	}
}
.tui-tabs-view-shadow {
	box-shadow: 4px 4px 10px #eee;
}

.tui-tabs-relative {
	position: relative;
}

.tui-tabs-fixed {
	position: fixed;
	left: 0;
}

.tui-tabs-fixed::before,
.tui-tabs-relative::before {
	content: "";
	position: absolute;
	border-bottom: 1upx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}

.tui-unlined::before {
	border-bottom: 0 !important;
}

.item-wrap {
	width: 100%;
	display: flex;
	align-items: center;
	// justify-content: center;
	color: $fontColor3;
	overflow-x: scroll;
}

.tui-tabs-item {
	padding: 12upx 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	&.active {
		&:after {
			display: block;
			position: absolute;
			width: 60%;
			height: 6upx;
			bottom: 0;
			left: 50%;
			content: "";
			background-color: $mainColor;
			transform: translate(-50%, 0);
		}
	}
}

.tui-tabs-disabled {
	opacity: 0.6;
}

.tui-tabs-title {
	// display: flex;
	// align-items: center;
	// justify-content: center;
	position: relative;
	z-index: 2;
	width: 100%;
}
.tabs-title {
	text-align: center;
}
.tabs-value {
	// @include disFlex(center, center);
	font-size: 24px;
	text-align: center;
	margin-top: 6px;
}

.tui-tabs-active {
	transition: all 0.15s ease-in-out;
	color: $mainColor;
}

.tui-tabs-slider {
	position: absolute;
	left: 0;
	transition: all 0.15s ease-in-out;
	z-index: 0;
	transform: translateZ(0);
	background: $mainColor;
}
</style>