Skip to content

ProToggleFullScreen

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

基础用法

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'退出全屏状态时显示的图标