test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-30 03:07:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

MessageBox: fix text blur due to translating half pixel

Browse Source
This commit is contained in:
Leopoldthecoder 2016-11-05 20:40:00 +08:00 committed by cinwell.li
parent c2a937ce02
commit d5eb9ac3b5
3 changed files with 42 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/message-box/src/main.vue
View File

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

31
packages/theme-default/src/message-box.css
View File

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

16
test/unit/specs/message-box.spec.js
View File

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