From 0c1c599c83778e1e6497c1bbb679dd8dfcbcf96a Mon Sep 17 00:00:00 2001
From: cs1707 <lost1q84@gmail.com>
Date: Tue, 5 Jan 2021 20:49:36 +0800
Subject: [PATCH] Image: preview optimization

---
 packages/image/src/image-viewer.vue | 26 ++++++++++++++++++++++++--
 packages/popconfirm/src/main.vue    |  4 ++--
 packages/theme-chalk/src/image.scss |  4 +++-
 test/unit/specs/image.spec.js       |  6 +++---
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/packages/image/src/image-viewer.vue b/packages/image/src/image-viewer.vue
index c3fc33c08a..dc5d13867c 100644
--- a/packages/image/src/image-viewer.vue
+++ b/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>
diff --git a/packages/popconfirm/src/main.vue b/packages/popconfirm/src/main.vue
index 8e2c991bf1..aabb6a2004 100644
--- a/packages/popconfirm/src/main.vue
+++ b/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: {
diff --git a/packages/theme-chalk/src/image.scss b/packages/theme-chalk/src/image.scss
index 96fd660910..39358e6b28 100644
--- a/packages/theme-chalk/src/image.scss
+++ b/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) {
diff --git a/test/unit/specs/image.spec.js b/test/unit/specs/image.spec.js
index cb5f362f9b..77624df09c 100644
--- a/test/unit/specs/image.spec.js
+++ b/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;
   });
 });