<span class="head-icon" @click="toggleFullScreen">
<FullscreenOutlined v-if="fullScreen" />
</span>
import screenfull from 'screenfull';
const fullScreen = ref(true)
const toggleFullScreen = () => {
if (screenfull.isEnabled) { // 检查全屏功能是否可用
screenfull.toggle(); // 切换全屏状态
// fullScreen.value = !screenFull.isFullscreen
// console.log('切换全屏状态', screenfull);
} else {
alert('您的浏览器不支持全屏功能');
}
}
// 判断是否为全屏,全屏隐藏图标
document.addEventListener('fullscreenchange', () => {
if (screenfull.isFullscreen) {
// console.log('页面现在是全屏的');
fullScreen.value = false
} else {
// console.log('页面现在不是全屏的');
fullScreen.value = true
}
});
页面全屏显示
最新推荐文章于 2025-05-01 18:31:59 发布