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

2018年10月11日Web前端0

继续看有关radio的，还剩下个radio-group，继续看下。

一、html结构

首先，radio-group是配合radio与radio-button一起使用的。

<div
    class="el-radio-group"
    role="radiogroup"
    @keydown="handleKeydown"
>
    <!-- 显示内部的el-radio或el-radio-button -->
    <slot></slot>
</div>

html部分十分简单，只有个外层的div，内部的slot显示内嵌的元素等数据。

二、JS部分

首先是一个keyCode对象，这采用了Object.freeze方法冻结了方向键的keyCode值，使得改对象无法被改变。

const keyCode = Object.freeze({
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40
});

接着看对应的数据：

name

名称

componentName

组件名

inject

注入form-item

mixins

混日组件通信的方法

props

  • value：当前组件的值（model）
  • size：radioGroupSize使用，也是配合radio-button组件使用
  • fill：背景色，配合radio-button组件使用
  • textColor：文本颜色，即前景色，给radio-button组件使用
  • disabled：是否禁用

computed

  • _elFormItemSize()：formitem大小
  • radioGroupSize()：radio组大小，配合给radio-button组件时使用

created

created() {
    // 绑定handleChange事件
    this.$on('handleChange', value => {
        // 触发实例上的change事件
        this.$emit('change', value);
    });
}

组件创建时，绑定handleChange事件，用于触发实例上的事件。

mounted

// 选取当前group中所有的radio
const radios = this.$el.querySelectorAll('[type=radio]');
// 选取第一个radio（组件）
const firstLabel = this.$el.querySelectorAll('[role=radio]')[0];
if (![].some.call(radios, radio => radio.checked) && firstLabel) {
   // 当radioGroup没有默认选项时，第一个可以被Tab键选中
   firstLabel.tabIndex = 0;
}

在radio-button和radio组件中的tabIndex函数中，我们都知道，只有当前被选中的那个组件才可以被tab键选中。而此处的mounted处理了，当没有值被选中时，我们可以通过tab键选第一个组件，这样也就避免了tab键跳过次组件的问题了。

methods

  • handleKeydown(e)：处理键盘按钮事件，处理上下左右事件。

switch之前是用来确定当前按钮在group中的顺序index。

keyCode.LEFT和keyCode.UP都是向左侧选择，并对边界值做了判断。 keyCode.RIGHT和keyCode.DOWN是向右侧选择，不过此处有个疑问，为啥阻止冒泡和阻止默认只在其中的一个if-else中。

watch

  • value

对group的model值进行了监听，当值改变时，便会向上查找ElFormItem父组件并触发el.form.change事件。 到这有关radio的就看完了。

带注释的文件地址：radio-group.vue。

Element-uiVue源码解析纯原创

目录