Element-ui 之 Radio 组件的源码分析

此篇文章将从Radio组件提供的属性和事件的角度，逐步分析element-ui的Radio组件源代码，从而介绍如何实现一个完整的Radio组件。

一. Radio 组件提供的属性和事件

1.1 属性

以下是 Radio 组件提供的属性：

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	–	–
label	Radio 的 value	string / number / boolean	–	–
disabled	是否禁用	boolean	–	false
border	是否显示边框	boolean	–	false
size	Radio 的尺寸，仅在 border 为真时有效	string	medium / small / mini	–
name	原生 name 属性	string	–	–

1.2 事件

事件名称	说明	回调参数
input	绑定值变化时触发的事件	选中的 Radio label 值

二. 按照步骤去实现Radio 组件的属性和事件

1. 注册组件。
2. 完成组件基本的 template 部分。
3. 设置组件的绑定值 value/v-model、 Radio 的 value 以及Radio的中文描述。
4. 设置禁用属性 disabled。
5. 设置是否显示边框属性 border。
6. 设置 Radio 组件尺寸的 size 属性。
7. 设置原生 name 属性。
8. 支持屏幕阅读器的识别。
9. 增加元素 focus 的样式。

三. Radio 组件属性和事件的具体实现

3.1 注册组件

新建一个 radio.vue 文件，设置组件的 name 和 componentName 都为 ElRadio。
在 main.js 文件里面引入这个组件，并且使用 Vue.component 来全局注册这个组件。

radio.vue 文件：

<template>
  <label
    ...
  </label>
</template>
<script>
export default {
     
     
   name: 'ElRadio',
   componentName: 'ElRadio',
}

</script>

main.js 注册组件：

import Radio from './components/radio/radio';

const components = [
  Radio,
]

components.forEach(component => {
  Vue.component(component.name, component);

});

3.2 完成组件基本的 template 部分

<template>
  <!-- 整体用 label 标签包裹 -->
  <label
   class="el-radio"
   role="radio"
  >
   <!-- radio 左侧的点击按钮，用 span 做样式，将 input type=radio 放置在 span 标签的下方 -->
   <span class="el-radio__input">
     <span class="el-radio__inner"></span>
     <input
       class="el-radio__original"
       type="radio"
       autocomplete="off"
     />
   </span>
   <!-- radio 右侧的描述 -->
   <span class="el-radio__label">
     ...
   </span>
  </label>
</template>

• Radio 组件整体用 label 标签包裹。
• Radio 组件左侧的点击按钮是用 span 标签做样式，将 input type=radio 放置在 span 标签的下方。
• Radio 组件右侧的描述用 span 标签包裹。

3.3 设置组件的绑定值 value/v-model 、 Radio 的 value 以及Radio的中文描述

3.3.1 设置 Radio 的 value

描述：
将父组件传入的 label 属性作为 Radio 组件中 input type="radio" 标签的 value 属性值。

实现步骤：

父组件：将 label 的值传过去。

<template>
  <div>
   <el-radio label="1">选项1</el-radio>
   <el-radio label="2">选项2</el-radio>
  </div>
</template>

Radio 组件：

1. 组件内部接收父组件传过来的 label 属性。
2. 将 type=radio 的单选按钮的 value 设置为 label 的值。

Radio.vue 文件：

<template>
  <!-- 整体用 label 标签包裹 -->
  <label
   class="el-radio"
   role="radio"
  >
   <!-- radio 左侧的点击按钮，用 span 做样式，将 input type=radio 放置在 span 标签的下方 -->
   <span class="el-radio__input">
     <span class="el-radio__inner"></span>
     <!-- 将 type=radio 的单选按钮的 value 设置为 label 的值 -->
     <input
       class="el-radio__original"
       type="radio"
       :value="label"
       autocomplete="off"
     />
   </span>
   <!-- radio 右侧的描述 -->
   <span class="el-radio__label">
    ...
   </span>
  </label>
</template>
<script>
export default {
     
     
  name: 'ElRadio',
  componentName: 'ElRadio',
  props: {
     
     
    // 接收父组件传过来的 label 属性
    label: {
     
     }
  }
}
</script>

3.3.2 设置 Radio 的中文描述

实现步骤：

1. 用 slot 插槽接收父组件传过来的标签内的内容。
2. 如果父组件标签内没有内容，则展示 label 属性内容。

Radio.vue 文件：

<!-- radio 右侧的描述 -->
<span class="el-radio__label