49 lines
925 B
Vue
49 lines
925 B
Vue
<script setup lang="ts">
|
|
|
|
export interface Props {
|
|
type: "top" | "bottom"
|
|
bgColor: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
type: "top",
|
|
bgColor: "transparent",
|
|
})
|
|
|
|
function getHeight() {
|
|
let _statusBarHeight = 0;
|
|
let _bottom = 0;
|
|
const { statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync()
|
|
const { bottom = 0 } = safeAreaInsets ?? {}
|
|
if (statusBarHeight) {
|
|
_statusBarHeight = statusBarHeight
|
|
}
|
|
if (_statusBarHeight <= 20) {
|
|
_statusBarHeight = 20
|
|
}
|
|
if (bottom) {
|
|
_bottom = bottom
|
|
}
|
|
if (_bottom <= 8) {
|
|
_bottom = 8
|
|
}
|
|
if (props.type && props.type === "bottom") {
|
|
return _bottom + "px"
|
|
}
|
|
if (props.type && props.type === "top") {
|
|
return _statusBarHeight + "px"
|
|
}
|
|
return 20 + "px"
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="safe" :style="{ backgroundColor: props.bgColor, height: getHeight() }"></view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.safe-top {
|
|
width: 100%;
|
|
}
|
|
</style>
|