Kaynağa Gözat

修复全屏后按ESC问题

shaogen1995 4 yıl önce
ebeveyn
işleme
78884d6aa2
4 değiştirilmiş dosya ile 140 ekleme ve 2 silme
  1. 2 2
      src/main.js
  2. 46 0
      src/views/Home.vue
  3. 46 0
      src/views/HomeThree.vue
  4. 46 0
      src/views/HomeTow.vue

+ 2 - 2
src/main.js

@@ -203,7 +203,7 @@ const myMixin = {
           ],
           shijian: '2000年12月,信息工程大学新校区奠基仪式。',
           renwu: [
-            { name: '2000年12月,信息工程大学第一次代表大会合影。', img: '1.jpg' }
+            { name: '2000年12月,信息工程大学第一次代表大会合影。', img: '1.jpg' }
           ]
         },
 
@@ -217,7 +217,7 @@ const myMixin = {
         {
           yeah: '2007.01',
           wenwu: [],
-          shijian: '917系统”的成功研制,实现了我国某制式无线信号侦察从无到有的历史性突破,相关成果获2007年国家科技进步一等奖。',
+          shijian: '917系统”的成功研制,实现了我国某制式无线信号侦察从无到有的历史性突破,相关成果获2007年国家科技进步一等奖。',
           renwu: []
         },
         {

+ 46 - 0
src/views/Home.vue

@@ -207,6 +207,7 @@ export default {
       arrows: false,
       // 控制全屏
       isSta: false,
+      fullscreen: false,
       // 控制棋子
       seInd: 0,
       // 控制棋子的定时器
@@ -294,6 +295,51 @@ export default {
     // 进页面看看是不是只有一张图,只有一张图居中显示
     if (this.wenwuLehgth === 1) this.oneImgWW = true
     if (this.renwuLehgth === 1) this.oneImgRW = true
+    // 监听esc事件
+    document.addEventListener('webkitfullscreenchange', (e) => {
+      if (!(e.currentTarget.webkitIsFullScreen)) {
+        // console.log('退出啊webkitIsFullScreen11111111111')
+        setTimeout(() => {
+          this.isSta = this.fullscreen = false
+        }, 100)
+      } else {
+        // console.log('进入webkitIsFullScreen')
+      }
+    })
+
+    document.addEventListener('fullscreenchange', (e) => {
+      if (!document.fullscreenElement) {
+        // console.log('退出啊fullscreenchange1111111111')
+        setTimeout(() => {
+          this.isSta = this.fullscreen = false
+        }, 100)
+      } else {
+        // console.log('进入fullscreenchange')
+      }
+    })
+
+    document.addEventListener('MSFullscreenChange', (e) => {
+      if (!document.msFullscreenElement) {
+        // console.log('IE退出111111')
+        setTimeout(() => {
+          this.isSta = this.fullscreen = false
+        }, 100)
+      } else {
+        // console.log('IE进')
+      }
+    })
+    document.addEventListener('mozfullscreenchange', (e) => {
+      if (!document.mozFullScreenElement) {
+        // console.log('火狐退出1111111111111')
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.isSta = this.fullscreen = false
+          }, 100)
+        })
+      } else {
+        // console.log('火狐进')
+      }
+    })
   },
   // 方法集合
   methods: {

+ 46 - 0
src/views/HomeThree.vue

@@ -207,6 +207,7 @@ export default {
       arrows: false,
       // 控制全屏
       isSta: false,
+      fullscreen: false,
       // 控制棋子
       seInd: 0,
       // 控制棋子的定时器
@@ -294,6 +295,51 @@ export default {
     // 进页面看看是不是只有一张图,只有一张图居中显示
     if (this.wenwuLehgth === 1) this.oneImgWW = true
     if (this.renwuLehgth === 1) this.oneImgRW = true
+    // 监听esc事件
+    document.addEventListener('webkitfullscreenchange', (e) => {
+      if (!(e.currentTarget.webkitIsFullScreen)) {
+        // console.log('退出啊webkitIsFullScreen11111111111')
+        setTimeout(() => {
+          this.isSta = this.fullscreen = false
+        }, 100)
+      } else {
+        // console.log('进入webkitIsFullScreen')
+      }
+    })
+
+    document.addEventListener('fullscreenchange', (e) => {
+      if (!document.fullscreenElement) {
+        // console.log('退出啊fullscreenchange1111111111')
+        setTimeout(() => {
+          this.isSta = this.fullscreen = false
+        }, 100)
+      } else {
+        // console.log('进入fullscreenchange')
+      }
+    })
+
+    document.addEventListener('MSFullscreenChange', (e) => {
+      if (!document.msFullscreenElement) {
+        // console.log('IE退出111111')
+        setTimeout(() => {
+          this.isSta = this.fullscreen = false
+        }, 100)
+      } else {
+        // console.log('IE进')
+      }
+    })
+    document.addEventListener('mozfullscreenchange', (e) => {
+      if (!document.mozFullScreenElement) {
+        // console.log('火狐退出1111111111111')
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.isSta = this.fullscreen = false
+          }, 100)
+        })
+      } else {
+        // console.log('火狐进')
+      }
+    })
   },
   // 方法集合
   methods: {

+ 46 - 0
src/views/HomeTow.vue

@@ -207,6 +207,7 @@ export default {
       arrows: false,
       // 控制全屏
       isSta: false,
+      fullscreen: false,
       // 控制棋子
       seInd: 0,
       // 控制棋子的定时器
@@ -294,6 +295,51 @@ export default {
     // 进页面看看是不是只有一张图,只有一张图居中显示
     if (this.wenwuLehgth === 1) this.oneImgWW = true
     if (this.renwuLehgth === 1) this.oneImgRW = true
+    // 监听esc事件
+    document.addEventListener('webkitfullscreenchange', (e) => {
+      if (!(e.currentTarget.webkitIsFullScreen)) {
+        // console.log('退出啊webkitIsFullScreen11111111111')
+        setTimeout(() => {
+          this.isSta = this.fullscreen = false
+        }, 100)
+      } else {
+        // console.log('进入webkitIsFullScreen')
+      }
+    })
+
+    document.addEventListener('fullscreenchange', (e) => {
+      if (!document.fullscreenElement) {
+        // console.log('退出啊fullscreenchange1111111111')
+        setTimeout(() => {
+          this.isSta = this.fullscreen = false
+        }, 100)
+      } else {
+        // console.log('进入fullscreenchange')
+      }
+    })
+
+    document.addEventListener('MSFullscreenChange', (e) => {
+      if (!document.msFullscreenElement) {
+        // console.log('IE退出111111')
+        setTimeout(() => {
+          this.isSta = this.fullscreen = false
+        }, 100)
+      } else {
+        // console.log('IE进')
+      }
+    })
+    document.addEventListener('mozfullscreenchange', (e) => {
+      if (!document.mozFullScreenElement) {
+        // console.log('火狐退出1111111111111')
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.isSta = this.fullscreen = false
+          }, 100)
+        })
+      } else {
+        // console.log('火狐进')
+      }
+    })
   },
   // 方法集合
   methods: {