全屏插件的使用

需求：实现页面的全屏功能。

说明：

• JS-全屏操作功能
  • 进入全屏：document.documentElement.requestFullscreen()
  • 退出全屏：document.exitFullscreen() 
• 插件-全屏操作功能
  • 下载插件： npm i screenfull@5.1.0
  • 导入插件： import screenfull from 'screenfull'
  • 全屏/退出全屏： screenfull.toggle()

思路：

1. 封装一个全屏的组件：src/components/fullscreen/index.vue        
   1. 完成组件的结构与样式
   2. 在组件中使用全屏第三方包工具
2. 在全屏组件封装成一个插件
3. 在页面上使用全屏组件

步骤：

1. 下载插件：npm i screenfull@5.1.0

2. 封装一个全屏的组件

   1. 在 src/components 创建一个文件夹：fullscreen

   2. 在 fullscreen 创建一个文件：index.vue

   3. 完成 index.vue

      <template>
        <div class="fullscreen">
          <i @click="fn" class="el-icon-full-screen"></i>
        </div>
      </template>
      
      <script>
      // 导入全屏插件
      import screenfull from 'screenfull'
      export default {
        methods: {
          fn () {
            screenfull.toggle()
          }
        }
      }
      </script>
      
      

3.  在 src/plugin/index.js 中将全屏组件封装为一个插件
   1. 导入组件：

      import fullScreen from '@/components/fullscreen'

   2. 注册组件：

      export default {
        install: function (Vue) {
          // 封装一个全局组件
          Vue.component('fullScreen', fullScreen)
        }
      }

4. 在 layout/components/NavBar.vue 中在页面上使用全屏组件
   1. 使用组件：

      <div class="right">
        <fullScreen class="myfull"></fullScreen>
      </div>

   2. 美化样式：

      .right {
        display: flex;
        align-items: center;
        .myfull {
          margin-right: 10px;
        }