项目中有要实现全屏的需求,而且全屏和非全屏的状态有差异。
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键退出全屏,此时是没办法监听到的。经过一番查找,解决办法如下:
<script>
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
}
}
}
}
</script>
其实主要是增加了对Esc键一个监听,然后进行相应处理,这样一个全屏切换就完成啦