vue 使用screenfull全屏插件后,F11和ESC导致的问题解决
我们在使用screenfull插件时,会产生几个问题:
1.F11的全屏无法监听到
2.ESC的监听(尤其是在使用F11开启全屏后,ESC无法监听)
主要解决方法可参考如下代码:
import screenfull from 'screenfull'//引入插件 //全屏判断(判断全屏和非全屏图标的转换) const isFullscreen = ref(false) //全屏展示 const fullScreen = () => { //判断当前窗口是否允许全屏 if (screenfull.isEnabled && !screenfull.isFullscreen) { screenfull.request() isFullscreen.value = true } } //退出全屏 const exitFullScreen = () => { //判断当前窗口是否允许全屏 if (screenfull.isEnabled && screenfull.isFullscreen) { screenfull.exit() isFullscreen.value = false } } // F11监听方法 const KeyDown = (e) => { //F11按键触发全屏事件 if (e.keyCode === 122) { //阻止F11案件默认事件,通过调用screenfull的方法来实现全屏和非全屏操作(这一步非常重要!!!!!) e.preventDefault(); screenfull.toggle() } } // 组件挂载后 onMounted(() => { //监听screenfull属性的变化来改变图标 screenfull.on('change', () => { screenfull.isFullscreen ? (isFullscreen.value = true) : (isFullscreen.value = false) }) // 针对f11全屏无法监听问题 window.addEventListener('keydown', KeyDown, true) }) // 组件卸载前 onBeforeUnmount(() => { screenfull.on('off', () => {}) })