VueUse中文文档useScreenSafeArea
响应式 env(safe-area-inset-*)
Reactive env(safe-area-inset-*)
例子
top:
right:
bottom:
left:
Usage
为了使页面完全呈现在屏幕上，必须首先在 viewport 的meta中设置额外的属性 viewport-fit=cover ，viewport的meta标签可能看起来像这样:
In order to make the page to be fully rendered in the screen, the additional attribute viewport-fit=cover within viewport meta tag must be set firstly, the viewport meta tag may look like this:
html
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
然后我们可以在组件中使用 useScreenSafeArea ，如下所示:
Then we could use useScreenSafeArea in the component as shown below:
ts
import { useScreenSafeArea } from '@vueuse/core'
const {
top,
right,
bottom,
left,
} = useScreenSafeArea()
import { useScreenSafeArea } from '@vueuse/core'
const {
top,
right,
bottom,
left,
} = useScreenSafeArea()
更多详细信息，您可以参考此文档：Designing Websites for iPhone X
For further details, you may refer to this documentation: Designing Websites for iPhone X
Component Usage
该函数还通过
@vueuse/components提供了一个无渲染的组件版本。了解更多.
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<UseScreenSafeArea top right bottom left>content</UseScreenSafeArea>
<UseScreenSafeArea top right bottom left>content</UseScreenSafeArea>
Type Declarations
typescript
/**
* Reactive `env(safe-area-inset-*)`
*
* @see https://vueuse.org/useScreenSafeArea
*/
export declare function useScreenSafeArea(): {
top: Ref<string>
right: Ref<string>
bottom: Ref<string>
left: Ref<string>
update: () => void
}
/**
* Reactive `env(safe-area-inset-*)`
*
* @see https://vueuse.org/useScreenSafeArea
*/
export declare function useScreenSafeArea(): {
top: Ref<string>
right: Ref<string>
bottom: Ref<string>
left: Ref<string>
update: () => void
}