时间：2021-07-21 08:21:52 | 栏目：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键退出全屏，此时是没办法监听到的。经过一番查找，解决办法如下：
<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>
总结