test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-02 20:28:52 +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> <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;"> <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__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> </span>
<transition name="label-fade"> <transition name="label-fade">
<div <div
@ -75,7 +75,8 @@
}, },
data() { data() {
return { return {
coreWidth: this.width coreWidth: this.width,
buttonStyle: {}
}; };
}, },
computed: { computed: {
@ -100,7 +101,7 @@
} }
}, },
handleButtonTransform() { 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() { handleCoreColor() {
this.$refs.core.style.borderColor = this.value ? this.onColor : this.offColor; 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); }, true);
const core = vm.$el.querySelector('.el-switch__core'); const core = vm.$el.querySelector('.el-switch__core');
const button = vm.$el.querySelector('.el-switch__button');
core.click(); core.click();
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.value).to.equal(false); 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(); core.click();
expect(vm.value).to.equal(true); expect(vm.value).to.equal(true);
done(); done();