element源码（五）radio 单选框组件

系列文章目录

第一章 element源码（一）简要介绍
第二章 element源码（二）Layout 布局组件
第三章 element源码（三）色彩、字体、边框与图标
第四章 element源码（四）button按钮组件
第五章 element源码（五）radio 单选框组件

---

一、radio组件

源码/packages/radio/src/radio.vue

<template>
  <label class="el-radio">
    <span class="el-radio__input">
      <span class="el-radio__inner"></span>
      <input ref="radio"
      		 v-model="model"
             class="el-radio__original"
             type="radio">
    </span>
    <span class="el-radio__label"
          @keydown.stop>
      <slot></slot>
    </span>
  </label>
</template>

基本结构：label标签内含（1）input标签type="radio"和（2）slot插槽

---

二、逻辑实现

value / v-model 绑定值 string / number / boolean

computed: {
    model: {
      get () {
        return this.isGroup ? this._radioGroup.value : this.value
      },
      set (val) {
        if (this.isGroup) {
          this.dispatch('ElRadioGroup', 'input', [val]);
        } else {
          this.$emit('input', val);
        }
        this.$refs.radio && (this.$refs.radio.checked = this.model === this.label);
      }
    },
  }

value绑定值，用计算属性computed接收。基本上element组件中绑定值的处理都是这样完成的，在get中取值，然后在set通过$emit事件将结果传到父组件。
在radio的具体案例中因为input上设置v-modle=“model”，选中radio时由于双向绑定计算机属性model会被赋值触发了set向外传递值,父组件可以通过@input取到值。

isGroup () {
      let parent = this.$parent;
      while (parent) {
        if (parent.$options.componentName !== 'ElRadioGroup') {
          parent = parent.$parent;
        } else {
          this._radioGroup = parent;
          return true;
        }
      }
      return false;
    }

get函数中this.isGroup ? this._radioGroup.value : this.value有radio-group时取radio-group上绑定的value，源码中的isGrop函数 在第二章layout布局组件中介绍el-row时解析过。看一下两者的区别。

 <template>
  <div>
    <!-- 有el-radio-group -->
    <el-radio-group v-model="radio">
      <el-radio :label="1">备选项</el-radio>
      <el-radio :label="2">备选项</el-radio>
      <el-radio :label="3">备选项</el-radio>
    </el-radio-group>
    
    <!-- 无el-radio-group -->
    <el-radio v-model="radio"
              :label="1">备选项</el-radio>
    <el-radio v-model="radio"
              :label="2">备选项</el-radio>
  </div>
</template>

使用区别不大，类似功能的组件进行编组更符合设计原则。再看一下选中的样式处理。

<label class="el-radio"
         :class="[{ 'is-disabled': isDisabled },{'is-checked': model === label}]">
    <span class="el-radio__input"
          :class="{
        'is-disabled': isDisabled,
        'is-checked': model === label
      }">

根据model===label（这个条件的逻辑很简单），绑定了两个is-checked类名。接下来就是用scss处理这两个类名的样式了（实际上只处理el-radio__input上的is-checked）

@include b(radio) {
	@include e(input) {
		@include when(checked) {
			.el-radio__inner {
				border-color: $--radio-checked-input-border-color;
				background: $--radio-checked-icon-color;

				&::after {
					transform: translate(-50%, -50%) scale(1);
				}
			}

			&+.el-radio__label {
				color: $--radio-checked-font-color;
			}
		}
	}
}
//=> 编译成 编译过程的解析请看第二章
.el-radio__input .is-checked .el-radio__inner{...}
.el-radio__input .is-checked .el-radio__label{...}

其中.el-radio__inner是前面的圆点，.el-radio__label是文字信息，然后定义了选中的颜色

---

总结

有部分属性如，size，border和样式相关的属性就不再解析了，前面几章基本上都涵盖了样式上的处理（主要是scss上的处理）。然后之后的组件只有在处理上比较特殊的才会拿出来讲了。