Element分析（组件篇）——Radio

_index.js

单选框内部一共有三个组件：el-radio、el-radio-button和el-radio-group，我们将一一进行讲解。

import Radio from './src/radio';
import RadioButton from './src/radio-button.vue';
import RadioGroup from './src/radio-group.vue';

export default function(Vue) {
  Vue.component(Radio.name, Radio);
  Vue.component(RadioButton.name, RadioButton);
  Vue.component(RadioGroup.name, RadioGroup);
};

export { Radio, RadioButton, RadioGroup };

---

radio-group

radio-group的实现十分简单，就是一个div.radio-group包裹着一个slot。

script包含一系列改变样式的prop。

props: {
  size: String,  // Radio 按钮组尺寸
  fill: {  // 按钮激活时的填充色和边框色
    type: String,
    default: '#20a0ff'
  },
  textColor: {  // 按钮激活时的文本颜色
    type: String,
    default: '#fff'
  }
},

watch上监听了value，它会触发change事件并且向父组件传递el.form.change事件。

watch: {
  value(value) {
    this.$emit('change', value);
    this.dispatch('ElFormItem', 'el.form.change', [this.value]);
  }
}

其中dispatch是从emitter这一mixin中引入的，我们将在mixin篇中进行讲解，简单的说，这是用来模拟vue1.0中向父组件传播事件的$dispatch的。

mixins: [Emitter],

---

radio

radio组件其实也先相对简单，它同样引入了emitter这一mixin，我们将按照从外往里的顺序进行分析。

label

首先最外面是一个label标签作为包裹。

input

然后，是作为input的span部分，它包含一个用来表示选中效果的span和一个不可以见的input用来模拟原生的radio。

最外层el-radio__input

最外层是span.el-radio__input，上面有一些动态class，来调整样式，我们也将一一进行讲解。

disabled

disabled是一个简单的Boolean型的prop，会影响是否可以选中。

props:{
  disabled: Boolean,
}

label

label是radio选中时的value，也是通过prop传递的。

props: {
  label: {},
}

model

model是一个计算属性，也不是很复杂，就是用来实现v-model的。

computed: {
  model: {
    get() {
      // 如果父组件是radio-group，返回父组件的value，否则返回自己的value
      return this.isGroup ? this._radioGroup.value : this.value;
    },

    set(val) {
      if (this.isGroup) {
        // 如果父组件是 radio-group，派发input事件，让父组件去 emit input 事件
        this.dispatch('ElRadioGroup', 'input', [val]);
      } else {
        // 否则自己 emit input 事件
        this.$emit('input', val);
      }
    }
  }
}

其中isGroup是另一个计算属性，用来一直向上寻找，看看有没有父组件乃至祖先组件是radio-group。

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

focus

focus是一个data属性，会在原生的input的获得焦点和失去焦点时被改变。

el-radio__inner

el-radio__inner是用来实现选中效果的，通过css控制。

input

最后是一个input来模拟原生的radio，上面进行了一些简单的处理，并绑定了相应的数据。

---

radio-button

radio-button和radio基本上一样。

label

最外面仍然是一个label。

size

size是一个计算属性，它直接使用了沿着父组件向上寻找到的radio-group上设置的size。

computed: {
  size() {
    return this._radioGroup.size;
  }
}

_radioGroup也是一个计算属性，它将一直向上寻找radio-group：

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

label

label是一个prop，用来表示选中该按钮时的value值。

props: {
  label: {},
}

value

value是用来实现v-model的，来获取选择的按钮，从其代码可以看出来，radio-button和radio不同，它不能脱离radio-group单独使用：

computed: {
  value: {
    get() {
      return this._radioGroup.value;
    },
    set(value) {
      this._radioGroup.$emit('input', value);
    }
  },
}

input

然后是用来模拟原生radio的input，上面绑定了相应的数据：

el_radio-button__inner

最后是真正会显示的按钮span即其样式，它内部的值可以通过匿名的默认slot或者label进行设置，前者具有更高的优先级：

可以看出上面还绑定了一个动态的style，它通过判断value === label决定当前按钮是否被选中，然后应用activeStyle，而这个activeStyle也是一个计算属性，简单的说它会根据父级radio-group的属性来设置样式：

computed: {
  activeStyle() {
    return {
      backgroundColor: this._radioGroup.fill,
      borderColor: this._radioGroup.fill,
      color: this._radioGroup.textColor
    };
  },
}