vue全屏事件开发详解

本文实例为大家分享了vue全屏事件开发的具体代码，供大家参考，具体内容如下

在项目中有需求相应浏览器全屏，写了个案例代码

先看看效果吧

全屏显示：

html代码：

1. <!-- el-tooltip 文字提示 -->
2. <div class="btn-fullscreen" @click="handleFullScreen">
3. <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom">
4. <i class="el-icon-rank"></i>
5. </el-tooltip>
6. </div>

js代码

1. data(){
2. return {
3. fullscreen: false
4. }
5. }
6.  
7. // 全屏事件
8. handleFullScreen(){
9. let element = document.documentElement;
10. if (this.fullscreen) {
11. if (document.exitFullscreen) {
12. document.exitFullscreen();
13. } else if (document.webkitCancelFullScreen) {
14. document.webkitCancelFullScreen();
15. } else if (document.mozCancelFullScreen) {
16. document.mozCancelFullScreen();
17. } else if (document.msExitFullscreen) {
18. document.msExitFullscreen();
19. }
20. } else {
21. if (element.requestFullscreen) {
22. element.requestFullscreen();
23. } else if (element.webkitRequestFullScreen) {
24. element.webkitRequestFullScreen();
25. } else if (element.mozRequestFullScreen) {
26. element.mozRequestFullScreen();
27. } else if (element.msRequestFullscreen) {
28. // IE11
29. element.msRequestFullscreen();
30. }
31. }
32. this.fullscreen = !this.fullscreen;
33. },

通过fullscreen判断的true和false确定是否相应全屏

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。