crmcard/tm-vuetify/components/tm-tabs/tm-tabs.vue

<template>
	<view class="tm-tabs "
		:class="[bgColor == 'white' ? (black_tmeme ? 'bk grey-darken-4' : bgColor) : bgColor, 'shadow-' + bgColor + '-' + shadow, black_tmeme ? 'bk' : '']">
		<scroll-view scroll-with-animation :scroll-into-view="toTargetId" @scroll="scrollViesw" scroll-x
			class="tm-tabs-con ">
			<view class="tm-tabs-wk  " :class="{
					'text-align-left': align == 'left',
					'text-align-right': align == 'right',
					'text-align-center': align == 'center',
					'flex-between': align == 'split'
				}">
				<view @click.stop.prevent="acitveItemClick(index, true, $event)"
					class="tm-tabs-con-item d-inline-block " :class="[
						`tm-tabs-con-item-${index}`,
						model == 'rect' ? 'border-' + color_tmeme + '-a-1' : '',
						index !== list.length - 1 && model == 'rect' ? 'tm-tabs-con-item-rborder' : '',
						active == index && model == 'rect' ? color_tmeme : ''
					]" :style="{
						height: barheight + 'px',
						lineHeight: barheight + 'px'
					}" v-for="(item, index) in list" :key="index" :id="guid + '_' + index">
					<view class="tm-tabs-con-item-text px-24" :style="{
							fontSize: active == index ? active_font_size : font_size
						}" :class="[
							(model == 'line' || model == 'none') && active == index ? 'text-' + color_tmeme : 'text-'+fontColor,
							(model == 'line' || model == 'none') && active == index ? 'text-weight-b' : '',
							model == 'fill' && active == index ? color_tmeme: '',
						]">
						<slot name="default" :data="item">{{ item[rangeKey] || item }}</slot>
					</view>
				</view>
			</view>
			<view v-if="model == 'line'" class="tm-tabs-con-item-border"
				:class="[borderColor, `shadow-${color_tmeme}-4`, isOnecLoad == false ? 'tm-tabs-con-item-border-trans' : '']"
				:style="{
					transform: `translateX(${activePos.left})`,
					width: activePos.width
				}"></view>
		</scroll-view>
	</view>
</template>

