vue项目实现全屏,退出全屏，图标切换的解决方案

vue项目点击按钮实现全屏很容易，点击按钮退出全屏也很容易。

fullScreen(){

var element=document.documentElement;

if (element.requestFullscreen) {

element.requestFullscreen();

} else if (element.msRequestFullscreen) {

element.msRequestFullscreen();

} else if (element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if (element.webkitRequestFullscreen) {

element.webkitRequestFullscreen();

}

},

exitFullScreen(){

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.webkitExitFullscreen) {

document.webkitExitFullscreen();

};

}

现在的问题是：退出全屏有多种方式：有通过点击退出全屏按钮，有按Esc键，还有鼠标移动到中间顶部显示的那个关闭按钮 ，我们的要求是退出全屏要变换图标和显示的字。

解决方法：监听屏幕变化，一旦变化变判断是否全屏，从而实现图标正常切换。

一：下载引入screenfull 插件

npm install screenfull --save

//在调用全屏功能的组件中引入

import screenfull from 'screenfull'

1234

二：定义全屏切换函数

toggleFullscreen () {

if(!screenfull.isEnabled){ //判断一下浏览器是否支持全屏显示

this.$message({

message:'浏览器不能全屏',

type:'warning'

})

return false

}

screenfull.toggle() //进行全屏切换

},

12345678910

三：调用切换全屏函数

123456

四：监听窗口大小变化，判断是否全屏

// 监听窗口大小改变，screenfull.isFullscreen的值为是否全屏，若是则true，反之false

window.onresize = () => {

this.isScreenFull = screenfull.isFullscreen

}

完整代码：

import screenfull from 'screenfull' //全屏功能

export default {

data () {

return {

isScreenFull:false //是否全屏

}

},

mounted () {

// 监听窗口大小改变，screenfull.isFullscreen的值为是否全屏，若是则true，反之false

window.onresize = () => {

this.isScreenFull = screenfull.isFullscreen

}

},

methods: {

toggleFullscreen () {

if(!screenfull.isEnabled){ //判断一下浏览器是否支持全屏显示

this.$message({

message:'浏览器不能全屏',

type:'warning'

})

return false

}

screenfull.toggle()

},

},

}

上一篇：vue中如何使用延时加载，import的重要作用   下一篇：vue中store.state、$store.state和this.$store.state的适用场景