Image: preview optimization (#20652)

packages/image/src/image-viewer.vue

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

packages/popconfirm/src/main.vue

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

packages/theme-chalk/src/image.scss

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

test/unit/specs/image.spec.js

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