element-ui switch组件源码学习

2018年10月25日Web前端

捞点时间,继续了解下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