526互联

前端 手动全屏

发布时间 2023-07-13 18:21:56作者: 嗷呜~

手动点击设置全屏/退出全屏

html

<div style="height:100%" v-if="isReloadData">
      <div  @click="fullScreen()">{{ isFullScreen ? '退出全屏' : '全屏展示' }}</div>
</div>

js

export default {
    data() {
        return {
            isFullScreen: false,
              isReloadData:true,
        }
    }
}
// 全屏
    fullScreen() {
      const docElm = document.documentElement
      if (this.isFullScreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        }
      } else {
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen()
        } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen()
        } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen()
        } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen()
        }
      }
      this.isFullScreen = !this.isFullScreen
      this.isReloadData = false
      this.$nextTick(()=>{
        this.isReloadData = true  // 重新渲染数据
        this.getList()
      })
      
    },