github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/20870/head
好多大米 2021-03-19 16:32:36 +08:00 committed by GitHub
parent 06ddc10571
commit fa64999032
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/image/src/image-viewer.vue
View File

@ -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) {