<template>
<div>
<button @click="enterFullscreen">点击进入全屏</button>
</div>
</template>
<script>
export default {
methods: {
enterFullscreen() {
const isFullscreen = document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement
if (!isFullscreen) {
document.documentElement.requestFullscreen()
} else {
document.exitFullscreen()
}
},
toggleFullscreenBtn() {
const isFullscreen = document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement
const btn = document.querySelector('button')
if (isFullscreen) {
btn.textContent = '退出全屏'
} else {
btn.textContent = '进入全屏'
}
}
},
mounted() {
document.addEventListener('fullscreenchange', this.toggleFullscreenBtn)
document.addEventListener('mozfullscreenchange', this.toggleFullscreenBtn)
document.addEventListener('webkitfullscreenchange', this.toggleFullscreenBtn)
document.addEventListener('MSFullscreenChange', this.toggleFullscreenBtn)
},
beforeDestroy() {
document.removeEventListener('fullscreenchange', this.toggleFullscreenBtn)
document.removeEventListener('mozfullscreenchange', this.toggleFullscreenBtn)
document.removeEventListener('webkitfullscreenchange', this.toggleFullscreenBtn)
document.removeEventListener('MSFullscreenChange', this.toggleFullscreenBtn)
}
}
</script>
<style>
div {
height: 100vh;
width: 100vw;
/* 其他样式 */
}
</style>
Vue 中实现点击 进入F11全屏
于 2023-05-18 18:16:20 首次发布
该代码示例展示了如何在Vue.js组件中实现全屏模式的进入和退出功能。通过检查`document.fullscreenElement`等属性来判断当前是否为全屏状态,并添加事件监听器在全屏状态改变时更新按钮文本。
摘要由CSDN通过智能技术生成