element-ui radio-button组件源码学习

2018年10月09日Web前端

前面看了radio组件的源码,接下来看下,与其类似的radio-group组件的源码。

一、html结构

最外层是一个label元素,使用了el-radio-button类。和radio类似,动态的class如下:

:class="[
    size ? 'el-radio-button--' + size : '',
    { 'is-active': value === label },
    { 'is-disabled': isDisabled },
    { 'is-focus': focus }
]"

size控制了radio-group的尺寸,剩下的还有active状态,disabled状态和focus状态的样式。

往内一层是一个原生的radio和span标签。 和radio类似,此input元素设置了change、focus和blur事件,由于设置了-1的tabindex,所以他不能被tab键选中。radiobutton中的给了z-index为-1的属性,所以我们看不到此元素。

input元素之后是实际显示内容的,当组件标签在使用时有内容时,则显示,否则显示对应的label的值。

<!-- 组件标签之间的内容显示 -->
<slot></slot>
<!-- 组件标签没有内容则,直接显示该组件的label值 -->
<template v-if="!$slots.default">{ {label}}</template>

二、JS部分

name

名称

mixins

混入广播事件

inject

注入了elForm和elFormItem,当没有与form和formitem使用时,此处的默认值就有用了。

props

  • label:当前组件对应的值
  • disabled:是否禁用
  • name:原生radio的name值,用于radio关联

data()

  • focus:该组件是否有焦点。

computed

  • value:获取当前选中值和设置值

    value: {
    get() {
    // 直接返回group的值
        return this._radioGroup.value;
    },
    set(value) {
        // 修改radio-group组件中的model值
        this._radioGroup.$emit('input', value);
    }
    // 也就是radio-button必须和radio-group组件配合使用,因为他没有对应的model值,
    // 他所使用的都是group的。
    }
  • _radioGroup():查找到对应父group组件

    _radioGroup() {
    let parent = this.$parent;
    // 循环向父级查找
    while (parent) {
        if (parent.$options.componentName !== 'ElRadioGroup') {
            parent = parent.$parent;
        } else {
            // 返回对应的父组件引用
            return parent;
        }
    }
    return false;
    }
  • activeStyle():根据group的配置,来设置样式。
  • _elFormItemSize():form item的大小。
  • size():整体button大小,最后反馈到样式上。
  • isDisabled():该组件是否禁用。
  • tabIndex():设置tabindex的值。

methods

  • handleChange()

    handleChange() {
    this.$nextTick(() => {
    // 由于是radiobutton要和group一起使用,所以没有判断是否有group组件。
        this.dispatch('ElRadioGroup', 'handleChange', this.value);
    });
    }

    附上带注释的源码:radio-button.vue