Image: fix z-index and keydown event add stopPropagation (#20859)

Author: cs1707

packages/image/src/image-viewer.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="viewer-fade">
-    <div tabindex="-1" ref="el-image-viewer__wrapper" 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': viewerZIndex }">
       <div class="el-image-viewer__mask" @click.self="handleMaskClick"></div>
       <!-- CLOSE -->
       <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
@@ -54,6 +54,7 @@
 <script>
 import { on, off } from 'element-ui/src/utils/dom';
 import { rafThrottle, isFirefox } from 'element-ui/src/utils/util';
+import { PopupManager } from 'element-ui/src/utils/popup';
 
 const Mode = {
   CONTAIN: {
@@ -143,6 +144,10 @@ export default {
         style.maxWidth = style.maxHeight = '100%';
       }
       return style;
+    },
+    viewerZIndex() {
+      const nextZIndex = PopupManager.nextZIndex();
+      return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;
     }
   },
   watch: {
@@ -167,7 +172,8 @@ export default {
       this.onClose();
     },
     deviceSupportInstall() {
-      this._keyDownHandler = rafThrottle(e => {
+      this._keyDownHandler = e => {
+        e.stopPropagation();
         const keyCode = e.keyCode;
         switch (keyCode) {
           // ESC
@@ -195,7 +201,7 @@ export default {
             this.handleActions('zoomOut');
             break;
         }
-      });
+      };
       this._mouseWheelHandler = rafThrottle(e => {
         const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
         if (delta > 0) {