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

前面看了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 。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!