美文网首页
requestFullscreen()方法实现全屏显示

requestFullscreen()方法实现全屏显示

作者: zhao_ran | 来源:发表于2022-08-03 20:18 被阅读0次
    <template>
      <div class="app-container" ref="apps">
        <el-button @click="handleFullscreen">test</el-button>
      </div>
    </template>
    
    isFullScreen() {
          return !!(
            document.fullscreen ||
            document.mozRequestFullScreen ||
            document.webkitRequestFullscreen ||
            document.msRequestFullscreen ||
            document.fullscreenElement
          );
        },
        handleFullscreen() {
          this.fullscreen = !this.isFullScreen();
          if (this.fullscreen) {
            this.launchIntoFullscreen();
          } else {
            this.exitFullscreen();
          }
        },
        launchIntoFullscreen() {
          // 全屏
          const element = this.$refs["apps"];
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
          } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
          }
        },
        exitFullscreen() {
          // 退出全屏
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          }
        },
    

    相关文章

      网友评论

          本文标题:requestFullscreen()方法实现全屏显示

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