element-ui radio组件源码学习

2018年10月08日Web前端

看完最简单的alert组件,下面来看下radio组件。

一、html结构分析

el-radio双标签,使得radio中的内容也包含在组件之内,这样用户点击radio之后的内容,也可以选中属于他的radio了。

class下有多个变量控制不同情况的样式,通过命名就可以看出。后面三个是无障碍网页应用属性(最早在bootstrap上看到,当时知道role属性,现在了解了还有aria-*这一类的):

role="radio"
:aria-checked="model===label"
:aria-disabled="isDisabled"

此处对label标签设置tabindex,是为了让使用者可以通过tab键选择不同的radio,space键的keydown事件则是用于选中radio标签,这样用户仅用键盘就可以选择radio了。

而接下来则是两个span,一个是用于显示左侧圆形的替代浏览器原生radio的,另一部分则是用于显示radio后的提示文字的。 左侧radio框设置了disabled和checked来控制整体radio的样式。再内部则是,radio的主体显示元素,通过border-radius看上去变成了圆形,并设置了蓝色的背景色。此处看下浏览器下渲染的效果,

内部的白色小圆,是通过设置after伪元素,并利用transform和绝对定位使白底圆居中,使用scale实现动画。

<input
    class="el-radio__original"
    :value="label"
    type="radio"
    aria-hidden="true"
    v-model="model"
    @focus="focus=true"
    @blur="focus=false"
    @change="handleChange"
    :name="name"
    :disabled="isDisabled"
    tabindex="-1"
>

紧接着是一个原生的input标签。这样radio的唯一选中的特性,就可以直接使用了。我们发现这个radio设置了透明度为0,并且绝对定位到span实现的radio之上,这样使用者实际操作的仍旧是原生的radio,只不过操作结果会被反馈到界面的radio上。

input上增加了focus、blur、change事件的监听,focus和blur用于样式的改变,change则用于修改当前value的值,并触发绑定的change事件。 input的tabindex被设置成了-1,这样使用者就不会通过tab键选中这个界面上看不见的radio元素了。

紧接着是显示radio内容的span元素,并设置了@keydown.stop,阻止事件的冒泡。

<span class="el-radio__label" @keydown.stop>
    <!-- radio后内容显示区域 -->
    <slot></slot>
    <!-- 当使用el-radio组件时,没有实际的节点内容时,会默认显示该radio的value值 -->
    <template v-if="!$slots.default">{{ label }}</template>
</span>

这样,radio的html部分就结束了,看下对应的js部分。

二、JS部分

js部分的话,改下风格,按照导出对象的层次进行分析,这样看上去会比较清晰。 按属性和名称来查看下,

name

名称

mixins

混入了broadcast和dispatch两个事件方法

inject

注入 elForm,elFormItem两个对象,用于disabled,size等值的判断。

componentName

存放了该组件的名称。

props

  • value:选中的radio的值(v-model的值)isGroup()
  • label:该radio选项的值
  • disabled:是否禁用该radio
  • name:原生name属性,用于控制哪几个radio有关联
  • border:radio是否带外边框,使用者可以设置radio带边框这种风格
  • size:整体控制radio大小

data()

  • focus:当前的 radio是否有获取了焦点。

computed

  • isGroup():判断是否存在radio group。

直接查看下该函数的实现:

let parent = this.$parent;
// 遍历逐层查找父元素,当能找到父元素组件名是ElRadioGroup的,则返回true,否则false
while (parent) {
    if (parent.$options.componentName !== 'ElRadioGroup') {
        // 逐层向上
        parent = parent.$parent;
    } else {
        // 若是radio group,保存group组件的引用
        this._radioGroup = parent;
        return true;
    }
}
return false;
  • model:指本radio的值,此处用代理的方式表示当前radio的值,因为当前值得获取和设置并不是一个属性可以直接表示的。

    get() {
    // model的获取值,radio group时,则取group中的value,否则取当前radio的值
    return this.isGroup ? this._radioGroup.value : this.value;
    },
    // 设置值
    set(val) {
    if (this.isGroup) {
        // group则,向上传播,触发input事件,修改group中的值
        this.dispatch('ElRadioGroup', 'input', [val]);
    } else {
        // 非group时,只要改本组件的model值
        this.$emit('input', val);
    }
    }
  • _elFormItemSize():获取formitem的大小。
  • radioSize():控制radio的大小
  • isDisabled():该组件是否是禁用状态的。disabled的优先级是:group > 本radio > form。
  • tabIndex():用于设置组件的tab-index值。

methods

  • handleChange():当radio的值发生变化时触发

主要负责事件的通知与触发:

this.$nextTick(() => {
    // 触发实例上的change事件,并将当前radio值作为参数
    this.$emit('change', this.model);
    // group的情况下,触发名为ElRadioGroup的父组件下的handleChange事件,也将当前选中值作为参数
    this.isGroup && this.dispatch('ElRadioGroup', 'handleChange', this.model);
});

带注释的源码下载:radio组件