vue实现弹框全屏
实现弹框全屏的Vue方案
使用CSS样式控制全屏
通过添加全屏CSS类实现弹框覆盖整个视口。需要设置固定定位、宽高100%以及最高层级。
.fullscreen-dialog {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: white;
}在Vue组件中动态切换这个类名：
<template>
<div :class="{'fullscreen-dialog': isFullscreen}">
<!-- 弹框内容 -->
<button @click="toggleFullscreen">切换全屏</button>
</div>
</template>
<script>
export default {
data() {
return {
isFullscreen: false
}
},
methods: {
toggleFullscreen() {
this.isFullscreen = !this.isFullscreen
}
}
}
</script>使用浏览器全屏API
调用HTML5的Fullscreen API实现原生全屏体验，需注意浏览器兼容性。
methods: {
requestFullscreen() {
const element = this.$el.querySelector('.dialog-content')
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
}
},
exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
}
}使用第三方库
对于复杂需求，可考虑使用专门的全屏库如screenfull.js：
import screenfull from 'screenfull'
methods: {
toggleFullscreen() {
if (screenfull.isEnabled) {
screenfull.toggle(this.$refs.dialog)
}
}
}响应式全屏控制
结合Vue的响应式特性，根据屏幕尺寸自动调整：
computed: {
autoFullscreen() {
return window.innerWidth < 768 ? true : false
}
}注意事项
- 移动端需要处理viewport和滚动锁定
- 全屏状态改变时需要添加事件监听
- 考虑添加过渡动画提升用户体验
- 某些浏览器要求全屏操作必须由用户手势触发
