文章目录
一、效果
- 解决的问题:
vue
本身监听不到全屏状态中的esc
事件,导致无法修改这个按钮的样式icon
和tooltip
未全屏时:
全屏时:
二、解决思路
- 一个重要方法:判断当前是否全屏
问题:如果vue本身的话,在esc事件时是不会调用这个方法的
/**
- 浏览器当前是否全屏
- @return {*|boolean}
*/
export function isFullScreen() {
return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
}
- 于是:通过js来监听(并获取
vue
实例来修改data
)
updated() {
// 作用域this===获取vue的实例
const that = this
window.addEventListener('resize', function () {
//如果直接在这里面使用this关键字,==结果是使用window这个对象
// debugger
if (!isFullScreen()) {
// 全屏下按键esc后要执行的动作
// isclick 为true 此时为全屏状态 false 为非全屏状态
if(!isFullScreen()) {
// console.log('按下esc键退出全屏', that)
that.isFullScreen = false
}
}
});
}
三、全屏与退出全屏(工具)
- 工具
bom.js
中的方法
引入使用即可:全屏时需要指定一个el
元素,默认是全部,需要自己制定
比如我是随便定义一个id
,再使用fullScreen(document.getElementById('test'))