mirror of https://github.com/ElemeFE/element
Image: preview optimization (#20652)
parent
d216a252f3
commit
188605c383
|
@ -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>
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -75,7 +75,9 @@
|
|||
right: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 40px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
background-color: #606266;
|
||||
}
|
||||
|
||||
@include e(canvas) {
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue