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

1. 安装插件

npm i screenfull
yarn add screenfull

2. 创建组件

创建文件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文件

3. 注册全局组件

在components/index.js中，引入组件，并注册成全局 (根据项目需求看是否需要全局注册)

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

4. 使用全局组件

 <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>

5. 使用插件

在全屏组件中引入 import screenfull from 'screenfull'

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

<svg-icon
   icon-class="fullscreen"
   class="fullscreen"
+  @click="toggleScreen"
/>
.... // 省略
methods:{
  toggleScreen () {
   screenfull.toggle()
 }
}

6.完整代码

<template>
  <!-- 放置一个图标 -->
  <div style="display:inline-block">
    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen':'fullscreen' " class="fullscreen" @click="toggleScreen" />
  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  name: 'ScreenFull',
  data() {
    return {
      isFullscreen: false
    }
  },
  created() {
  // ESC会改变当前的全屏状态
    // screenfull是插件，它自带事件监听 on
    // screenfull.isFullscreen ：插件自带的属性，表示当前是否处于全屏状态
    screenfull.on('change', () => {
      console.log('当前是否是全屏', screenfull.isFullscreen)
      this.isFullscreen = screenfull.isFullscreen
    })
  },
  methods: {
    toggleScreen() {
      screenfull.toggle()
      this.isFullscreen = !this.isFullscreen
    }
  }
}
</script>

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

因为注册了全局组件 , 需要直接引用就可以了