(文章目录)
一、前言
项目开发过程中，优化项目时考虑加入全屏功能。具体实践步骤如下：
二、安装依赖
项目中使用的是sreenfull插件，执行命令安装：
npm install --save screenfull
三、应用
组件安装好后，引入项目，用一个按钮进行控制即可，通过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>
