alipay-emulator/components/safeBottom/safeBottom.vue

42 lines
849 B
Vue

<template>
<view class="safeBottomBox">
<view class="safeBottomFiexd" :style="{ height: safeBottomAz + 'px', backgroundColor: bgColor }">
</view>
<view class="safeBottomZhangwei" :style="{ height: safeBottomAz + 'px' }">
</view>
</view>
</template>
<script setup>
import { computed, getCurrentInstance } from 'vue'
const props = defineProps({
bgColor: {
type: String,
default: '#EDEDED'
}
})
const instance = getCurrentInstance()
const safeBottomAz = computed(() => {
const store = instance?.appContext?.config?.globalProperties?.$store
const height = store?.state?.safeBottomAz
return Number(height) || 0
})
</script>
<style lang="scss" scoped>
.safeBottomBox {
width: 100vw;
position: relative;
z-index: 999;
overflow: hidden;
.safeBottomFiexd {
width: 100vw;
position: fixed;
left: 0;
bottom: 0;
}
}
</style>