screenfull全屏、退出全屏、指定元素全屏的使用步骤

1.下载插件
建议下载指定版本5.1.0，不然可能有一个报错

npm install --save screenfull@5.1.0
1

2.页面引入

import screenfull from "screenfull"
1

页面全屏

3.在标签上绑定点击事件

全屏/退出全屏
1

4.在methods中写方法代码

handleFull() {
  if (screenfull.isEnabled) {
    // 加个判断浏览器是否支持全屏
    screenfull.toggle(); // 切换全屏状态
  } else {
    console.log("您的浏览器不支持全屏");
  }
}
1
2
3
4
5
6
7
8

页面全屏

5.在标签上绑定点击事件

指定元素全屏
1

6.在methods中写方法代码

container() {
  const element = document.getElementById("demo"); // 指定全屏元素
  if (screenfull.isEnabled) {
    screenfull.request(element);
    this.elementFull = !this.elementFull; // 判断状态 决定是全屏还是退出全屏
    if (this.elementFull) {
      screenfull.toggle(); //全屏/退出全屏切换
    }
  }
}
1
2
3
4
5
6
7
8
9
10

完整代码

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
47