vue中对监听esc事件和退出全屏问题的解决方案

对监听esc事件和退出全屏问题的解决

vue 的项目中使用了 h5 的全屏 API，在使用esc键退出全屏时，默认调用“ document.exitFullScreen() ” 直接退出，想要做监听并设置业务，需要监听屏幕size变化来出发事件

mounted() {
    
    let that = this
    window.addEventListener('resize', function () {
       if (!that.isFullScreen()) {
         // 非全屏状态
         //业务逻辑
                
       }
    });
}

下面是全屏的完整代码

methods: {
//全屏
  fullele() {
    return (
      document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.msFullscreenElement ||
      document.mozFullScreenElement ||
      null
    );
  },

  //判断是否全屏
  isFullScreen() {
    return !!(document.webkitIsFullScreen || this.fullele());
  },
  //退出全屏
  exitFullscreen() {
    this.fullScreenFlag = false;
    
    if (document.exitFullScreen) {
      document.exitFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    
  },
  //全屏
  full(ele) {
    if (ele.requestFullscreen) {
      ele.requestFullscreen();
    } else if (ele.mozRequestFullScreen) {
      ele.mozRequestFullScreen();
    } else if (ele.webkitRequestFullscreen) {
      ele.webkitRequestFullscreen();
    } else if (ele.msRequestFullscreen) {
      ele.msRequestFullscreen();
    }
  },
  //切换是否全屏 全屏按钮要执行的方法
  toggleFullScreen() {
    if (this.isFullScreen()) {
      this.exitFullscreen();
    } else {
      this.fullScreenFlag = true;
      this.full(document.getElementById("dataMointor")); //要设置全屏的元素
      
    }
    
  }

}

element+vue全屏与退出全屏(监听ESC改样式)

一、效果

esc退出会监听

二、代码

bom.js（工具）

/**
* 浏览器全屏
* @param {HTMLElement} [el=document] 全屏元素
*/
export function fullScreen(el) {
el = el || document.documentElement;
const rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (typeof rfs !== 'undefined' && rfs) {
  rfs.call(el);
}
}
/**
* 退出全屏
*/
export function exitFullScreen() {
if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
  document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
  document.msExitFullscreen();
}
}
/**
* 浏览器当前是否全屏
* @return {*|boolean}
*/
export function isFullScreen() {
return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
}

design.js（通用）

function toggle(ele, that, exitFullScreen, fullScreen) {
if (that.isFullScreen) {
  exitFullScreen()
  that.isFullScreen = false
} else {
  fullScreen(document.getElementById(ele))
  that.isFullScreen = true
}
}
export default {
testVueThis,
toggle
}

- index.vue（示例）

<template>
<my-panel fit
  id="test"
  :shadow="'never'"
  :border="false"
  title="cs">
<div id="test">
  <div >
    <span>cs123</span>
    123
    </div>
  <el-tooltip :content="tooltipText">
    <span style="cursor: pointer">
      <i :class="icon"
        style="font-size: x-large"
        @click="toggle"></i>
    </span>
  </el-tooltip>
</div>
</my-panel>
</template>

<script>
import Design from '@/utils/design'
import { fullScreen, exitFullScreen, isFullScreen } from '$ui/utils/bom'
export default {
data() {
  return {
    isFullScreen: false
  }
},
computed: {
  icon() {
    return this.isFullScreen ? 'el-icon-switch-button' : 'el-icon-full-screen'
  },
  tooltipText() {
    return this.isFullScreen ? '退出全屏' : '全屏'
  }
},
created() {
  // 初始化监听器
  this.resizeListener()
},
methods: {
  resizeListener() {
    const that = this
    window.addEventListener('resize', function () {
      if (!isFullScreen()) {
        if (!isFullScreen()) {
          that.isFullScreen = false
        }
      }
    })
  },
  toggle() {
    Design.toggle('test', this, exitFullScreen, fullScreen)
  }
}
}
</script>
<style>
</style>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程宝库。

我们现在已经知道了Node是单线程运行的，这表示潜在的错误有可能导致线程崩溃，然后进程也会随着退出，无法做到企业追求的稳定性；另一方面，单进程也无法充分多核CPU，这是对硬件本身的浪费。Node社区本身也意识到了这 ...