黑豹程序员-vue全屏

最新推荐文章于 2024-07-24 08:47:45 发布

长安紫薯

最新推荐文章于 2024-07-24 08:47:45 发布

阅读量377

点赞数 1

分类专栏：黑豹程序员 Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/nutony/article/details/136146000

版权

黑豹程序员同时被 2 个专栏收录

98 篇文章 3 订阅

订阅专栏

Vue

27 篇文章 0 订阅

订阅专栏

需求

点击按钮全屏

按钮事件

<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()
  }
}