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改样式)

一、效果

vue中对监听esc事件和退出全屏问题的解决方案_第1张图片

vue中对监听esc事件和退出全屏问题的解决方案_第2张图片

esc退出会监听

vue中对监听esc事件和退出全屏问题的解决方案_第3张图片

二、代码

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(示例)



以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的:(vue中对监听esc事件和退出全屏问题的解决方案)