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
data()
created组件创建后,有对组件的默认值进行处理。 // ~x 相当于 x+1,由于indexOf是-1时,表示没匹配上,即false // 所以 if (~x) 表示匹配成功后,此处取反 if (!~[this.activeValue,this.inactiveValue].indexOf(this.value)) { // value不是两种值时,默认赋值关闭情况下的值 this.$emit('input',this.inactiveValue); } computed
watch
// 先修改原生checkbox的checked值 this.$refs.input.checked = this.checked; // 是否有开启和关闭对应的颜色 if (this.activeColor || this.inactiveColor) { // 设置背景色 this.setBackgroundColor(); } methods
我们可以使用this.$emit(‘input’),修改当前的value值,由于组件的value值是前一次的值,所以需要取反处理。 而修改value值并不是立即生效,而且为了防止父组件未修改值,所以进行了重复赋值。
mountedthis.coreWidth = this.width || 40; 先对宽度做了兼容处理,默认是40px。 随后判断是否要设置背景色。最后修改了原生input的值,与当前的值相同。 带注释的源码下载:switch.vue。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |