Switch: simplity internal implementation

pull/3526/merge
wacky6.AriesMBP 2017-05-20 01:20:04 +08:00 committed by 杨奕
parent 74f8ccc87e
commit ab129f1976
2 changed files with 18 additions and 21 deletions

View File

@ -1,11 +1,11 @@
<template>
<label class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText }">
<label class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText, 'is-checked': checked }">
<div class="el-switch__mask" v-show="disabled"></div>
<input
class="el-switch__input"
type="checkbox"
@change="handleChange"
v-model="_value"
ref="input"
:name="name"
:true-value="onValue"
:false-value="offValue"
@ -105,20 +105,12 @@
/* istanbul ignore next */
return this.onText || this.offText;
},
_value: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
}
},
transform() {
return this.checked ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
}
},
watch: {
value() {
checked() {
if (this.onColor || this.offColor) {
this.setBackgroundColor();
}
@ -126,7 +118,13 @@
},
methods: {
handleChange(event) {
this.$emit('change', event.currentTarget.checked ? this.onValue : this.offValue);
this.$emit('change', !this.checked ? this.onValue : this.offValue);
this.$emit('input', !this.checked ? this.onValue : this.offValue);
this.$nextTick(() => {
// set input's checked property
// in case parent refuses to change component's value
this.$refs.input.checked = this.checked;
});
},
setBackgroundColor() {
let newColor = this.checked ? this.onColor : this.offColor;
@ -142,6 +140,7 @@
if (this.onColor || this.offColor) {
this.setBackgroundColor();
}
this.$refs.input.checked = this.checked;
}
};
</script>

View File

@ -49,10 +49,6 @@
@e input {
display: none;
&:checked + .el-switch__core {
border-color: var(--switch-on-color);
background-color: var(--switch-on-color);
}
}
@e core {
@ -77,6 +73,13 @@
}
}
@when checked {
.el-switch__core {
border-color: var(--switch-on-color);
background-color: var(--switch-on-color);
}
}
@when disabled {
.el-switch__core {
border-color: var(--switch-disabled-color) !important;
@ -90,11 +93,6 @@
color: var(--switch-disabled-text-color) !important;
}
}
.el-switch__input:checked + .el-switch__core {
border-color: var(--switch-disabled-color);
background-color: var(--switch-disabled-color);
}
}
@modifier wide {