vue点击网页全屏_vue实现浏览器全屏展示功能

1、项目中使用的是sreenfull插件，执行命令安装

npm install --save screenfull

2、安装好后，引入项目，用一个按钮进行控制即可，按钮方法如下：

toggleFullscreen() {

if (!screenfull.enabled) {

this.$message({

message: 'you browser can not work',

type: 'warning'

})

return false

}

screenfull.toggle()

}

试了一下可以全屏，我用的chrome，IE9以下不要考虑

3、第一步完成之后就是怎么监听到全屏的变化，因为如果是通过Esc键退出全屏，此时是没办法监听到的。经过一番查找，解决办法如下：

import screenfull from 'screenfull'

export default {

data () {

return {

isFullscreen: false

}

}，

methods: {

/**

* 全屏事件

screenfull() {

if (!screenfull.enabled) {

this.$message({

message: 'Your browser does not work',

type: 'warning'

})

return false

}

screenfull.toggle()

this.isFullscreen = true

/**

* 是否全屏并按键ESC键的方法

checkFull() {

var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled

// to fix : false || undefined == undefined

if (isFull === undefined) {

isFull = false

}

return isFull

}

mounted() {

window.onresize = () => {

// 全屏下监控是否按键了ESC

if (!this.checkFull()) {

// 全屏下按键esc后要执行的动作

this.isFullscreen = false

}

总结

以上所述是小编给大家介绍的vue实现浏览器全屏展示功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue点击网页全屏_vue实现浏览器全屏展示功能相关推荐

vue点击网页全屏_vue中实现点击变成全屏的多种方法
项目中有点击按钮实现全屏功能方式一:js实现全屏全屏 data: data() { return { fullscreen: false }; }, methods: screen() { let ...
vue点击网页全屏_vue-cli点击实现全屏功能(两种方式)
项目中有点击按钮实现全屏功能方式一:js实现全屏代码如下: 全屏 export default { name: "index", data(){ return{ fullscr ...
前端js使浏览器窗口全屏与退出----浏览器全屏时监测通过esc按键退出全屏（退出全屏时有页面上的相关处理）
vue项目项目分为顶部导航.侧边导航.以及右边mainContent区域需求是让项目的其中一个页面有全屏功能并且在全屏时隐藏掉顶部的顶导航栏实现: 1.在state里定义一个全局 ...
html控制浏览器全屏,JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件_javascript技巧...
HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...
关于全屏显示，浏览器全屏、窗口/页面全屏
1.浏览器全屏 (1)全屏显示 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm. ...
vue 点击弹出文字_vue事件点击穿透解决大法，看这篇文章就够了
作者/sherry 最近在做项目的过程中遇到一个非常奇葩的bug,在h5页面点击一个按钮弹出弹窗,但是这个弹窗刚出现就会自动消失,导致屏幕出现闪动现象,关键这个bug还是偶现的. 经过一番研究才发现是 ...
vue 点击div 获取位置_Vue中组件之间8种通信方式，值得收藏
之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么 ...
vue 点击div 获取位置_vue接入腾讯位置服务之点击事件
1.[调用展示] //先在vue的index.html里面引入腾讯地图包 //.vue export default{ mounted() { this.init(); }, methods:{ in ...
vue 点击弹出文字_vue实现点击出现操作弹出框的示例
如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽,我们可以根据不同的场景,利用插槽随意在这个弹框里 ...
vue点击改变data值_vue 中自定义指令改变data中的值
通过局部自定义指令实现了一个拖动的指令 html: script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives: ...

vue点击网页全屏_vue实现浏览器全屏展示功能

vue点击网页全屏_vue实现浏览器全屏展示功能相关推荐

最新文章

热门文章