<script>
	/**
	 * 选项卡切换
	 * @property {String} model = [line|rect|fill] 默认：line，样式,线和框两种
	 * @property {String} color = [] 默认：primary，主题文字颜色。
	 * @property {String} active-border-color = [] 默认：''，底下指示线的颜色主题。
	 * @property {String} bg-color = [] 默认：white，主题背景颜色。
	 * @property {Number} value = [] 默认：0，当前激活的项。双向绑定使用value.sync或者v-model
	 * @property {Number} font-size = [] 默认：28，默认字体大小，单位upx
	 * @property {Number} font-color = [] 默认：''，默认文字颜色,默认为空，使用主题自动匹配文字色。
	 * @property {Number} active-font-size = [] 默认：28，激活后字体大小，单位upx
	 * @property {String} align = [center|left|right|split] 默认：center，居中，左，右，均分对齐
	 * @property {String|Number} height = [90|100] 默认：90，高度。单位 upx
	 * @property {Array} list = [] 默认：[]，数据数组，可以是字符串数组，也可以是对象数组，需要提供rangKey
	 * @property {String} range-key = [] 默认：''，数据数组，需要提供rangKey以显示文本。
	 * @property {Function} change 返回当前选中的index值同v-model一样的值
	 * @property {String} active-key-value = [] 默认：''，当前激活项(和value一样的功能)，如果提供对象数组，则可以提供当前选项list[index][activeKey]的对象数据来自动解析当前选择的index项
	 */
	export default {
		name: 'tm-tabs',
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			// 样式,
			model: {
				type: String,
				default: 'line' //line|rect|fill
			},
			// 主题色包括文字颜色
			color: {
				type: String,
				default: 'primary'
			},
			activeBorderColor: {
				type: String,
				default: ''
			},
			// 背景颜色。
			bgColor: {
				type: String,
				default: 'white'
			},
			// 当前激活的项。
			value: {
				type: Number,
				default: 0
			},
			// 项目对齐方式。
			align: {
				type: String,
				default: 'center' // center|left|right|split
			},
			// 单位为upx
			height: {
				type: String | Number,
				default: 90
			},
			black: {
				type: Boolean | String,
				default: null
			},
			// 投影。
			shadow: {
				type: String | Number,
				default: 3
			},
			list: {
				type: Array,
				default: () => {
					// { title: '标签1', value: '' }, { title: '标签2标签标签', value: '' }, { title: '标签3', value: '' }
					return [];
				}
			},
			rangeKey: {
				type: String,
				default: ''
			},
			// 当前激活项，如果提供对象数组，则可以提供当前选项的对象数据来自动解析当前选择的index项
			activeKeyValue: {
				type: String,
				default: ''
			},
			fontSize: {
				type: Number,
				default: 28
			},
			//默认文字颜色,默认为空，使用主题自动匹配文字色。
			fontColor: {
				type: String,
				default: ''
			},
			activeFontSize: {
				type: Number,
				default: 28
			},
			// 跟随主题色的改变而改变。
			fllowTheme: {
				type: Boolean | String,
				default: true
			}
		},
		watch: {
			activeKeyValue: function() {
				this.setActiveIndex();
			},
			value: async function(val) {
				this.active = val;
				this.acitveItemClick(val, false);
			},
			active: async function(val) {
				this.$emit('input', val);
				this.$emit('update:value', val);
				this.$emit('change', val);
			},
			list: {
				deep: true,
				async handler() {
					await this.inits();
				}
			}
		},
		computed: {
			font_size: function() {
				return uni.upx2px(this.fontSize) + 'px';
			},
			active_font_size: function() {
				return uni.upx2px(this.activeFontSize) + 'px';
			},
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme: function() {
				if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this
					.fllowTheme) {
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			borderColor: function() {
				if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this
					.fllowTheme) {
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.activeBorderColor || this.color;
			},
			barheight: function() {
				let h = parseInt(this.height);
				if (isNaN(h) || !h) h = 90;
				return uni.upx2px(h);
			}
		},
		data() {
			return {
				active: 0,
				old_active: 0,
				guid: '',
				scrollObj: null,
				activePos: {
					left: 0,
					width: 0
				},
				preantObjinfo: null,
				tid: 88855565656,
				isOnecLoad: true,
				toTargetId: ''
			};
		},
		created() {
			this.guid = uni.$tm.guid();
			this.active = this.value;
		},
		mounted() {
			let t = this;
			uni.$tm.sleep(50).then(() => {
				t.inits();
			})
		},
		methods: {
			inits() {
				let t = this;
				this.setActiveIndex(this.active);
				let pqu = uni.createSelectorQuery().in(t)
				pqu.select('.tm-tabs')
					.boundingClientRect().exec(function(pd) {
						t.preantObjinfo = pd[0];

						t.$nextTick(function() {
							t.acitveItemClick(t.active, false);
						});
					})

			},
			scrollViesw(e) {
				this.scrollObj = e;
			},
			setLabelLeft(indexObj_now, callback) {
				let t = this;
				let e = this.scrollObj;
				let escroolet = 0;
				if (e) {
					escroolet = e.detail.scrollLeft;
				}
				let pqu = uni.createSelectorQuery().in(t)
				let ychi = this.activeFontSize == this.fontSize ? 0 : 160;
				uni.$tm.sleep(ychi).then(fs => {
					pqu.select(`.tm-tabs-con-item-${indexObj_now}`)
						.boundingClientRect().select(`.tm-tabs-con-item-0`).boundingClientRect().exec(
							function(res) {

								let now_Item_obj = res[0];
								let now_Item_one = res[1];

								if (now_Item_obj.id == now_Item_one.id) {

									// now_Item_obj.right = Math.abs(now_Item_one.left)+now_Item_one.right;
									// now_Item_one.right = Math.abs(now_Item_one.left)+now_Item_one.right;
									// now_Item_obj.left=0;
									// now_Item_one.left=0;
								}
								let nowId = t.guid + '_' + t.active;
								let dleft = now_Item_obj.left;
								let preventLeft = t.preantObjinfo.left;
								let acLeft = 0;
								let lftc = 0;
								let ch = (now_Item_obj.width - 24 - uni.upx2px(24) * 2) / 2;
								if (dleft <= 0) {
									dleft = escroolet + now_Item_obj.left;
									if (now_Item_obj.left == 0 && escroolet == 0) {
										lftc = (now_Item_obj.width - 24 - uni.upx2px(24) * 2) / 2 + 12 + 'px';

									} else {
										lftc = dleft + ch + 12 + 'px';
										if (now_Item_obj.id == now_Item_one.id) {
											let ptch = (now_Item_obj.width) / 2;
											lftc = ptch - 12 + 'px'
										}

									}
								} else {
									acLeft = Math.abs(now_Item_one.left >= 0 ? 0 : now_Item_one.left) + Math.abs(
										dleft);

									lftc = acLeft + uni.upx2px(24) - (now_Item_one.left >= 0 ? t.preantObjinfo
										.left : 0) + ch + 'px';
								}
								t.activePos = {
									left: lftc,
									// left:nowPage_x + itemObj.width + 'px',
									width: 24 + 'px'
								};
								t.old_active = t.active;
								callback();
							})
				})


			},
			setActiveIndex() {
				let t = this;
				if (typeof this.list[0] === 'object' && this.rangeKey) {
					let index = this.list.findIndex(item => {
						return item[t.rangeKey] == t.activeKeyValue;
					});

					if (index > -1) {
						this.active = index;
					}
				}
			},
			acitveItemClick(indx, etype, e) {
				let t = this;
				if (etype !== false) {
					this.isOnecLoad = false;
				}

				if (this.list.length <= 0) return;
				if (typeof this.list[indx] == 'undefined') return;
				t.active = indx;
				t.setLabelLeft(indx, function() {
					let nowScrollToid = '';
					let pqu = uni.createSelectorQuery().in(t)
					pqu.select('#' + t.guid + '_' + indx)
						.boundingClientRect().exec(function(pd) {
							let itemObj = pd[0];
							if (itemObj.left <= 0) {
								t.toTargetId = itemObj.id;
							} else if (itemObj.right > t.preantObjinfo.right) {
								t.toTargetId = itemObj.id;
							} else {
								t.toTargetId = null;
							}
						})

				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tm-tabs {
		.tm-tabs-con {
			position: relative;
			width: 100%;

			.tm-tabs-con-item-border {
				height: 4px;
				border-radius: 4px;
				position: absolute;
				margin-top: -4px;
				width: 10px;

				&.tm-tabs-con-item-border-trans {
					transition: all 0.15s linear;
				}
			}

			.tm-tabs-wk {
				position: relative;
				left: 0;
				white-space: nowrap;
				width: 100%;

				.tm-tabs-con-item {
					flex-shrink: 0;
					display: inline-block;

					.tm-tabs-con-item-text {
						// transition: all 0.1s;
					}

					&.tm-tabs-con-item-rborder {
						border-right: 0;
					}
				}
			}
		}
	}
</style>