JCSS / yl_miniapp

<template>
	<view class="tui-tabs-view"
		:class="[isFixed ? 'tui-tabs-fixed' : 'tui-tabs-relative', unlined ? 'tui-unlined' : '']" :style="{
			width: tabsWidth + 'px',
			height: height + 'rpx',
			padding: `0 ${padding}rpx`,
			background: backgroundColor,
			top: isFixed ? top + 'px' : 'auto',
			zIndex: isFixed ? zIndex : 'auto'
		}" v-if="tabsWidth>0">
		<view v-for="(item, index) in tabs" :key="index" class="tui-tabs-item"
			:style="{ width: getItemWidth,height: height + 'rpx' }" @tap.stop="swichTabs(index)">
			<view class="tui-tabs-title" :class="{'tui-tabs-disabled': item.disabled }" :style="{
					color: currentTab == index ? getSelectedColor : color,
					fontSize: size + 'rpx',
					fontWeight: bold && currentTab == index ? 'bold' : 'normal',transform:`scale(${currentTab == index?scale:1})`
				}">
				{{ item[field] }}
				<view :class="[item.isDot ? 'tui-badge__dot' : 'tui-tabs__badge']"
					:style="{ color: badgeColor, backgroundColor: getBadgeBgColor }"
					v-if="item[badgeField] || item.isDot">
					{{ item.isDot ? '' : item[badgeField] }}
				</view>
			</view>
		</view>
		<view v-if="isSlider" class="tui-tabs-slider" :style="{
				transform: 'translateX(' + scrollLeft + 'px)',
				width: sliderWidth + 'rpx',
				height: sliderHeight + 'rpx',
				borderRadius: sliderRadius,
				bottom: bottom,
				background: getSliderBgColor,
				marginBottom: bottom == '50%' ? '-' + sliderHeight / 2 + 'rpx' : 0
			}"></view>
	</view>
</template>

<script>
	export default {
		name: 'tuiTabs',
		emits: ['change'],
		props: {
			//标签页
			tabs: {
				type: Array,
				default () {
					return [];
				}
			},
			//显示文本字段名称
			field: {
				type: String,
				default: 'name'
			},
			badgeField: {
				type: String,
				default: 'num'
			},
			//tabs宽度，不传值则默认使用windowWidth，单位px
			width: {
				type: [Number, String],
				default: 0
			},
			//rpx
			height: {
				type: Number,
				default: 80
			},
			//rpx 只对左右padding起作用，上下为0
			padding: {
				type: Number,
				default: 30
			},
			//背景色
			backgroundColor: {
				type: String,
				default: '#FFFFFF'
			},
			//是否固定
			isFixed: {
				type: Boolean,
				default: false
			},
			//px
			top: {
				type: Number,
				// #ifndef H5
				default: 0,
				// #endif
				// #ifdef H5
				default: 44
				// #endif
			},
			//是否去掉底部线条
			unlined: {
				type: Boolean,
				default: false
			},
			//当前选项卡
			currentTab: {
				type: Number,
				default: 0
			},
			isSlider: {
				type: Boolean,
				default: true
			},
			//滑块宽度
			sliderWidth: {
				type: Number,
				default: 68
			},
			//滑块高度
			sliderHeight: {
				type: Number,
				default: 6
			},
			//滑块背景颜色
			sliderBgColor: {
				type: String,
				default: ''
			},
			sliderRadius: {
				type: String,
				default: '50rpx'
			},
			//滑块bottom
			bottom: {
				type: String,
				default: '0'
			},
			//标签页宽度
			itemWidth: {
				type: String,
				default: ''
			},
			//字体颜色
			color: {
				type: String,
				default: '#666'
			},
			//选中后字体颜色
			selectedColor: {
				type: String,
				default: ''
			},
			//字体大小
			size: {
				type: Number,
				default: 28
			},
			//选中后 是否加粗 ，未选中则无效
			bold: {
				type: Boolean,
				default: false
			},
			//2.3.0+
			scale: {
				type: [Number, String],
				default: 1
			},
			//角标字体颜色
			badgeColor: {
				type: String,
				default: '#fff'
			},
			//角标背景颜色
			badgeBgColor: {
				type: String,
				default: ''
			},
			zIndex: {
				type: [Number, String],
				default: 996
			}
		},
		watch: {
			currentTab() {
				this.checkCor();
			},
			tabs() {
				this.checkCor();
			},
			width(val) {
				this.tabsWidth = val;
				this.checkCor();
			}
		},
		computed: {
			getItemWidth() {
				let width = 100 / (this.tabs.length || 4) + '%'
				return this.itemWidth ? this.itemWidth : width
			},
			getSliderBgColor() {
				return this.sliderBgColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
			},
			getSelectedColor() {
				return this.selectedColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
			},
			getBadgeBgColor() {
				return this.badgeBgColor || (uni && uni.$tui && uni.$tui.color.pink) || '#f74d54';
			}
		},
		created() {
			// 高度自适应
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						this.winWidth = res.windowWidth;
						this.tabsWidth = this.width == 0 ? this.winWidth : Number(this.width);
						this.checkCor();
					}
				});
			}, 0);
		},
		data() {
			return {
				winWidth: 0,
				tabsWidth: 0,
				scrollLeft: 0
			};
		},
		methods: {
			checkCor: function() {
				let tabsNum = this.tabs.length;
				let padding = uni.upx2px(Number(this.padding));
				let width = this.tabsWidth - padding * 2;
				let left = (width / tabsNum - uni.upx2px(Number(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),
						item: item
					});
				}
			}
		}
	};
</script>

<style scoped>
	.tui-tabs-view {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.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: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5) translateZ(0);
		transform: scaleY(0.5) translateZ(0);
		transform-origin: 0 100%;
		bottom: 0;
		right: 0;
		left: 0;
	}

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

	.tui-tabs-item {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: visible;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

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

	.tui-tabs-title {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 3;
		overflow: visible;
		transition: all 0.15s ease-in-out;
	}

	.tui-tabs-slider {
		position: absolute;
		left: 0;
		transition: all 0.3s ease-in-out;
		z-index: 1;
		transform-style: preserve-3d;
	}

	.tui-tabs__badge {
		position: absolute;
		font-size: 24rpx;
		height: 32rpx;
		min-width: 20rpx;
		padding: 0 6rpx;
		border-radius: 40rpx;
		right: 0;
		top: 0;
		transform: translate(88%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		z-index: 4;
		font-weight: normal !important;
	}

	.tui-badge__dot {
		position: absolute;
		height: 16rpx;
		width: 16rpx;
		border-radius: 50%;
		right: -10rpx;
		top: -10rpx;
		z-index: 4;
	}
</style>