test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-02 12:18:46 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix switch style bug in ie9

Browse Source
This commit is contained in:
baiyaaaaa 2016-11-06 17:19:53 +08:00
parent 858abf687f
commit 37b9636a6e
2 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/switch/src/component.vue
View File

@ -3,7 +3,7 @@
<div class="el-switch__mask" v-show="disabled"></div>
<input class="el-switch__input" type="checkbox" :checked="value" :name="name" :disabled="disabled" style="display: none;">
<span class="el-switch__core" ref="core" @click="handleMiscClick" :style="{ 'width': coreWidth + 'px' }">
<span class="el-switch__button" ref="button"></span>
<span class="el-switch__button" :style="buttonStyle"></span>
</span>
<transition name="label-fade">
<div
@ -75,7 +75,8 @@
},
data() {
return {
coreWidth: this.width
coreWidth: this.width,
buttonStyle: {}
};
},
computed: {
@ -100,7 +101,7 @@
}
},
handleButtonTransform() {
this.$refs.button.style.transform = this.value ? `translate3d(${ this.coreWidth - 20 }px, 2px, 0)` : 'translate3d(2px, 2px, 0)';
this.buttonStyle.transform = this.value ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
},
handleCoreColor() {
this.$refs.core.style.borderColor = this.value ? this.onColor : this.offColor;

3
test/unit/specs/switch.spec.js
View File

@ -49,12 +49,9 @@ describe('Switch', () => {
}, true);
const core = vm.$el.querySelector('.el-switch__core');
const button = vm.$el.querySelector('.el-switch__button');
core.click();
Vue.nextTick(() => {
expect(vm.value).to.equal(false);
expect(getComputedStyle(core).backgroundColor).to.equal('rgb(192, 204, 218)');
expect(/2px, 2px/.test(button.style.transform)).to.true;
core.click();
expect(vm.value).to.equal(true);
done();