vue中监听ESC事件,全屏退出全屏
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
1.在需要全屏的元素上绑定一个 ref,这里用ref="fullscreenElement"
<template>
<div class="homeBox" ref="fullscreenElement" id="test">
<div class="headerBox">
<div style="position: relative; bottom: 6%; right: 10px">{{ currentTime }} {{ weekDay }}</div>
<i @click="toggleFullscreen"></i>
</div>
<div class="content">
<div class="left">
<leftTop/>
<leftBottom/>
</div>
<div class="center">
<centerTop/>
<centerBottom/>
</div>
<div class="right">
<rightTop/>
<rightBottom/>
</div>
</div>
</div>
</template>
2.点击全屏按钮,绑定事件
注意⚠️:这样的写法有缺点,如果你的全屏元素里面有表单,需要悬浮显示,将显示不出来;可以用另外的方法实现全屏(见 3),如果没有就用这块代码。比较简单。
toggleFullscreen() {
const element = this.$refs.fullscreenElement;
if (element) {
element.classList.toggle('fullscreen-element');
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
element.requestFullscreen().catch(err => {
console.error('进入全屏失败:', err);
});
}
}
},
3.另一种方法,是通过隐藏侧边栏顶部导航和其余的元素
// 点击esc按钮或者浏览器退出的时候,↩↩️恢复侧边栏
document.addEventListener('fullscreenchange', event => {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered full-screen mode.`)
} else {
console.log('Leaving full-screen mode.')
const header = document.querySelector('header')
const aside = document.querySelector('aside')
const placeholder = document.querySelector('.placeholder')
const homeBox = document.getElementById('test')
header.style.display = 'block'
aside.style.display = 'block'
placeholder.style.display = 'block'
homeBox.style.height = 'calc(100vh - 64px)'
}
})
this.timer = setInterval(() => {
this.currentTime = new Date().toLocaleString() // 获得当前时间并转换成字符串格式
}, 1000)
},
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)