<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文件 svg是矢量图

2.注册全局组件

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

import ScreenFull from '@/components/ScreenFull.index.vue'

注册

export default {

install(Vue) {

Vue.component(ScreenFull,ScreenFull)

}

}

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

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

安装插件

npm i [email protected]

使用插件

在全屏组件中引入

import screenfull from 'screenfull'

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

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

回调函数 toggle插件api

toggleScreen () {
screenfull.toggle()
}

小结

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

三图标切换

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

思路

补充数据项：isFullscreen

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

补充数据项

data () {
return {
isFullscreen: false
}
}

在全屏切换时更改它的值

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

图标切换

exit-fullscreen退出全屏

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

要提前准备两个图片。

处理ESC按键

除了点击图标切换外还有按 ESC切换图标修改图标

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

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

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

有两种状态修改图标因此要使用 screenfull.on 的内置方法去监听状态

插件使用地址

组件总代码

<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:{
    // 点击 切换 toggle插件自带的属性
  toggleScreen () {
   screenfull.toggle()
   this.isFullscreen = !this.isFullscreen
    }
  }
}
</script>

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

后管系统常用的 ~ 全屏功能

问题描述

全屏功能 - 后管常用的功能

具体实现

一 组件创建

1.创建组件