<!-- 底部固定布局组件 -->
<template>
	<view class="BottomFixed" :style="[styleCom]">
		<view class="BottomNavBarFixed" :style="{height: barHeightCom, bottom: fixedBottomCom, 'background-color': bgColor}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'BottomFixed',
		props: {
			// 高度
			barHeight: {
				type: [String, Number],
				default: 60
			},
			// 单位
			unit: {
				type: String,
				default: 'px'
			},
			// 背景色
			bgColor: {
				type: String,
				default: ''
			},
			// 组件外层元素是否需要高度
			pHasH: {
				type: Boolean,
				default: true
			},
			// 固定偏移距离
			fixedBottom: {
				type: [String, Number],
				default: 0
			}
		},
		computed: {
			styleCom　() {
				if (this.pHasH) {
					return {
						height: `${this.barHeight}${this.unit}`
					}
				}
				return {}
			},
			barHeightCom () {
				return `${this.barHeight}${this.unit}`
			},
			fixedBottomCom () {
				return `${this.fixedBottom}${this.unit}`
			}
		}
	}
</script>

<style lang="scss" scoped>
.BottomFixed {
	position: relative;
	
	.BottomNavBarFixed {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
}
</style>
