vue实现点击全屏
实现点击全屏功能
在Vue中实现点击全屏功能可以通过浏览器的Fullscreen API完成。以下是一个完整的实现方案：
安装screenfull依赖
Screenfull是一个跨浏览器的全屏API封装库，简化了不同浏览器的兼容性问题：
npm install screenfull基本组件实现
创建一个可复用的全屏按钮组件：
<template>
<button @click="toggleFullscreen">
{{ isFullscreen ? '退出全屏' : '全屏显示' }}
</button>
</template>
<script>
import screenfull from 'screenfull'
export default {
data() {
return {
isFullscreen: false
}
},
mounted() {
if (screenfull.isEnabled) {
screenfull.on('change', () => {
this.isFullscreen = screenfull.isFullscreen
})
}
},
methods: {
toggleFullscreen() {
if (screenfull.isEnabled) {
screenfull.toggle()
} else {
alert('您的浏览器不支持全屏功能')
}
}
},
beforeDestroy() {
if (screenfull.isEnabled) {
screenfull.off('change')
}
}
}
</script>针对特定元素全屏
如果需要让页面中特定元素全屏而非整个页面：
<template>
<div ref="fullscreenElement">
<!-- 内容 -->
<button @click="toggleElementFullscreen">全屏显示元素</button>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
methods: {
toggleElementFullscreen() {
if (screenfull.isEnabled) {
screenfull.toggle(this.$refs.fullscreenElement)
}
}
}
}
</script>原生API实现方案
如果不希望使用第三方库，可以使用原生Fullscreen API：
<template>
<button @click="toggleNativeFullscreen">原生全屏</button>
</template>
<script>
export default {
methods: {
toggleNativeFullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().catch(err => {
console.error(`全屏错误: ${err.message}`)
})
} else {
if (document.exitFullscreen) {
document.exitFullscreen()
}
}
}
}
}
</script>浏览器兼容性处理
不同浏览器可能需要前缀：
const requestFullscreen = element => {
if (element.requestFullscreen) return element.requestFullscreen()
if (element.webkitRequestFullscreen) return element.webkitRequestFullscreen()
if (element.msRequestFullscreen) return element.msRequestFullscreen()
}样式优化
全屏状态下可以添加特定样式：
:fullscreen, ::backdrop {
background-color: #fff;
}
:-webkit-full-screen {
background-color: #fff;
}
:-ms-fullscreen {
background-color: #fff;
}以上方案提供了从简单到复杂的多种实现方式，可根据项目需求选择适合的方法。使用screenfull库能有效处理浏览器兼容性问题，推荐在正式项目中使用。
