跳到主要内容

useScreenSafeArea

分类
导出大小
1.63 kB
上次更改
2 个月前

响应式 env(safe-area-inset-*)

image

演示

顶部
右侧
底部
左侧

用法

为了使页面在屏幕上完全渲染,必须首先在 viewport meta 标签中设置附加属性 viewport-fit=cover,viewport meta 标签可能如下所示

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

然后我们可以在组件中使用 useScreenSafeArea,如下所示

ts
import { 
useScreenSafeArea
} from '@vueuse/core'
const {
top
,
right
,
bottom
,
left
,
} =
useScreenSafeArea
()

欲了解更多详情,请参阅此文档:为 iPhone X 设计网站

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法

vue
<template>
  <UseScreenSafeArea 
top
right
bottom
left
>
content </UseScreenSafeArea> </template>

类型声明

ts
/**
 * Reactive `env(safe-area-inset-*)`
 *
 * @see https://vueuse.org.cn/useScreenSafeArea
 */
export declare function 
useScreenSafeArea
(): {
top
:
ShallowRef
<string, string>
right
:
ShallowRef
<string, string>
bottom
:
ShallowRef
<string, string>
left
:
ShallowRef
<string, string>
update
: () => void
} export type
UseScreenSafeAreaReturn
=
ReturnType
<typeof
useScreenSafeArea
>

来源

源码演示文档

贡献者

Anthony Fu
Anthony Fu
IlyaL
Melkumyants Danila
Fernando Fernández
vaakian X
Ayaka Rizumu
Jelf

更新日志

8c521 - feat(components)!: 重构组件并使其保持一致 (#4912)
v13.4.0
ae573 - 修复:更改了初始值更新 (#4789)
v12.4.0
dd316 - feat: 尽可能在所有地方使用被动事件处理程序 (#4477)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)

根据 MIT 许可证发布。