VUE3中实现浏览器全屏功能

1.安装screenfull

npm install screenfull

2.在vue页面中引入

import screenfull from 'screenfull'

3.定义全屏方法

const SetFullScreen = () => {

//screenfull.isEnabled 此方法返回布尔值，判断当前能不能进入全屏

if (!screenfull.isEnabled) {

return false

}

//screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏

screenfull.toggle()

}

4.调用方法

<el-button type="primary"

@click="SetFullScreen">全屏</el-button>

VUE3中实现浏览器全屏功能相关推荐

JS全屏代码，解决PDF.js在iframe中部分浏览器全屏功能错误
JS全屏代码,解决PDF.js在iframe中部分浏览器全屏功能错误 PDF.js在iframe模式在火狐浏览器中按钮被屏蔽经分析,viewer.js 发现了判断逻辑 debug发现第二个判断后为 ...
vue项目中实现浏览器全屏 - screenfull
浏览器中自带全屏功能,不过有兼容性问题,所以改用插件 document.documentElement.webkitRequestFullScreen() 使用screenFull插件来提供全屏功能 ...
设置浏览器横屏可行性测试，附带浏览器全屏功能
输入法问题: 1.QQ浏览器.UC浏览器可通过标签设置横屏(这种模式下输入法也是横屏状态) <meta name='full-screen' content='true' /><me ...
Html5结合JS实现浏览器全屏功能
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
浏览器全屏功能 icon图标设置
如图,通过点击全屏图标实现页面全屏/取消全屏功能,类似浏览器f11. 一.icon图标选择: 这里偷懒使用的阿里巴巴矢量图标库,当然也可以自己找ui设计一个,地址:icon图标库,icon相关代码如下 ...
esc键退出全屏 vue_vue中实现浏览器全屏与退出全屏功能
在标签中主要是放一个全屏与退出全屏的按钮,并绑定上点击事件 fullScreenClick .全屏与退出全屏的按钮显示切换是通过变量 fullScreen 控制的. :content="f ...
vue中实现浏览器全屏放大
方法一: (1).先下载 npm i screenfull (2).在需要的页面引入 import screenfull from 'screenfull' (3) 给一个点击事件 @click=&q ...
全屏功能-实现全屏-图标切换
目标:添加一个按钮,实现全屏网页全屏切换实现方法:浏览器中自带全屏功能document.documentElement.webkitRequestFullScreen(),不过有兼容性问题,所以改用 ...
JavaScript 控制浏览器全屏展示
JavaScript 控制浏览器全屏展示前言一.全屏区分二.HTML Dom 全屏模式展开全屏退出全屏三.兼容 IE 10 及以下方式 DEMO 总结前言浏览器全屏功能解释一.全屏 ...

VUE3中实现浏览器全屏功能

VUE3中实现浏览器全屏功能相关推荐

最新文章

热门文章