uview-ui/components/u-subsection/u-subsection.vue

<template>
	<view class="u-subsection" :style="[subsectionStyle]">
		<view class="u-item u-line-1" :style="[itemStyle(index)]" @tap="click(index)" :class="[noBorderRight(index), 'u-item-' + index]"
		 v-for="(item, index) in listInfo" :key="index">
			<view :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view>
		</view>
		<view class="u-item-bg" :style="[itemBarStyle]"></view>
	</view>
</template>

<script>
	/**
	 * subsection 分段器
	 * @description 该分段器一般用于用户从几个选项中选择某一个的场景
	 * @tutorial https://www.uviewui.com/components/subsection.html
	 * @property {Array} list 选项的数组，形式见上方"基本使用"
	 * @property {String Number} current 初始化时默认选中的选项索引值（默认0）
	 * @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133）
	 * @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
	 * @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
	 * @property {String Number} font-size 字体大小，单位rpx（默认28）
	 * @property {String Number} height 组件高度，单位rpx（默认70）
	 * @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
	 * @property {Boolean} bold 激活选项的字体是否加粗（默认true）
	 * @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
	 * @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff）
	 * @event {Function} change 分段器选项发生改变时触发
	 * @example <u-subsection active-color="#ff9900"></u-subsection>
	 */
	export default {
		name: "u-subsection",
		props: {
			// tab的数据
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			// 当前活动的tab的index
			current: {
				type: [Number, String],
				default: 0
			},
			// 激活的颜色
			activeColor: {
				type: String,
				default: '#303133'
			},
			// 未激活的颜色
			inactiveColor: {
				type: String,
				default: '#606266'
			},
			// 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
			mode: {
				type: String,
				default: 'button'
			},
			// 字体大小，单位rpx
			fontSize: {
				type: [Number, String],
				default: 28
			},
			// 是否开启动画效果
			animation: {
				type: Boolean,
				default: true
			},
			// 组件的高度，单位rpx
			height: {
				type: [Number, String],
				default: 70
			},
			// 激活tab的字体是否加粗
			bold: {
				type: Boolean,
				default: true
			},
			// mode=button时，组件背景颜色
			bgColor: {
				type: String,
				default: '#eeeeef'
			},
			// mode = button时，滑块背景颜色
			buttonColor: {
				type: String,
				default: '#ffffff'
			},
			// 在切换分段器的时候，是否让设备震一下
			vibrateShort: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				listInfo: [],
				itemBgStyle: {
					width: 0,
					left: 0,
					backgroundColor: '#ffffff',
					height: '100%',
					transition: ''
				},
				currentIndex: this.current,
				buttonPadding: 3, // mode = button 时，组件的内边距
				borderRadius: 5, // 圆角值
				firstTimeVibrateShort: true // 组件初始化时，会触发current变化，此时不应震动
			};
		},
		watch: {
			current: {
				immediate: true,
				handler(nVal) {
					this.currentIndex = nVal;
					this.changeSectionStatus(nVal);
				}
			}
		},
		created() {
			// 将list的数据，传入listInfo数组，因为不能修改props传递的list值
			// 可以接受直接数组形式，或者数组元素为对象的形式，如：['简介', '评论'],或者[{name: '简介'}, {name: '评论'}]
			this.listInfo = this.list.map((val, index) => {
				if (typeof val != 'object') {
					let obj = {
						width: 0,
						name: val
					};
					return obj;
				} else {
					val.width = 0;
					return val;
				}
			});
		},
		computed: {
			// 设置mode=subsection时，滑块特有的样式
			noBorderRight() {
				return index => {
					if (this.mode != 'subsection') return;
					let classs = '';
					// 不显示右边的边框
					if (index < this.list.length - 1) classs += ' u-none-border-right';
					// 显示整个组件的左右边圆角
					if (index == 0) classs += ' u-item-first';
					if (index == this.list.length - 1) classs += ' u-item-last';
					return classs;
				};
			},
			// 文字的样式
			textStyle() {
				return index => {
					let style = {};
					// 设置字体颜色
					if (this.mode == 'subsection') {
						if (index == this.currentIndex) {
							style.color = '#ffffff';
						} else {
							style.color = this.activeColor;
						}
					} else {
						if (index == this.currentIndex) {
							style.color = this.activeColor;
						} else {
							style.color = this.inactiveColor;
						}
					}
					// 字体加粗
					if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
					// 文字大小
					style.fontSize = this.fontSize + 'rpx';
					return style;
				};
			},
			// 每个分段器item的样式
			itemStyle() {
				return index => {
					let style = {};
					if (this.mode == 'subsection') {
						// 设置border的样式
						style.borderColor = this.activeColor;
						style.borderWidth = '1px';
						style.borderStyle = 'solid';
					}
					return style;
				};
			},
			// mode=button时，外层view的样式
			subsectionStyle() {
				let style = {};
				style.height = uni.upx2px(this.height) + 'px';
				if (this.mode == 'button') {
					style.backgroundColor = this.bgColor;
					style.padding = `${this.buttonPadding}px`;
					style.borderRadius = `${this.borderRadius}px`;
				}
				return style;
			},
			// 滑块的样式
			itemBarStyle() {
				let style = {};
				style.backgroundColor = this.activeColor;
				style.zIndex = 1;
				if (this.mode == 'button') {
					style.backgroundColor = this.buttonColor;
					style.borderRadius = `${this.borderRadius}px`;
					style.bottom = `${this.buttonPadding}px`;
					style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + 'px';
					style.zIndex = 0;
				}
				return Object.assign(this.itemBgStyle, style);
			}
		},
		mounted() {
			setTimeout(() => {
				this.getTabsInfo();
			}, 10);
		},
		methods: {
			// 改变滑块的样式
			changeSectionStatus(nVal) {
				if (this.mode == 'subsection') {
					// 根据滑块在最左边和最右边时，显示左边和右边的圆角
					if (nVal == this.list.length - 1) {
						this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`;
					}
					if (nVal == 0) {
						this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`;
					}
					if (nVal > 0 && nVal < this.list.length - 1) {
						this.itemBgStyle.borderRadius = '0';
					}
				}
				// 更新滑块的位置
				setTimeout(() => {
					this.itemBgLeft();
				}, 10);
				if (this.vibrateShort && !this.firstTimeVibrateShort) {
					// 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
					// #ifndef H5
					uni.vibrateShort();
					// #endif
				}
				// 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话)
				this.firstTimeVibrateShort = false;
			},
			click(index) {
				// 不允许点击当前激活选项
				if (index == this.currentIndex) return;
				this.currentIndex = index;
				this.changeSectionStatus(index);
				this.$emit('change', Number(index));
			},
			// 获取各个tab的节点信息
			getTabsInfo() {
				let view = uni.createSelectorQuery().in(this);
				for (let i = 0; i < this.list.length; i++) {
					view.select('.u-item-' + i).boundingClientRect();
				}
				view.exec(res => {
					if (!res.length) {
						setTimeout(() => {
							this.getTabsInfo();
							return;
						}, 10);
					}
					// 将分段器每个item的宽度，放入listInfo数组
					res.map((val, index) => {
						this.listInfo[index].width = val.width;
					});
					// 初始化滑块的宽度
					if (this.mode == 'subsection') {
						this.itemBgStyle.width = this.listInfo[0].width + 'px';
					} else if (this.mode == 'button') {
						this.itemBgStyle.width = this.listInfo[0].width + 'px';
					}
					// 初始化滑块的位置
					this.itemBgLeft();
				});
			},
			itemBgLeft() {
				// 根据是否开启动画效果，
				if (this.animation) {
					this.itemBgStyle.transition = 'all 0.35s';
				} else {
					this.itemBgStyle.transition = 'all 0s';
				}
				let left = 0;
				// 计算当前活跃item到组件左边的距离
				this.listInfo.map((val, index) => {
					if (index < this.currentIndex) left += val.width;
				});
				// 根据mode不同模式，计算滑块需要移动的距离
				if (this.mode == 'subsection') {
					this.itemBgStyle.left = left + 'px';
				} else if (this.mode == 'button') {
					this.itemBgStyle.left = left + this.buttonPadding + 'px';
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";
	
	.u-subsection {
		@include vue-flex;
		align-items: center;
		overflow: hidden;
		position: relative;
	}

	.u-item {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		height: 100%;
		@include vue-flex;
		align-items: center;
		justify-content: center;
		color: $u-main-color;
		padding: 0 6rpx;
	}

	.u-item-bg {
		background-color: $u-type-primary;
		position: absolute;
		z-index: -1;
	}

	.u-none-border-right {
		border-right: none !important;
	}

	.u-item-first {
		border-top-left-radius: 8rpx;
		border-bottom-left-radius: 8rpx;
	}

	.u-item-last {
		border-top-right-radius: 8rpx;
		border-bottom-right-radius: 8rpx;
	}

	.u-item-text {
		transition: all 0.35s;
		color: $u-main-color;
		@include vue-flex;
		align-items: center;
		position: relative;
		z-index: 3;
	}
</style>