vue项目中实现浏览器全屏

浏览器中自带全屏功能，不过有兼容性问题，所以改用插件

document.documentElement.webkitRequestFullScreen()

使用screenFull插件来提供全屏功能

安装插件

npm i screenfull

使用插件

在全屏组件中引入 import screenfull from 'screenfull'

给icon 添加点击事件

<el-icon size="18px" @click="magnify"><full-screen /></el-icon>

const magnify = () => {;(screenfull as any).toggle()
}

实现效果

vue项目中实现浏览器全屏 - screenfull相关推荐

Vue项目中监听全屏事件，实现全屏功能和按esc退出全屏（解决全屏踩坑难题）
展示效果: 全屏功能代码: <el-buttontype="button"id="full-btn-medium"@click="VideoF ...
JS全屏代码，解决PDF.js在iframe中部分浏览器全屏功能错误
JS全屏代码,解决PDF.js在iframe中部分浏览器全屏功能错误 PDF.js在iframe模式在火狐浏览器中按钮被屏蔽经分析,viewer.js 发现了判断逻辑 debug发现第二个判断后为 ...
vue项目中解决浏览器刷新vuex数据消失问题
vue项目中解决浏览器刷新vuex数据消失问题说明 vuex中的数据经过浏览器刷新后会消失,所以应设置在浏览器刷新之前将数据存入浏览器或者cookie中. 操作打开App.vue,在created ...
整理各种Vue项目在IE浏览器白屏报错 SCRIPT1002:语法错误
目录一.关于 sockjs-client 依赖包二.关于 highlight 依赖包三.关于 swiper 依赖包四.IE 不支持 ES6 语法五.第三方插件引入导致六.本地环境正常,生产 ...
VUE3中实现浏览器全屏功能
1.安装screenfull npm install screenfull 2.在vue页面中引入 import screenfull from 'screenfull' 3.定义全屏方法 const ...
vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页与 A页面来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
浏览器全屏——screenfull
一.npm包地址 screenfull - npm 二.安装使用安装: npm install screenfull 使用 import screenfull from 'screenfull'; ...
vue项目中设置浏览器图标
如何设置项目运行时在浏览器网页窗口中图标的显示,请如下操作: 通过看vue项目的目录结构,根目录下有一个index.html,这个就相当于我们普通项目中的各个html页面文件,所以设置方法就是在ind ...
vue项目在ie浏览器白屏不显示问题
以下是我在开发中所遇到的ie兼容问题,原因有以下几种 1.是否有使用localStorage的相关插件,ie对localStorage的支持不是很好.基本的原生方法可以使用,但如果过于复杂繁琐就会出问 ...

vue项目中实现浏览器全屏 - screenfull

vue项目中实现浏览器全屏 - screenfull相关推荐

最新文章

热门文章