element-ui radio组件源码学习

看完最简单的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看上去变成了圆形，并设置了蓝色的背景色。此处看下浏览器下渲染的效果，

<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"
>

<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组件。

（编辑：李大同）

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