主要内容
radio包含三个部分,el-radio,el-radio-button.el-radio-group组件,先来看el-radio组件
size
通过传入size,之后进行computed计算属性处理为radioSize,根据传入的值不同,渲染不同的样式,样式函数在mixins.scss里面,具体可以自己看,里面有一个降级处理,先去radio组件的size,没有在取el-form-item的size,在没有就降级到全局的size属性(this.$ELEMENT),如果有全局size的话
value
v-model绑定的value值,会被computed处理为如下一个model
model: {
get() {
return this.isGroup ? this._radioGroup.value : this.value;
},
set(val) {
if (this.isGroup) {
this.dispatch("ElRadioGroup", "input", [val]);
} else {
this.$emit("input", val);
}
this.$refs.radio &&
(this.$refs.radio.checked = this.model === this.label);
},
},
会对this.isGroup做判断,如果有el-radio-group包裹且用v-model传入了值,就优先有el-radio-group的值,否则就用el-radio的值,如果this.isGroup为true也会触发set函数,里面有一个input函数,用于实现v-model双向绑定
同时有这么一个判断this.$refs.radio && (this.$refs.radio.checked = this.model === this.label);这里主要是实现this.label为v-model的value,如果相同,checked的属性就true选中
其他props没有什么好说的,就是添加之后,会改变一些样式什么的
handleChange方法
methods: {
handleChange() {
this.$nextTick(() => {
this.$emit("change", this.model);
this.isGroup &&
this.dispatch("ElRadioGroup", "handleChange", this.model);
});
},
},
该方法会给elradiogroup派发一个handleChange事件,该事件最终会emit一个change方法,供使用on监听一下
watch: {
value(value) {
this.dispatch('ElFormItem', 'el.form.change', [this.value]);
}
}