看完最简单的alert组件，下面来看下radio组件。
一、html结构分析
el-radio双标签，使得radio中的内容也包含在组件之内，这样用户点击radio之后的内容，也可以选中属于他的radio了。
class下有多个变量控制不同情况的样式，通过命名就可以看出。后面三个是无障碍网页应用属性（最早在bootstrap上看到，当时知道role属性，现在了解了还有aria-*这一类的）：
role="radio" :aria-checked="model===label" :aria-disabled="isDisabled"
此处对label标签设置tabindex，是为了让使用者可以通过tab键选择不同的radio，space键的keydown事件则是用于选中radio标签，这样用户仅用键盘就可以选择radio了。
而接下来则是两个span，一个是用于显示左侧圆形的替代浏览器原生radio的，另一部分则是用于显示radio后的提示文字的。
左侧radio框设置了disabled和checked来控制整体radio的样式。再内部则是，radio的主体显示元素，通过border-radius看上去变成了圆形，并设置了蓝色的背景色。此处看下浏览器下渲染的效果，
内部的白色小圆，是通过设置after伪元素，并利用transform和绝对定位使白底圆居中，使用scale实现动画。
<input class="el-radio__original" :value="label" type="radio" aria-hidden="true" v-model="model" @focus="focus=true" @blur="focus=false" @change="handleChange" :name="name" :disabled="isDisabled" tabindex="-1" >
紧接着是一个原生的input标签。这样radio的唯一选中的特性，就可以直接使用了。我们发现这个radio设置了透明度为0，并且绝对定位到span实现的radio之上，这样使用者实际操作的仍旧是原生的radio，只不过操作结果会被反馈到界面的radio上。
input上增加了focus、blur、change事件的监听，focus和blur用于样式的改变，change则用于修改当前value的值，并触发绑定的change事件。
input的tabindex被设置成了-1，这样使用者就不会通过tab键选中这个界面上看不见的radio元素了。
紧接着是显示radio内容的span元素，并设置了@keydown.stop，阻止事件的冒泡。
<span class="el-radio__label" @keydown.stop>
<!-- radio后内容显示区域 -->
<slot></slot>
<!-- 当使用el-radio组件时，没有实际的节点内容时，会默认显示该radio的value值 -->
<template v-if="!$slots.default">{{label}}</template>
</span>这样，radio的html部分就结束了，看下对应的js部分。
二、JS部分
js部分的话，改下风格，按照导出对象的层次进行分析，这样看上去会比较清晰。
按属性和名称来查看下，
name
名称
mixins
混入了broadcast和dispatch两个事件方法
inject
注入 elForm,elFormItem两个对象，用于disabled，size等值的判断。
componentName
存放了该组件的名称。
props
- value：选中的radio的值(v-model的值)isGroup()
- label：该radio选项的值
- disabled：是否禁用该radio
- name：原生name属性，用于控制哪几个radio有关联
- border：radio是否带外边框，使用者可以设置radio带边框这种风格
- size：整体控制radio大小
data()
- focus：当前的 radio是否有获取了焦点。
computed
- isGroup()：判断是否存在radio group。
直接查看下该函数的实现：
let parent = this.$parent;
// 遍历逐层查找父元素，当能找到父元素组件名是ElRadioGroup的，则返回true，否则false
while (parent) {
if (parent.$options.componentName !== 'ElRadioGroup') {
// 逐层向上
parent = parent.$parent;
} else {
// 若是radio group，保存group组件的引用
this._radioGroup = parent;
return true;
}
}
return false;- model：指本radio的值，此处用代理的方式表示当前radio的值，因为当前值得获取和设置并不是一个属性可以直接表示的。
get() {
// model的获取值，radio group时，则取group中的value，否则取当前radio的值
return this.isGroup ? this._radioGroup.value : this.value;
},// 设置值
set(val) {
if (this.isGroup) {
// group则，向上传播，触发input事件，修改group中的值
this.dispatch('ElRadioGroup','input',[val]);
} else {
// 非group时，只要改本组件的model值
this.$emit('input',val);
}
}- _elFormItemSize()：获取formitem的大小。
- radioSize()：控制radio的大小
- isDisabled()：该组件是否是禁用状态的。disabled的优先级是：group > 本radio > form。
- tabIndex()：用于设置组件的tab-index值。
methods
- handleChange()：当radio的值发生变化时触发
主要负责事件的通知与触发：
this.$nextTick(() => {
// 触发实例上的change事件，并将当前radio值作为参数
this.$emit('change',this.model);
// group的情况下，触发名为ElRadioGroup的父组件下的handleChange事件，也将当前选中值作为参数
this.isGroup && this.dispatch('ElRadioGroup','handleChange',this.model);
});带注释的源码下载：radio组件。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。