vue中实现全屏以及对退出全屏的监听
sz199511 · 110浏览 · 发布于2021-07-26 +关注

本文主要介绍了vue中实现全屏以及对退出全屏的监听,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前言:       

 vue中实现默认进来页面,某个div全屏,并监听退出全屏的次数,当退出全屏次数达到5的时候跳转到别的页面。

实现步骤:

1、页面上在你想要的容器上加上id = ‘con_lf_top_div',再给他加个动态class名,加上提示和点击进入全屏按钮

1

2

3

4

5

6

7

8

9

10

11

12

<template>

  <el-card

    shadow="never"

    class="examining"

    v-loading.fullscreen.lock="loading"

    id="con_lf_top_div"

    :class="{'isScreen':!fullscreen}"

  >

    <p style="color:red;">*温馨提示:请在全屏下进行考试,退出全屏5次以后将禁止考试</p>

    <el-button v-if="fullscreen" @click="screen();screen()" style="position: absolute;top: 0px;right: 0;">全屏</el-button>

  

...其他内容

 2、css部分,全屏后的部分需要单独加样式

1

2

3

4

.isScreen{

   height:100vh!important;

   overflow-y: auto;

 }

3、js部分

data:

1

2

fullscreen:false,//是否全屏

goCount:0 //退出第几次

mounted初始化调用

1

2

3

mounted() {

      this.initScreen()

}

methods定义方法:

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

//初始化全屏方法

     initScreen(){

       this.goCount = 0

       this.screen() //打开全屏

       window.addEventListener('keydown', function(event) {

         //禁掉F11的全屏的默认事件,不会禁止F11的退出全屏

         const e = event || window.event

         if (e && e.keyCode === 122) {

           e.preventDefault()

         }

       })

       document.addEventListener('fullscreenchange', v => {

         if(this.fullscreen == true){

           this.fullscreen = false

         }else{

           this.goCount++

           // this.$message.info('当前是退出第'+this.goCount+'次')

           console.log('当前是退出第'+this.goCount+'次')

           this.fullscreen = true

           if(this.goCount == 5){

             this.goBack()

           }

         }

       })

     },

完整源码:

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

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

1、页面:

<el-card

    id="con_lf_top_div"

    :class="{'isScreen':!fullscreen}"

  >

    <p style="color:red;">*温馨提示:请在全屏下进行考试,退出全屏5次以后将禁止考试</p>

    <el-button v-if="fullscreen" @click="screen();screen()" style="position: absolute;top: 0px;right: 0;">全屏</el-button>

     ...

  

  

2、data:

fullscreen:false,//是否全屏

goCount:0 //退出第几次

  

  

3、mounted:

this.initScreen()

  

  

  

4、methods:

  

//初始化全屏方法

initScreen(){

   this.goCount = 0

   this.screen() //打开全屏

   window.addEventListener('keydown', function(event) {

       //禁掉F11的全屏的默认事件,不会禁止F11的退出全屏

      const e = event || window.event

      if (e && e.keyCode === 122) {

         e.preventDefault()

      }

   })

   document.addEventListener('fullscreenchange', v => {

      if(this.fullscreen == true){

         this.fullscreen = false

      }else{

         this.goCount++

          // 注意这里的事件都会触发两次

          console.log('当前是退出第'+this.goCount+'次')

          this.fullscreen = true

          if(this.goCount == 5){

            this.goBack()

          }

      }

   })

},

//全屏方法

screen(){

  //设置后就是id==con_lf_top_div 的容器全屏

  let element = document.getElementById('con_lf_top_div');

  if (this.fullscreen) {

     if (document.exitFullscreen) {

        document.exitFullscreen();

     } else if (document.webkitCancelFullScreen) {

        document.webkitCancelFullScreen();

     } else if (document.mozCancelFullScreen) {

        document.mozCancelFullScreen();

     } else if (document.msExitFullscreen) {

        document.msExitFullscreen();

     }

 } else {

    if (element.requestFullscreen) {

        element.requestFullscreen();

    } else if (element.webkitRequestFullScreen) {

        element.webkitRequestFullScreen();

    } else if (element.mozRequestFullScreen) {

        element.mozRequestFullScreen();

    } else if (element.msRequestFullscreen) {

        // IE11

        element.msRequestFullscreen();

     }

    }

    this.fullscreen = !this.fullscreen;

  

},

//退出全屏方法

goBack(){

    //111111111111111111111111111111111111111

    this.$message.error('您已退出全屏5次,当前考试已经结束')

    this.$router.go(-1)

         

},


相关推荐

RN开发环境的npm私库本地debug调试

manongba · 363浏览 · 2019-05-09 17:03:46
你不知道的浏览器渲染原理

追忆似水年华 · 520浏览 · 2019-05-09 22:47:56
基于iview的router常用控制方式

追忆似水年华 · 445浏览 · 2019-06-03 10:39:21
编程小知识之 JavaScript 文件读取

manongba · 396浏览 · 2019-06-10 09:16:16
10个省时间的 PyCharm 技巧 赶快收藏!

· 343浏览 · 2019-06-10 09:32:01
加载中

0评论

评论
不积跬步无以至千里,不积小流无以成江海!
分类专栏
小鸟云服务器
扫码进入手机网页