element源码(五)radio 单选框组件

系列文章目录

第一章 element源码(一)简要介绍
第二章 element源码(二)Layout 布局组件
第三章 element源码(三)色彩、字体、边框与图标
第四章 element源码(四)button按钮组件
第五章 element源码(五)radio 单选框组件


一、radio组件

源码/packages/radio/src/radio.vue

<template>
  <label class="el-radio">
    <span class="el-radio__input">
      <span class="el-radio__inner"></span>
      <input ref="radio"
      		 v-model="model"
             class="el-radio__original"
             type="radio">
    </span>
    <span class="el-radio__label"
          @keydown.stop>
      <slot></slot>
    </span>
  </label>
</template>

基本结构:label标签内含(1)input标签type="radio"和(2)slot插槽


二、逻辑实现

value / v-model 绑定值 string / number / boolean

computed: {
    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);
      }
    },
  }

value绑定值,用计算属性computed接收。基本上element组件中绑定值的处理都是这样完成的,在get中取值,然后在set通过$emit事件将结果传到父组件。
在radio的具体案例中因为input上设置v-modle=“model”,选中radio时由于双向绑定计算机属性model会被赋值触发了set向外传递值,父组件可以通过@input取到值。

isGroup () {
      let parent = this.$parent;
      while (parent) {
        if (parent.$options.componentName !== 'ElRadioGroup') {
          parent = parent.$parent;
        } else {
          this._radioGroup = parent;
          return true;
        }
      }
      return false;
    }

get函数中this.isGroup ? this._radioGroup.value : this.value有radio-group时取radio-group上绑定的value,源码中的isGrop函数 在第二章layout布局组件中介绍el-row时解析过。看一下两者的区别。

 <template>
  <div>
    <!-- 有el-radio-group -->
    <el-radio-group v-model="radio">
      <el-radio :label="1">备选项</el-radio>
      <el-radio :label="2">备选项</el-radio>
      <el-radio :label="3">备选项</el-radio>
    </el-radio-group>
    
    <!-- 无el-radio-group -->
    <el-radio v-model="radio"
              :label="1">备选项</el-radio>
    <el-radio v-model="radio"
              :label="2">备选项</el-radio>
  </div>
</template>

使用区别不大,类似功能的组件进行编组更符合设计原则。再看一下选中的样式处理。

<label class="el-radio"
         :class="[{ 'is-disabled': isDisabled },{'is-checked': model === label}]">
    <span class="el-radio__input"
          :class="{
        'is-disabled': isDisabled,
        'is-checked': model === label
      }">

根据model===label(这个条件的逻辑很简单),绑定了两个is-checked类名。接下来就是用scss处理这两个类名的样式了(实际上只处理el-radio__input上的is-checked)

@include b(radio) {
	@include e(input) {
		@include when(checked) {
			.el-radio__inner {
				border-color: $--radio-checked-input-border-color;
				background: $--radio-checked-icon-color;

				&::after {
					transform: translate(-50%, -50%) scale(1);
				}
			}

			&+.el-radio__label {
				color: $--radio-checked-font-color;
			}
		}
	}
}
//=> 编译成 编译过程的解析请看第二章
.el-radio__input .is-checked .el-radio__inner{...}
.el-radio__input .is-checked .el-radio__label{...}

其中.el-radio__inner是前面的圆点,.el-radio__label是文字信息,然后定义了选中的颜色


总结

有部分属性如,size,border和样式相关的属性就不再解析了,前面几章基本上都涵盖了样式上的处理(主要是scss上的处理)。然后之后的组件只有在处理上比较特殊的才会拿出来讲了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值