vue如何全屏（点击一个按钮界面全屏展示）

最新推荐文章于 2024-06-28 09:05:28 发布

DragonZhuCn

最新推荐文章于 2024-06-28 09:05:28 发布

阅读量5.3k

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43813182/article/details/131410616

版权

这段代码展示了如何利用JavaScript的requestFullScreen()和exitFullscreen()方法在浏览器中切换全屏与非全屏模式，同时处理了不同浏览器的兼容性问题。toFullOrExit()函数作为切换开关，根据this.isFull的状态决定进入或退出全屏，并更新提示图片。

摘要由CSDN通过智能技术生成

1，在界面上设置一个div，让用户点击后全屏或者退出全屏。

      <div class="full-screen" @click="toFullOrExit">
        <img :src="fullImg"/>
      </div>

在这里插入图片描述

2，进入全屏和退出全屏的方法

    requestFullScreen () {
      let de = document.documentElement
      if (de.requestFullscreen) {
        de.requestFullscreen()
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen()
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen()
      }
    },
    exitFullscreen () {
      let de = document
      if (de.exitFullscreen) {
        de.exitFullscreen()
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen()
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen()
      }
    },
    toFullOrExit () {
      this.isFull = !this.isFull
      if (this.isFull) {
        this.fullImg = require('@/assets/images/quxiaoquanping.png')
        this.requestFullScreen()
      } else {
        this.fullImg = require('@/assets/images/quanping.png')
        this.exitFullscreen()
      }
    }

这段代码是使用 JavaScript 实现的全屏功能。它定义了三个函数：requestFullScreen()、exitFullscreen() 和 toFullOrExit()。
requestFullScreen() 函数用于请求浏览器进入全屏模式。它首先获取 document.documentElement（文档的根元素），然后通过判断不同浏览器对全屏模式的实现方式，使用对应的方法请求浏览器进入全屏模式。
exitFullscreen() 函数用于退出全屏模式。它同样获取 document，然后通过判断不同浏览器对退出全屏模式的实现方式，使用对应的方法退出全屏模式。
toFullOrExit() 函数是一个触发全屏模式的开关。它根据 this.isFull 的值来决定是进入全屏模式还是退出全屏模式。如果 this.isFull 为真，表示当前需要进入全屏模式，于是将 this.fullImg 设置为一个全屏图片的路径，并调用 requestFullScreen() 函数进入全屏模式；如果 this.isFull 为假，表示当前需要退出全屏模式，于是将 this.fullImg 设置为一个普通图片的路径，并调用 exitFullscreen() 函数退出全屏模式。
总的来说，这段代码实现了在网页中切换全屏模式和普通模式的功能，并可以根据不同浏览器的兼容性来调用相应的全屏方法。