switch组件是用来表示对立关系的切换的。
生命周期
mounted
mounted() {
if (this.width === 0) { // 如果没有传 width
this.coreWidth = this.hasText ? 58 : 46; // 有文字的时候是 58px， 没有文字则是 46px
}
this.handleButtonTransform(); // 移动按钮
if (this.onColor || this.offColor) { // 如果设置了颜色
this.setBackgroundColor();
}
}
handleButtonTransform
这是用来处理按钮的位移的方法。
methods: {
handleButtonTransform() {
// 根据开关移动圆点
this.buttonStyle.transform = this.value ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
},
}
setBackgroundColor
这是用来改变开关颜色的。
methods: {
setBackgroundColor() {
// 根据开关设置颜色
let newColor = this.value ? this.onColor : this.offColor;
// 改变边框和背景色
this.$refs.core.style.borderColor = newColor;
this.$refs.core.style.backgroundColor = newColor;
}
}
label
最外面是label，上面会根据是否禁用以及是否有文字来设置不同的类名。
<label
class="el-switch"
:class="{
'is-disabled': disabled,
'el-switch--wide': hasText
}">
</label>
hasText
只要传入了on-text或者off-text就表明有文字。
computed: {
hasText() {
return this.onText || this.offText;
},
}
mask
暂时没发现遮罩的作用。
<div class="el-switch__mask" v-show="disabled"></div>
模拟原生input
<input
class="el-switch__input"
type="checkbox"
@change="handleChange"
v-model="_value"
:name="name"
:disabled="disabled">
handleChange
处理change事件。
methods: {
handleChange(event) {
this.$emit('change', event.currentTarget.checked); // 派发 change 事件
},
}
_value
用来保存开关的情况，通过input事件来使用让父级改变value，从而进而改变get获得的值。
computed: {
_value: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
}
}
}
核心部分
这一部分是用户真正接触的开关部分。
<span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
<span class="el-switch__button" :style="buttonStyle"></span>
</span>
其中宽度用了coreWidth，而buttonStyle中目前只设置了transform。
ON 标签
这一部分是用来实现ON标签的。
<transition name="label-fade">
<div
class="el-switch__label el-switch__label--left"
v-show="value"
:style="{ 'width': coreWidth + 'px' }">
<i :class="[onIconClass]" v-if="onIconClass"></i>
<span v-if="!onIconClass && onText">{{ onText }}</span>
</div>
</transition>
label-fade
只是简单的改变了透明度。
& .label-fade-enter,
& .label-fade-leave-active {
opacity: 0;
}
onIconClass
这是用来设置on的时候显示的图标的，如果设置了这个就不会再显示文字。
props: {
onIconClass: {
type: String,
default: ''
},
}
OFF 标签
这与ON类似，不再进行细致分析。
<transition name="label-fade">
<div
class="el-switch__label el-switch__label--right"
v-show="!value"
:style="{ 'width': coreWidth + 'px' }">
<i :class="[offIconClass]" v-if="offIconClass"></i>
<span v-if="!offIconClass && offText">{{ offText }}</span>
</div>
</transition>
