github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Switch: compatible with vue ssr, fixed #3752 (#3820)

pull/3831/head
cinwell.li 2017-03-28 15:06:34 +08:00 committed by baiyaaaaa
parent 5f5ae1408e
commit 7d89f0d269
1 changed files with 5 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@
:name="name" :name="name"
:disabled="disabled"> :disabled="disabled">
<span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }"> <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
<span class="el-switch__button" :style="buttonStyle"></span> <span class="el-switch__button" :style="{ transform }"></span>
</span> </span>
<transition name="label-fade"> <transition name="label-fade">
<div <div
@ -79,10 +79,7 @@
}, },
data() { data() {
return { return {
coreWidth: this.width, coreWidth: this.width
buttonStyle: {
transform: ''
}
}; };
}, },
computed: { computed: {
@ -97,6 +94,9 @@
set(val) { set(val) {
this.$emit('input', val); this.$emit('input', val);
} }
},
transform() {
return this.value ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
} }
}, },
watch: { watch: {
@ -104,16 +104,12 @@
if (this.onColor || this.offColor) { if (this.onColor || this.offColor) {
this.setBackgroundColor(); this.setBackgroundColor();
} }
this.handleButtonTransform();
} }
}, },
methods: { methods: {
handleChange(event) { handleChange(event) {
this.$emit('change', event.currentTarget.checked); this.$emit('change', event.currentTarget.checked);
}, },
handleButtonTransform() {
this.buttonStyle.transform = this.value ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
},
setBackgroundColor() { setBackgroundColor() {
let newColor = this.value ? this.onColor : this.offColor; let newColor = this.value ? this.onColor : this.offColor;
this.$refs.core.style.borderColor = newColor; this.$refs.core.style.borderColor = newColor;
@ -125,7 +121,6 @@
if (this.width === 0) { if (this.width === 0) {
this.coreWidth = this.hasText ? 58 : 46; this.coreWidth = this.hasText ? 58 : 46;
} }
this.handleButtonTransform();
if (this.onColor || this.offColor) { if (this.onColor || this.offColor) {
this.setBackgroundColor(); this.setBackgroundColor();
} }