vue判断是否全屏状态
(1)使用screenfull来解决全屏操作(2)利用监听事件,来改变isFullscreen的值,进而控制页面展示“全屏”图标,还是“退出全屏"1.安装screenfull.js
·
(1)使用screenfull来解决全屏操作
(2) 利用监听事件,来改变isFullscreen的值,进而控制页面展示“全屏”图标,还是“退出全屏"
1.安装screenfull.js
npm install --save screenfull
2、在相应的组件引入screenful,我的js部分的代码如下:
import screenfull from 'screenfull'
3.使用
created() {
// 监听事件
window.addEventListener('resize', this.onresize)
},
beforeDestroy() {
// 取消监听事件
window.removeEventListener('resize', this.onresize)
},
methods:{
// 监听是否全屏状态
onresize(event) {
// 利用屏幕分辨率和window对象的内高度来判断兼容IE
let winFlag = window.innerHeight === window.screen.height
// 利用window全屏标识来判断 -- IE无效
let isFull = window.fullScreen || document.webkitIsFullScreen
if (isFull === undefined) {
this.isFullscreen = winFlag
} else {
this.isFullscreen = winFlag || isFull
}
console.log(winFlag); // true全屏 false不是全屏
}
}
更多推荐
所有评论(0)