70 lines
1.2 KiB
Vue
70 lines
1.2 KiB
Vue
<!-- 底部固定布局组件 -->
|
||
<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>
|