美文网首页
vue监听全屏

vue监听全屏

作者: 等级7 | 来源:发表于2022-08-10 11:10 被阅读0次
    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;
        },}
    

    相关文章

      网友评论

          本文标题:vue监听全屏

          本文链接:https://www.haomeiwen.com/subject/mozowrtx.html