全屏功能

​​持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情 ​

 目标

分析全屏功能的实现逻辑； 创建并使用全屏组件

思路

在顶部的工具栏中补充一个按钮，点它之后进行全屏展示。为了方便复用功能，把它注册成一个全局组件

​

创建组件

创建文件src/componets/ScreenFull/index.vue

<template>
  <!-- 放置一个图标 -->
  <div style="display:inline-block">
    <svg-icon icon-class="fullscreen" class="fullscreen" />
  </div>
</template>

<script>
export default {
  name: 'ScreenFull'
}
</script>

<style lang="scss" scoped>
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>

注意：要想这个图片能正确显示，还必须在src\icons\svg下有对应的fullscreen.svg文件

注册全局组件

在components/index.js中，引入组件，并注册成全局

import ScreenFull from './ScreenFull'
const componentsPlugin = {
  install(Vue) {
    // 省略其他...
    Vue.component('ScreenFull', ScreenFull)
  }
}

 使用全局组件

Layout/NavBar/index.vue

 <div class="right-menu">
    <lang class="right-menu-item" />

    <ScreenFull class="right-menu-item" />
    <el-dropdown class="avatar-container right-menu-item" trigger="click">

<style>
.right-menu-item {
   vertical-align: middle;
}
</style>

 实现全屏逻辑

浏览器中自带全屏功能document.documentElement.webkitRequestFullScreen()，不过有兼容性问题，所以改用插件。

目标

使用screenFull插件来提供全屏功能

安装插件

npm i screenfull@5.1.0

使用插件

在全屏组件中引入

import screenfull from 'screenfull'

给icon 添加点击事件，在回调中使用使用插件的核心api

<svg-icon
   icon-class="fullscreen"
   class="fullscreen"
+  @click="toggleScreen"
/>

回调函数

toggleScreen () {
   screenfull.toggle()
}

小结

●了解一个有兼容性问题的api （requestFullScreen）
●caniuse 去查兼容性
●fullscreen.toggle()切换全屏

实现全屏膜 -图标切换

处于全屏状态和非全屏状态时的图标是不同的

思路

补充数据项：isFullscreen

●在全屏切换时更改它的值
●在显示图标时给出不同的class

补充数据项

data () {
  return {
    isFullscreen: false
  }
}

在全屏切换时更改它的值

toggleScreen () {
  screenfull.toggle()
+ this.isFullscreen = !this.isFullscreen
}

图标切换

<svg-icon
+     :icon-class="isFullScreen ? 'exit-fullscreen' : 'fullscreen'"
      class="fullscreen"
      @click="toggleScreen"
    />

 要提前准备两个图片

处理ESC按键

如果当前是全屏状态，按下ESC会恢复到普通状态，而此时组件中的数据项却没有变成false,所以导致图标没有及时修改过来。

解决方案：使用screenfull的事件监听

created() {
  // ESC会改变当前的全屏状态
    // screenfull是插件，它自带事件监听 on
    // screenfull.isFullscreen ：插件自带的属性，表示当前是否处于全屏状态
    screenfull.on('change', () => {
      console.log('当前是否是全屏', screenfull.isFullscreen)
      this.isFullscreen = screenfull.isFullscreen
    })
}

参考：screenfull - npm

​