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