指定元素全屏与退出全屏，Vue中处理监听esc并修改data数据（监听与作用域问题）

一、效果

• 解决的问题：vue本身监听不到全屏状态中的esc事件，导致无法修改这个按钮的样式icon和tooltip

未全屏时：

全屏时：

二、解决思路

• 一个重要方法：判断当前是否全屏

问题：如果vue本身的话，在esc事件时是不会调用这个方法的

/**

• 浏览器当前是否全屏
• @return {*|boolean}
  */
  export function isFullScreen() {
  return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
  }

• 于是：通过js来监听（并获取vue实例来修改data）

updated() {
   
      	// 作用域this===获取vue的实例
        const that = this
      	window.addEventListener('resize', function () {
   
		//如果直接在这里面使用this关键字，==结果是使用window这个对象
            // debugger
            if (!isFullScreen()) {
   
                // 全屏下按键esc后要执行的动作
                // isclick 为true 此时为全屏状态  false 为非全屏状态
                if(!isFullScreen()) {
   
                    // console.log('按下esc键退出全屏', that)
                    that.isFullScreen = false
                }
            }
    });

    }

三、全屏与退出全屏（工具）

• 工具bom.js中的方法
  引入使用即可：全屏时需要指定一个el元素，默认是全部，需要自己制定

比如我是随便定义一个id，再使用fullScreen(document.getElementById('test'))