MessageBox: fix text blur due to translating half pixel

packages/message-box/src/main.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="el-message-box__wrapper">
-    <transition name="msgbox-fade">
-      <div class="el-message-box" v-show="value">
+  <transition name="msgbox-fade">
+    <div class="el-message-box__wrapper" v-show="value" @click.self="handleWrapperClick">
+      <div class="el-message-box">
         <div class="el-message-box__header" v-if="title !== ''">
           <div class="el-message-box__title">{{ title }}</div>
           <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
@@ -19,8 +19,8 @@
           <el-button ref="confirm" :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')">{{ confirmButtonText }}</el-button>
         </div>
       </div>
-    </transition>
-  </div>
+    </div>
+  </transition>
 </template>
 
 <script type="text/babel">
@@ -101,6 +101,12 @@
         }
       },
 
+      handleWrapperClick() {
+        if (this.closeOnClickModal) {
+          this.close();
+        }
+      },
+
       handleAction(action) {
         if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
           return;

packages/theme-default/src/message-box.css

@@ -7,10 +7,9 @@
 @component-namespace el {
 
   @b message-box {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
+    text-align: left;
+    display: inline-block;
+    vertical-align: middle;
     background-color: #fff;
     width: var(--msgbox-width);
     border-radius: var(--msgbox-border-radius);
@@ -18,8 +17,24 @@
     -webkit-user-select: none;
     overflow: hidden;
     backface-visibility: hidden;
+    @e wrapper {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      text-align: center;
+      &::after {
+        content: "";
+        display: inline-block;
+        height: 100%;
+        width: 0;
+        vertical-align: middle;
+      }
+    }
 
     @e header {
+      position: relative;
       padding: 20px 20px 0;
     }
 
@@ -128,22 +143,22 @@
 
 @keyframes msgbox-fade-in {
   0% {
-    transform: translate3d(-50%, calc(-50% - 20px), 0);
+    transform: translate3d(0, -20px, 0);
     opacity: 0;
   }
   100% {
-    transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(0, 0, 0);
     opacity: 1;
   }
 }
 
 @keyframes msgbox-fade-out {
   0% {
-    transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(0, 0, 0);
     opacity: 1;
   }
   100% {
-    transform: translate3d(-50%, calc(-50% - 20px), 0);
+    transform: translate3d(0, -20px, 0);
     opacity: 0;
   }
 }

test/unit/specs/message-box.spec.js

@@ -32,12 +32,12 @@ describe('MessageBox', () => {
     });
     setTimeout(() => {
       const msgbox = document.querySelector('.el-message-box__wrapper');
-      expect(msgbox.__vue__.value).to.true;
+      expect(msgbox.__vue__.$parent.value).to.true;
       expect(msgbox.querySelector('.el-message-box__title').textContent).to.equal('消息');
       expect(msgbox.querySelector('.el-message-box__message')
         .querySelector('p').textContent).to.equal('这是一段内容');
       MessageBox.close();
-      expect(msgbox.__vue__.value).to.false;
+      expect(msgbox.__vue__.$parent.value).to.false;
       done();
     }, 300);
   });
@@ -58,9 +58,9 @@ describe('MessageBox', () => {
     setTimeout(() => {
       document.querySelector('.v-modal').click();
       expect(document.querySelector('.el-message-box__wrapper')
-        .__vue__.value).to.true;
+        .__vue__.$parent.value).to.true;
       expect(document.querySelector('.el-message-box__wrapper')
-        .__vue__.type).to.equal('warning');
+        .__vue__.$parent.type).to.equal('warning');
       done();
     }, 300);
   });
@@ -74,7 +74,7 @@ describe('MessageBox', () => {
       document.querySelector('.el-message-box__wrapper')
         .querySelector('.el-button--primary').click();
       expect(document.querySelector('.el-message-box__wrapper')
-        .__vue__.value).to.false;
+        .__vue__.$parent.value).to.false;
       done();
     }, 200);
   });
@@ -87,7 +87,7 @@ describe('MessageBox', () => {
     });
     setTimeout(() => {
       expect(document.querySelector('.el-message-box__input')).to.exist;
-      const messageBox = document.querySelector('.el-message-box__wrapper').__vue__;
+      const messageBox = document.querySelector('.el-message-box__wrapper').__vue__.$parent;
       messageBox.inputValue = 'no';
       setTimeout(() => {
         expect(document.querySelector('.el-message-box__errormsg')
@@ -108,7 +108,7 @@ describe('MessageBox', () => {
         inputValidator: validator
       });
       setTimeout(() => {
-        const messageBox = document.querySelector('.el-message-box__wrapper').__vue__;
+        const messageBox = document.querySelector('.el-message-box__wrapper').__vue__.$parent;
         messageBox.inputValue = 'no';
         setTimeout(() => {
           expect(document.querySelector('.el-message-box__errormsg')
@@ -130,7 +130,7 @@ describe('MessageBox', () => {
         inputValidator: validator
       });
       setTimeout(() => {
-        const messageBox = document.querySelector('.el-message-box__wrapper').__vue__;
+        const messageBox = document.querySelector('.el-message-box__wrapper').__vue__.$parent;
         messageBox.inputValue = 'no';
         setTimeout(() => {
           expect(document.querySelector('.el-message-box__errormsg')