element-ui switch组件源码学习
捞点时间，继续了解下element-ui下的switch组件。
一、html结构
最外层是个div元素，看下该元素的属性，一个基本的class，外加switchDisabled控制disabled样式，checked控制当前选中的状态。
role、aria-checked、aria-disabled是无障碍网页应用属性。还绑定了个click事件，用于用户点击时切换。
往内是一个type是checkbox的input，为其绑定了change和enter的keydown事件，还有原生的id和name属性。当然此input在dom树上存在，但是宽高都为0，所以用户是点击不到的。 后面的三个span元素分别是显示switch关闭时的值、switch按钮和switch打开时的值。
关闭时的值和打开值的span是类似的，checked相反控制了他们的active状态。当然，如果不设置打开和关闭的内容（text或icon的class），这两个span是不会显示的。
switch按钮底部的话是由第二个span实现的，而上面的白色圆是由after伪类实现的。动画是由transition实现的。 html的部分就这么多了，下面看下js部分。
二、JS部分
import的Focus和Migrating两个文件的分析可以查看 element-ui-focus-js和migrating-js文件源码学习。
name
名称
mixins
混入两方法，focus则是对当前input元素进行聚焦。Migrating则被后面定义的给覆盖了。
inject
注入elForm对象，防止不和el-form使用时对象不存在的问题。
props
- value，当前该组件的值。
- disabled，是否禁用。
- width，switch按钮的宽度。
- activeIconClass，switch 打开时所显示图标的类名，设置此项会忽略 active-text。
- inactiveIconClass，switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text。
- activeText，switch 打开时的文字描述。
- inactiveText，switch 关闭时的文字描述。
- activeColor，switch 打开时的背景色。
- inactiveColor，switch 关闭时的背景色。
- activeValue，switch 打开时的值。
- inactiveValue，switch 关闭时的值。
- name，原生input 对应的 name 属性。
- id，原生的id。
data()
- coreWidth，switch整体的宽度。
created
组件创建后，有对组件的默认值进行处理。
// ~x 相当于 x+1, 由于indexOf是-1时，表示没匹配上，即false
// 所以 if (~x) 表示匹配成功后，此处取反
if (!~\[this.activeValue, this.inactiveValue\].indexOf(this.value)) {
// value不是两种值时，默认赋值关闭情况下的值
this.$emit('input', this.inactiveValue);
}computed
- checked()，该方法用于判断当前是否是选中状态。
- switchDisabled()，判断组件是否是disabled状态，判断优先级是 本身 > form。
watch
- checked()，对checked进行监听，也就是对this.value === this.activeValue，进行监听。当checked状态变化时，做处理。
// 先修改原生checkbox的checked值
this.$refs.input.checked = this.checked;
// 是否有开启和关闭对应的颜色
if (this.activeColor || this.inactiveColor) {
// 设置背景色
this.setBackgroundColor();
}methods
- handleChange(event)，用于处理switch值变化。
我们可以使用this.$emit('input')，修改当前的value值，由于组件的value值是前一次的值，所以需要取反处理。
而修改value值并不是立即生效，而且为了防止父组件未修改值，所以进行了重复赋值。
- setBackgroundColor()，根据当前是否checked，设置背景颜色。
- switchValue()，当用户点击swtich的click事件。
- getMigratingConfig()，替换混入的同方法，用于提示迁移的属性和方法。
mounted
this.coreWidth = this.width || 40;先对宽度做了兼容处理，默认是40px。
随后判断是否要设置背景色。最后修改了原生input的值，与当前的值相同。
带注释的源码下载：switch.vue。