黑豹程序员-vue全屏

需求

点击按钮全屏

按钮事件

<el-tooltip class="box-item" effect="dark" content="全屏" placement="bottom-end">
            <el-icon @click="toFullOrExit" style="cursor: pointer;"><FullScreen  /></el-icon>
          </el-tooltip>

vue代码

const isFull = ref(false)

const requestFullScreen = () => {
  let de = document.documentElement
  if (de.requestFullscreen) {
    de.requestFullscreen()
  } else if (de.mozRequestFullScreen) {
    de.mozRequestFullScreen()
  } else if (de.webkitRequestFullScreen) {
    de.webkitRequestFullScreen()
  }
}

const exitFullscreen = () => {
  let de = document
  if (de.exitFullscreen) {
    de.exitFullscreen()
  } else if (de.mozCancelFullScreen) {
    de.mozCancelFullScreen()
  } else if (de.webkitCancelFullScreen) {
    de.webkitCancelFullScreen()
  }
}

const toFullOrExit = () => {
  isFull.value = !isFull.value
  if (isFull.value) {
    // this.fullImg = require('@/assets/images/quxiaoquanping.png')
    requestFullScreen()
  } else {
    // this.fullImg = require('@/assets/images/quanping.png')
    exitFullscreen()
  }
}