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

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
pull/17926/head
luckyCao 2019-10-31 15:16:30 +08:00 committed by Zhi Cun
parent 6ff305cbbe
commit fcaec91eb9
2 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

6
packages/image/src/main.vue
View File

@ -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;
}
}