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

Merge pull request #1166 from Leopoldthecoder/switch-change

Browse Source 
Switch: fix @change timing bug, fixed #1162
This commit is contained in:
baiyaaaaa 2016-11-18 16:36:14 +08:00 committed by GitHub
commit b13bda7bcd
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@
class="el-switch__input"
type="checkbox"
@change="handleChange"
v-model="currentValue"
v-model="_value"
:name="name"
:disabled="disabled">
<span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
@ -79,7 +79,6 @@
},
data() {
return {
currentValue: this.value,
coreWidth: this.width,
buttonStyle: {
transform: ''
@ -90,18 +89,22 @@
hasText() {
/* istanbul ignore next */
return this.onText || this.offText;
},
_value: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
}
}
},
watch: {
value(val) {
this.currentValue = val;
value() {
if (this.onColor || this.offColor) {
this.handleCoreColor();
this.setBackgroundColor();
}
this.handleButtonTransform();
},
currentValue(val) {
this.$emit('input', val);
}
},
methods: {
@ -111,9 +114,10 @@
handleButtonTransform() {
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;
this.$refs.core.style.backgroundColor = this.value ? this.onColor : this.offColor;
setBackgroundColor() {
let newColor = this.value ? this.onColor : this.offColor;
this.$refs.core.style.borderColor = newColor;
this.$refs.core.style.backgroundColor = newColor;
}
},
mounted() {
@ -123,7 +127,7 @@
}
this.handleButtonTransform();
if ((this.onColor || this.offColor) && !this.disabled) {
this.handleCoreColor();
this.setBackgroundColor();
}
}
};