VueUse useScreenSafeArea 屏幕安全区域

VueUse useScreenSafeArea ，由于现在很多手机有刘海屏和水滴屏，我们可以通过该方法来获取屏幕安全区域更好的适配手机,如果要获取安全区域需要在网页同步加入以下代码。

<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />

代码示例

import { useScreenSafeArea } from '@vueuse/core'
import { onMounted } from 'vue';
const {
  top,
  right,
  bottom,
  left,
  update
} = useScreenSafeArea()

onMounted(()=>{
   //重新获取安全区域
  update();
})

组件示例

<template>
  <UseScreenSafeArea top right bottom left>
    content
  </UseScreenSafeArea>
</template>
<script setup lang="ts">  
 //导入组件
 import {UseScreenSafeArea} from '@vueuse/components'
</script>

在线例子

例子