vue3 使用screenfull插件全屏显示页面、全屏显示元素DOM节点 |
您所在的位置：网站首页 › 网页如何退出全屏显示页面 › vue3 使用screenfull插件全屏显示页面、全屏显示元素DOM节点 |
vue3 使用screenfull插件全屏显示页面、全屏显示元素DOM节点
|
需求背景：移动端打开网站，发现不能充分利用屏幕空间，浏览器自带的全屏功能很难找，用户体验较差。并且有些元素比如图片需要去放大看，这时如果点击就能全屏，再点击就退出，用户体验可以提升。 Step1：安装第三方插件screenfullNpm官方地址：https://www.npmjs.com/package/screenfull 执行命令安装依赖： npm install screenfull save step2：vue中引入使用screenfull.isFullscreen：检测是否全屏 screenfull.isEnabled：检测是否支持全屏 screenfull.request()：进入全屏 screenfull.exit()：退出全屏，注意是退回到进入全屏的状态 screenfull.toggle()：切换全屏，较常用 import screenfull from 'screenfull' const handleFullScreen = () => { // 检测当前是否全屏，如果是全屏就退出，否则就全屏 console.log(screenfull.isFullscreen) if (screenfull.isFullscreen) { isFullScreenTag.value = false screenfull.toggle() // screenfull.exit() } else { // 进入全屏 isFullScreenTag.value = true screenfull.toggle() // screenfull.request() } } Step3：封装成工具给其它组件用、精简setup // 封装：切换全屏 const useScreenfullEffect = () => { const isFullScreenTag = ref(false) const handleFullScreen = () => { if (screenfull.isEnabled) { // 检测当前是否全屏，如果是全屏就退出，否则就全屏 if (screenfull.isFullscreen) { screenfull.toggle() isFullScreenTag.value = false // screenfull.exit() } else { // 进入全屏 screenfull.toggle() isFullScreenTag.value = true // screenfull.request() } } else { alert('提示：不支持切换全屏。') } } return { isFullScreenTag, handleFullScreen } } Step4：升级工具：全屏展示dom节点用screenfull.toggle(element)，可以来回切换，不用判断是否全屏 思考：页面是否也可以不用判断？ Div中传递当前点击的dom节点 // 封装：整个页面、元素切换全屏 const useScreenfullEffect = () => { const isFullScreenTag = ref(false) // 检测当前页面是否全屏，如果是全屏就退出，否则就全屏 const handleFullScreen = () => { if (screenfull.isEnabled) { if (screenfull.isFullscreen) { screenfull.toggle() isFullScreenTag.value = false // screenfull.exit() } else { // 进入全屏 screenfull.toggle() isFullScreenTag.value = true // screenfull.request() } } else { alert('提示：不支持切换全屏。') } } // 点击当前元素进入全屏，一般为图片 const handleFullscreenElement = (element) => { if (screenfull.isEnabled) { screenfull.toggle(element) } else { alert('提示：不支持切换全屏。') } } return { isFullScreenTag, handleFullScreen, handleFullscreenElement } } |
【本文地址】
今日新闻 |
推荐新闻 |