Skip to content
On this page
useHooks tmui.design

窗口信息 useWindowInfo

获取当前页面的窗口信息,可能是动态变化的。

方法

事件名参数返回数据描述
useWindowInfo-result:Reactive<{}>直接执行即可
ts
// result:返回的结构体:
{
	//正文距离顶部,仅h5下存在系统状态栏是有值,其它平台默认为0
	top:number,
	//顶部安全栏高度,只有在全屏页面无系统状态栏时,会有值,其它平台或者场景为0
	topSafe:number,
	width: number,
	height: number,
	statusBar: number,
	navigatorBar: number,
	//底部安全栏高度
	bottomSafe: number,
	// 当前是否是nvue页面
	nvue:boolean,
	// 是否存在系统自带的状态栏,针对h5优化。仅h5下有效
	h5IsSystemBar:boolean
}

使用

ts
import { useWindowInfo } from '@/tmui/tool/useFun/useWindowInfo'
const winSize = useWindowInfo();
// 打印,注意它的尺寸可能是动态变化的。因为是在onMounted中取得,窗口尺寸变化,也可能导致变化。
console.log(winSize)

注意事项

查询的结果尺寸可能是动态变化的。因为是在onMounted中取得,窗口尺寸变化,也可能导致变化。