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() 函数退出全屏模式。
总的来说,这段代码实现了在网页中切换全屏模式和普通模式的功能,并可以根据不同浏览器的兼容性来调用相应的全屏方法。

Logo

前往低代码交流专区

更多推荐