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的适用场景
968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
