wardrobe/tm-vuetify/components/tm-segTabs/tm-segTabs.vue

<template>
	<view class="tm-segTabs d-inline-block relative ">
		<view class="tm-segTabs-wkbody  fulled flex-start  relative" :class="['pa-'+gutter]"
			:style="{width:width>0?width+'rpx':'auto'}">
			<view @click="clickItem(index, item)" :class="[
					`px-${margin[0]} py-${margin[1]}`,
					`text-size-${fontSize}`,
					`round-${round}`,
					active_index == index
						? 'text-weight-b ' + (black_tmeme ? `text-grey-lighten-3 ` : `text-${color_tmeme}`)
						: black_tmeme
						? `text-grey bk`
						: `text-${color}`
				]" :id="'tm-segTabs-item-' + index" v-for="(item, index) in listData" :key="index"
				class="tm-segTabs-item flex-shrink flex-center" :style="{
					width:width_item+'px'
				}">
				<slot name="default"
					:item="{color:color_tmeme, data: item, index: index, isActive: active_index == index }">
					{{ returnKeyValue(item) }}
				</slot>
			</view>
		</view>
		<view :class="[black_tmeme ? 'grey-darken-5' : bgColor, `round-${round}`]"
			class="tm-segTabs-bg absolute  l-0 t-0 fulled  " :style="{ height: body_height + 'px' }">
			<view
				:class="[`shadow-${activeColor}-${shadow}`,black_tmeme ? 'grey-darken-3' : activeColor, `round-${round}`,aniOn?'aniOn':'',`mt-${gutter} ml-${gutter/2}`]"
				class="tm-segTabs-bg-bar   relative"
				:style="{ width: `${active_barWidth}px`, height: `${active_barHeight}px`,transform: `translateX(${left}px)` }">
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 分段器选项卡
	 * @property {Number} value = [] 默认0,当前激活的选项.
	 * @property {Array} list = [] 默认数据,对象数组或者字符串数组
	 * @property {String} rang-key = [] 默认text,list对象数组时取文本的字段名称
	 * @property {String} color = [] 默认black,默认的文字颜色
	 * @property {String} bg-color = [] 默认grey-lighten-4,默认的背景色
	 * @property {String} active-font-color = [] 默认black,激活的文本色
	 * @property {String} active-color = [] 默认black,激活项的背景色
	 * @property {String} font-size = [] 默认 n,字号，xxs,xs,s,n,g,lg,xl
	 * @property {Array} margin = [] 默认 [24,10],左右和上下的间距，调整它可以控制宽度和高度。
	 * @property {Number} round = [] 默认4， 圆角
	 * @property {Number} shadow = [] 默认4， 投影
	 * @property {Number} gutter = [] 默认4， 四边的间隙
	 * @property {Number} width = [] 默认0， 整体的宽度，默认不自动宽度，提供了后，项目内的宽度为均分此宽度。
	 * @property {Boolean} black = [] 默认false， 是否暗黑模式
	 * @property {Boolean} fllow-theme = [] 默认true， 是否跟随主题切换主色。
	 */
	export default {
		name: 'tm-segTabs',
		props: {
			value: {
				type: Number,
				defalut: 0
			},
			list: {
				type: Array,
				default: () => []
			},
			//整体的宽度，不设置使用默认计算的宽度。
			width: {
				type: Number,
				default: 0
			},
			// 四周的间隙 
			gutter: {
				type: Number,
				default: 4
			},
			shadow: {
				type: Number,
				default: 4
			},
			margin: {
				type: Array,
				default: () => [24, 10]
			},
			rangKey: {
				type: String,
				default: 'text'
			},
			color: {
				type: String,
				default: 'black'
			},
			bgColor: {
				type: String,
				default: 'grey-lighten-4'
			},
			activeFontColor: {
				type: String,
				default: 'black'
			},
			activeColor: {
				type: String,
				default: 'white'
			},
			fontSize: {
				type: String,
				default: 'n'
			},
			round: {
				type: String | Number,
				default: 4
			},
			// 跟随主题色的改变而改变。
			fllowTheme: {
				type: Boolean | String,
				default: true
			},
			black: {
				type: Boolean | String,
				default: null
			}
		},
		data() {
			return {
				body_height: 0,
				active_barHeight: 0,
				active_barWidth: 0,
				aniOn: false,
				left: 0,
				preventLeft: 0,
				width_item_w: 0,
			};
		},
		watch: {
			value(newValue, oldValue) {
				this.active_index = newValue;
			},
			list: {
				deep: true,
				async handler() {
					this.width_item = this.width;
					await this.setInits();
				}
			}
		},
		computed: {
			width_item: {
				get: function() {
					return this.width_item_w;

				},
				set: function(val) {
					if (val == 0) {
						this.width_item_w = 'auto'
					} else {
						this.width_item_w = (uni.upx2px(val) / this.list.length)
					}

				}
			},
			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.activeFontColor;
			},
			listData: function() {
				return this.list;
			},
			active_index: {
				get: function() {
					return this.value;
				},
				set: function(val) {
					this.active = val;
					this.$emit('input', val);
					this.$emit('update:value', val);
					// this.$emit('change', val);
					this.$nextTick(function() {
						this.setDefaultPos();
					});
				}
			}
		},
		created() {
			this.active_index = this.value;
			this.width_item = this.width;
		},
		mounted() {
			let t = this;
			uni.$tm.sleep(30).then(()=>{
				t.setInits();
				
			})
		},
		methods: {
			setInits() {
				let t = this;
				this.width_item = this.width;
				this.$nextTick(function() {
					uni.createSelectorQuery().in(t).select('.tm-segTabs-wkbody')
						.boundingClientRect().select('#tm-segTabs-item-' + this.active).boundingClientRect()
						.exec(function(tx) {
							
							let p = tx[0]
							if (!p) return;
							t.body_height = p.height;
							t.preventLeft = p.left;

							let p1 = tx[1]
							if (!p1) return;
							t.active_barHeight = p1.height;
							let left = 0;
							if (t.width == 0) {
								t.active_barWidth = p1.width;
								left = p1.left;
							} else {
								t.active_barWidth = t.width_item
								left = t.preventLeft + t.width_item * t.active;
							}

							let lsl = Math.floor((t.gutter / 2))
							t.left = left - t.preventLeft - uni.upx2px(lsl);

							t.aniOn = true;
						})


				});
			},
			returnKeyValue(item) {
				if (typeof item == 'string') {
					return item;
				}
				if (typeof item == 'object') {
					return item[this.rangKey];
				}
			},
			setDefaultPos() {
				let t = this;
				uni.createSelectorQuery().in(t).select('#tm-segTabs-item-' + this.active)
					.boundingClientRect().exec(
						function(p1) {
							if (!p1[0]) return;
							t.active_barHeight = p1[0].height;
							t.active_barWidth = p1[0].width;
							let lsl = Math.floor((t.gutter / 2))

							t.left = p1[0].left - t.preventLeft - uni.upx2px(lsl);
						})



			},
			clickItem(index, item) {
				this.active_index = index;
				this.$emit('change', index);
				this.$nextTick(function() {
					this.setDefaultPos();
				});
			}
		}
	};
</script>

<style lang="scss">
	.tm-segTabs {
		.tm-segTabs-wkbody {
			z-index: 2;

			.tm-segTabs-item {
				transition: all 0.2s linear;
			}
		}

		.tm-segTabs-bg {
			.tm-segTabs-bg-bar {

				&.aniOn {
					transition: all 0.2s ease-in-out;
				}
			}

			box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.02) inset;
		}
	}
</style>