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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,10 @@
<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': zIndex }">
<div class="el-image-viewer__mask"></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">
<i class="el-icon-circle-close"></i> <i class="el-icon-close"></i>
</span> </span>
<!-- ARROW --> <!-- ARROW -->
<template v-if="!isSingle"> <template v-if="!isSingle">
@ -91,6 +91,14 @@ export default {
initialIndex: { initialIndex: {
type: Number, type: Number,
default: 0 default: 0
},
appendToBody: {
type: Boolean,
default: true
},
maskClosable: {
type: Boolean,
default: true
} }
}, },
@ -235,6 +243,11 @@ export default {
e.preventDefault(); e.preventDefault();
}, },
handleMaskClick() {
if (this.maskClosable) {
this.hide();
}
},
reset() { reset() {
this.transform = { this.transform = {
scale: 1, scale: 1,
@ -294,9 +307,18 @@ export default {
}, },
mounted() { mounted() {
this.deviceSupportInstall(); this.deviceSupportInstall();
if (this.appendToBody) {
document.body.appendChild(this.$el);
}
// add tabindex then wrapper can be focusable via Javascript // add tabindex then wrapper can be focusable via Javascript
// focus wrapper so arrow key can't cause inner scroll behavior underneath // focus wrapper so arrow key can't cause inner scroll behavior underneath
this.$refs['el-image-viewer__wrapper'].focus(); 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> </script>

4
packages/popconfirm/src/main.vue
View File

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

4
packages/theme-chalk/src/image.scss
View File

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

6
test/unit/specs/image.spec.js
View File

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