_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。
<template>
<div class="el-radio-group">
<slot></slot>
</div>
</template>
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标签作为包裹。
<label class="el-radio">
</label>
input
然后，是作为input的span部分，它包含一个用来表示选中效果的span和一个不可以见的input用来模拟原生的radio。
最外层el-radio__input
最外层是span.el-radio__input，上面有一些动态class，来调整样式，我们也将一一进行讲解。
<span class="el-radio__input"
:class="{
'is-disabled': disabled,
'is-checked': model === label,
'is-focus': focus
}"
>
</span>
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控制。
<span class="el-radio__inner"></span>
input
最后是一个input来模拟原生的radio，上面进行了一些简单的处理，并绑定了相应的数据。
<input
class="el-radio__original"
:value="label"
type="radio"
v-model="model"
@focus="focus = true"
@blur="focus = false"
:name="name"
:disabled="disabled">
radio-button
radio-button和radio基本上一样。
label
最外面仍然是一个label。
<label
class="el-radio-button"
:class="[
size ? 'el-radio-button--' + size : '',
{ 'is-active': value === 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，上面绑定了相应的数据：
<input
class="el-radio-button__orig-radio"
:value="label"
type="radio"
v-model="value"
:name="name"
:disabled="disabled">
el_radio-button__inner
最后是真正会显示的按钮span即其样式，它内部的值可以通过匿名的默认slot或者label进行设置，前者具有更高的优先级：
<span class="el-radio-button__inner" :style="value === label ? activeStyle : null">
<slot></slot>
<template v-if="!$slots.default">{{label}}</template>
</span>
可以看出上面还绑定了一个动态的style，它通过判断value === label决定当前按钮是否被选中，然后应用activeStyle，而这个activeStyle也是一个计算属性，简单的说它会根据父级radio-group的属性来设置样式：
computed: {
activeStyle() {
return {
backgroundColor: this._radioGroup.fill,
borderColor: this._radioGroup.fill,
color: this._radioGroup.textColor
};
},
}
网友评论