Element的Radio组件

552 阅读1分钟

主要内容

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方法,供使用refs时进行调用。如果是elradiogroup这种里面没有包裹非原生组件的组件,可以通过watchvalue来触发校验,当值发生了改变就触发一个el.form.change事件,然后在ElFormItemrefs时进行调用。 如果是el-radio-group这种里面没有包裹非原生组件的组件,可以通过watch value来触发校验,当值发生了改变就触发一个el.form.change事件,然后在ElFormItem用on监听一下

watch: {
  value(value) {
    this.dispatch('ElFormItem', 'el.form.change', [this.value]);
  }
}

radio组件就这些