vue监听全屏

2022-08-10  本文已影响0人  等级7
data() {
    return {
      fullscreen: false // 全屏状态 true为全屏 false反之
    };
  },
  mounted() {
    window.onresize = () => {
      if (!this.checkFull()) {
        这里添加全屏事件
只会添加一次,如果是循环,则相当于只有最后一个才生效
        this.fullscreen = false;
      }
    };
  },
  destroyed() {
    this.players.destroy();
  },
  methods: {
    // 判断全屏
    checkFull() {
      //判断浏览器是否处于全屏状态 (需要考虑兼容问题)
      //火狐浏览器
      let isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },}
上一篇 下一篇

猜你喜欢

热点阅读