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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

16
packages/theme-default/src/switch.css
View File

@ -49,10 +49,6 @@
@e input { @e input {
display: none; display: none;
&:checked + .el-switch__core {
border-color: var(--switch-on-color);
background-color: var(--switch-on-color);
}
} }
@e core { @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 { @when disabled {
.el-switch__core { .el-switch__core {
border-color: var(--switch-disabled-color) !important; border-color: var(--switch-disabled-color) !important;
@ -90,11 +93,6 @@
color: var(--switch-disabled-text-color) !important; 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 { @modifier wide {