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两个文件的分析可以查看 https://www.zhuyuntao.cn/2018/10/24/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。