staff/components/SafeAreaTop/index.vue

33 lines
795 B
Vue

<template>
<view class="safe-area-top" :style="{ height: statusBarHeight + 'px' }"></view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const statusBarHeight = ref(0)
onMounted(() => {
// #ifdef APP-PLUS || MP-WEIXIN
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight || 0
// #endif
// #ifdef H5
if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
// 微信浏览器中使用状态栏高度
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight || 0
} else {
// 非微信浏览器给一个固定高度
statusBarHeight.value = 20
}
// #endif
})
</script>
<style lang="scss" scoped>
.safe-area-top {
width: 100%;
}
</style>