Image: preview optimization (#20652)

pull/20692/head
好多大米 2021-01-15 16:49:44 +08:00 committed by GitHub
parent d216a252f3
commit 188605c383
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 8 deletions

View File

@ -1,10 +1,10 @@
<template>
<transition name="viewer-fade">
<div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
<div class="el-image-viewer__mask"></div>
<div class="el-image-viewer__mask" @click.self="handleMaskClick"></div>
<!-- CLOSE -->
<span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
<i class="el-icon-circle-close"></i>
<i class="el-icon-close"></i>
</span>
<!-- ARROW -->
<template v-if="!isSingle">
@ -91,6 +91,14 @@ export default {
initialIndex: {
type: Number,
default: 0
},
appendToBody: {
type: Boolean,
default: true
},
maskClosable: {
type: Boolean,
default: true
}
},
@ -235,6 +243,11 @@ export default {
e.preventDefault();
},
handleMaskClick() {
if (this.maskClosable) {
this.hide();
}
},
reset() {
this.transform = {
scale: 1,
@ -294,9 +307,18 @@ export default {
},
mounted() {
this.deviceSupportInstall();
if (this.appendToBody) {
document.body.appendChild(this.$el);
}
// 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();
},
destroyed() {
// if appendToBody is true, remove DOM node after destroy
if (this.appendToBody && this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
}
};
</script>

View File

@ -84,10 +84,10 @@ export default {
},
computed: {
displayConfirmButtonText() {
return this.confirmButtonText || t('el.popconfirm.confirmButtonText')
return this.confirmButtonText || t('el.popconfirm.confirmButtonText');
},
displayCancelButtonText() {
return this.cancelButtonText || t('el.popconfirm.cancelButtonText')
return this.cancelButtonText || t('el.popconfirm.cancelButtonText');
}
},
methods: {

View File

@ -75,7 +75,9 @@
right: 40px;
width: 40px;
height: 40px;
font-size: 40px;
font-size: 24px;
color: #fff;
background-color: #606266;
}
@include e(canvas) {

View File

@ -128,10 +128,10 @@ describe('Image', () => {
vm.$el.querySelector('.el-image__inner').click();
await wait();
expect(vm.$el.querySelector('.el-image-viewer__wrapper')).to.exist;
vm.$el.querySelector('.el-image-viewer__close').click();
expect(document.querySelector('.el-image-viewer__wrapper')).to.exist;
document.querySelector('.el-image-viewer__close').click();
await wait(1000);
expect(vm.$el.querySelector('.el-image-viewer__wrapper')).to.not.exist;
expect(document.querySelector('.el-image-viewer__wrapper')).to.not.exist;
});
});