Skip to content

ProToggleFullScreen ​

ProToggleFullScreen 是一个用于切换全屏状态的 Vue 3 组件。它依赖于 @vueuse/core 的 useFullscreen 组合式函数,实现对指定元素的全屏控制。组件会根据当前的全屏状态显示不同的图标,点击图标即可在全屏和退出全屏之间切换。

基础用法 ​

Default
expand codecollapse code

指定需要全屏的元素 ​

这是需要全屏显示的内容。

Default
expand codecollapse code

自定义全屏和退出全屏的图标 ​

Default
expand codecollapse code

属性 (Props) ​

参数类型默认值描述
targetMaybeElementRef—可选,需要全屏的目标元素,默认为文档
heightnumber24图标的高度,单位为像素
widthnumber24图标的宽度,单位为像素
fullScreenIconstring'ant-design:fullscreen-outlined'进入全屏状态时显示的图标
exitFullScreenIconstring'ant-design:fullscreen-exit-outlined'退出全屏状态时显示的图标