element-ui radio 组件源码分享

今日简单分享 radio 组件的实现原理,主要从以下三个方面来分享:

1、radio 页面结构

2、radio 组件属性

3、radio 组件方法

一、radio 页面结构

1.1 页面结构如下:

二、radio 属性

2.1 value / v-model 属性,类型为 string / number / boolean,无默认值:

组件内部的 value 接收来自父组件的 v-model 传过来的值,代码部分如下:

组件内部部分的逻辑:

1、页面模板部分:v-model="model"

2、属性部分:value,通过这个属性来接收父组件 v-model 传过来的值

3、computed 部分:model,通过 get 方法获取父组件 v-model 的值,然后通过 set 方法设置将 input 值传递出去。如 this.$emit('input',val);

简单说明:在创建自定义组件时, this.$emit('input',val) 是一个常用模式,主要是触发 input 事件,并将 val 传递出去。这与 vue 的双向绑定和表单输入元素的工作方式有关,在 vue 中,v-model 是一个语法糖,用来实现数据的双向绑定,当使用 v-model 将一个表单输入绑定到 vue 实例上时, vue 是自动为这个元素添加 value 的 getter 和 setter。而当元素 value 的值变化时,会触发 input 事件,更新绑定的数据属性。

2.2 label 属性,类型为 string / number / boolean,无默认值:

2.3 disabled 属性,类型 boolean,默认 false

2.3.1 页面使用,如下:

2.3.2 对应的 disabled 样式可以在样式文件表中找到,如下:

2.3.2 isDisabled 计算属性,如下:

2.4 border 属性,类型是 boolean,默认值 false

这个属性相对简单,在交互上主要是为 radio 添加边框,在实现上主要是通过向组件内部传递属性,通过属性判断是否为 radio 增加边框样式。具体如下:

2.5 size 属性,类型 string,medium / small / mini,无默认值

这个属性的实现逻辑和 disabled 属性大致相同,二者都是通过使用计算属性的方式来控制 dom 的最终展示效果,针对于下面的讲解,主要先针对于 el-radio 组件进行详细说明,至于涉及到的 el-radio-group 的部分,将会有一个专门的分享。具体如下:

通过上图发现,实现的核心部分是 radioSize 这个计算属性,如下:

2.6 name 属性,类型 string,无默认值

给原生 input 标签添加了 name 属性,一般开发当中没特意关注过这个属性,个人理解加上 name 属性可能会提高代码的可读性吧,源码如下:

三、radio 事件

3.1 input 事件,绑定值发生变化时触发的事件,回调参数为选中的 radio label 值,具体如下:

通过 input 事件可以进行获取值之后的操作,源码如下:

  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值