VUE实现全屏功能

一.全屏功能-组件创建

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

1.1创建组件

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

    <template>
      <!-- 放置一个图标 -->
      <div style="display:inline-block">
        <svg-icon icon-class="fullscreen" class="fullscreen" />
       // 注意：要想这个图片能正确显示，还必须在`src\icons\svg`下有对应的fullscreen.svg文件
      </div>
    </template>

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

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

1.2注册全局组件

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

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

1.3使用全局组件

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()，不过有兼容性问题，所以改用插件。

2.1安装插件

    npm i screenfull

2.2使用插件

2.2.1 在全屏组件中引入

    import screenfull from 'screenfull'

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

    <svg-icon
       icon-class="fullscreen"
       class="fullscreen"
    +  @click="toggleScreen"
    />
    //fullscreen.toggle()切换全屏

2.2.3 回调函数

    toggleScreen () {
       screenfull.toggle()
    }

三.全屏功能-实现全屏-图标切换

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

思路:补充数据项：isFullscreen:①在全屏切换时更改它的值;②在显示图标时给出不同的class;

3.1 补充数据项

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

3.2 在全屏切换时更改它的值

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

3.3 图标切换

<svg-icon
    +     :icon-class="isFullScreen ? 'exit-fullscreen' : 'fullscreen'"
          class="fullscreen"
          @click="toggleScreen"
        />
        //要提前准备两个图片。

3.4 处理ESC按键

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

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

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