Vue进阶（幺幺幺）：vue实现浏览器全屏

项目开发过程中，优化项目时考虑加入全屏功能。具体实践步骤如下：

一、安装依赖

项目中使用的是sreenfull插件，执行命令安装

npm install --save screenfull

  

 

  
1
 

二、应用

组件安装好后，引入项目，用一个按钮进行控制即可，通过Esc键退出全屏按钮方法如下：

<script>
import screenfull from 'screenfull'
export default {
  data () { return { isFullscreen: false } }，
  methods: { /** * 全屏事件 */ screenfull() { if (!screenfull.enabled) { this.$message({ message: 'Your browser does not work', type: 'warning' }) return false } screenfull.toggle() this.isFullscreen = true }, /** * 是否全屏并按键ESC键的方法 */ checkFull() { var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled // to fix : false || undefined == undefined if (isFull === undefined) { isFull = false } return isFull }
  },
  mounted() { window.onresize = () => { // 全屏下监控是否按键了ESC if (!this.checkFull()) { // 全屏下按键esc后要执行的动作 this.isFullscreen = false } } }
}
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
 

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/105634698