Image: Fix shield the page when preview big image (#16796) (#16997)

* Image: Fix shield the page when preview big image * refine * Image:fix page scroll when use image-viewer by keyup and keydown * add notes
ElemeFE · Oct 31, 2019 · fcaec91 · DevBrent · Dec 19, 2019 · fcaec91
1 parent 6ff305c
commit fcaec91
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/image/src/image-viewer.vue b/packages/image/src/image-viewer.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="viewer-fade">
-    <div class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
+    <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
       <div class="el-image-viewer__mask"></div>
       <!-- CLOSE -->
       <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
@@ -294,6 +294,9 @@ export default {
   },
   mounted() {
     this.deviceSupportInstall();
+    // add tabindex then wrapper can be focusable via Javascript
+    // focus wrapper so arrow key can't cause inner scroll behavior underneath
+    this.$refs['el-image-viewer__wrapper'].focus();
   }
 };
 </script>
diff --git a/packages/image/src/main.vue b/packages/image/src/main.vue
@@ -38,6 +38,8 @@
     SCALE_DOWN: 'scale-down'
   };
 
+  let prevOverflow = '';
+
   export default {
     name: 'ElImage',
 
@@ -215,9 +217,13 @@
         }
       },
       clickHandler() {
+        // prevent body scroll
+        prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
         this.showViewer = true;
       },
       closeViewer() {
+        document.body.style.overflow = prevOverflow;
         this.showViewer = false;
       }
     }