浏览器中自带全屏功能
document.documentElement.webkitRequestFullScreen()
,不过有兼容性问题,所以改用插件
使用screenFull插件来提供全屏功能
安装插件
npm i screenfull
使用插件
在全屏组件中引入 import screenfull from 'screenfull'
给icon 添加点击事件,在回调中使用使用插件的核心api
<svg-icon
icon-class="fullscreen"
class="fullscreen"
+ @click="toggleScreen"
/>toggleScreen () {
screenfull.toggle()
}
处理ESC按键
如果当前是全屏状态,按下ESC会恢复到普通状态,而此时组件中的数据项却没有变成false,所以导致图标没有及时修改过来。
解决方案:使用screenfull的事件监听
created() {
// ESC会改变当前的全屏状态
// screenfull是插件,它自带事件监听 on
// screenfull.isFullscreen :插件自带的属性,表示当前是否处于全屏状态
screenfull.on('change', () => {
console.log('当前是否是全屏', screenfull.isFullscreen)
this.isFullScreen = screenfull.isFullscreen
})
}