mall-front-app/sheep/ui/su-tabbar/su-tabbar.vue

<!-- 底部导航栏 -->
<template>
	<view class="u-tabbar">
		<view class="u-tabbar__content" ref="u-tabbar__content" @touchmove.stop.prevent=""
			:class="[border && 'u-border-top', fixed && 'u-tabbar--fixed', { 'mid-tabbar': midTabBar }]"
			:style="[tabbarStyle]">
			<view class="u-tabbar__content__item-wrapper">
				<slot></slot>
			</view>
			<view v-if="safeAreaInsetBottom" :style="[{ height: safeBottomHeight + 'px' }]"></view>
		</view>
		<view class="u-tabbar__placeholder" v-if="placeholder" :style="{
        height: placeholderHeight + 'px',
      }"></view>
	</view>
</template>

<script>
	// #ifdef APP-NVUE
	const dom = uni.requireNativePlugin('dom');
	// #endif
	/**
	 * Tabbar 底部导航栏
	 * @description 此组件提供了自定义tabbar的能力。
	 * @property {String | Number}	value				当前匹配项的name
	 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离（默认 true ）
	 * @property {Boolean}			border				是否显示上方边框（默认 true ）
	 * @property {String | Number}	zIndex				元素层级z-index（默认 1 ）
	 * @property {String}			activeColor			选中标签的颜色（默认 '#1989fa' ）
	 * @property {String}			inactiveColor		未选中标签的颜色（默认 '#7d7e80' ）
	 * @property {Boolean}			fixed				是否固定在底部（默认 true ）
	 * @property {Boolean}			placeholder			fixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ）
	 * @property {Object}			customStyle			定义需要用到的外部样式
	 *
	 */

	import {
		deepMerge,
		addStyle,
		sleep
	} from '@/sheep/helper';
	import sheep from '@/sheep';

	export default {
		name: 'su-tabbar',
		props: {
			customStyle: {
				type: [Object, String],
				default: () => ({}),
			},
			customClass: {
				type: String,
				default: '',
			},
			// 跳转的页面路径
			url: {
				type: String,
				default: '',
			},
			// 页面跳转的类型
			linkType: {
				type: String,
				default: 'navigateTo',
			},
			// 当前匹配项的name
			value: {
				type: [String, Number, null],
				default: '',
			},
			// 是否为iPhoneX留出底部安全距离
			safeAreaInsetBottom: {
				type: Boolean,
				default: true,
			},
			// 是否显示上方边框
			border: {
				type: Boolean,
				default: true,
			},
			// 元素层级z-index
			zIndex: {
				type: [String, Number],
				default: 10,
			},
			// 选中标签的颜色
			activeColor: {
				type: String,
				default: '#1989fa',
			},
			// 未选中标签的颜色
			inactiveColor: {
				type: String,
				default: '#7d7e80',
			},
			// 是否固定在底部
			fixed: {
				type: Boolean,
				default: true,
			},
			// fixed定位固定在底部时，是否生成一个等高元素防止塌陷
			placeholder: {
				type: Boolean,
				default: true,
			},
			midTabBar: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				placeholderHeight: 0,
				safeBottomHeight: sheep.$platform.device.safeAreaInsets.bottom,
			};
		},
		computed: {
			tabbarStyle() {
				const style = {
					zIndex: this.zIndex,
				};
				// 合并来自父组件的customStyle样式
				return deepMerge(style, addStyle(this.customStyle));
			},
			// 监听多个参数的变化，通过在computed执行对应的操作
			updateChild() {
				return [this.value, this.activeColor, this.inactiveColor];
			},
			color() {
				return this.inactiveColor;
			},
			updatePlaceholder() {
				return [this.fixed, this.placeholder];
			},
		},
		watch: {
			updateChild() {
				// 如果updateChildren中的元素发生了变化，则执行子元素初始化操作
				this.updateChildren();
			},
			updatePlaceholder() {
				// 如果fixed，placeholder等参数发生变化，重新计算占位元素的高度
				this.setPlaceholderHeight();
			},
		},
		created() {
			this.children = [];
		},
		mounted() {
			this.setPlaceholderHeight();
		},
		methods: {
			updateChildren() {
				// 如果存在子元素，则执行子元素的updateFromParent进行更新数据
				this.children.length && this.children.map((child) => child.updateFromParent());
			},
			getRect(selector, all) {
				return new Promise((resolve) => {
					uni.createSelectorQuery()
						.in(this)[all ? 'selectAll' : 'select'](selector)
						.boundingClientRect((rect) => {
							if (all && Array.isArray(rect) && rect.length) {
								resolve(rect);
							}
							if (!all && rect) {
								resolve(rect);
							}
						})
						.exec();
				});
			},
			// 设置用于防止塌陷元素的高度
			async setPlaceholderHeight() {
				if (!this.fixed || !this.placeholder) return;
				// 延时一定时间
				await sleep(20);
				// #ifndef APP-NVUE
				this.getRect('.u-tabbar__content').then(({
					height = 50
				}) => {
					// 修复IOS safearea bottom 未填充高度
					this.placeholderHeight = height;
				});
				// #endif

				// #ifdef APP-NVUE
				dom.getComponentRect(this.$refs['u-tabbar__content'], (res) => {
					const {
						size
					} = res;
					this.placeholderHeight = size.height;
				});
				// #endif
			},
		},
	};
</script>

<style lang="scss" scoped>
	.u-tabbar {
		display: flex;
		flex: 1;
		justify-content: center;

		&__content {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			box-shadow: 0px -2px 4px 0px rgba(51, 51, 51, 0.06);

			&__item-wrapper {
				height: 50px;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		}

		.mid-tabbar {
			border-radius: 30rpx 30rpx 0 0;
		}

		&--fixed {
			position: fixed;
			bottom: -1px;
			left: 0;
			right: 0;
		}
	}
</style>