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