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 事件可以进行获取值之后的操作,源码如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/734570.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鲜为人知的闰年判定大坑

【题目描述】 输入年份,判断是否为闰年。如果是,则输出yes,否则输出no。 提示:简单地判断除以4的余数是不够的。 【题目来源】 刘汝佳《算法竞赛入门经典 第2版》习题1-7 年份(year) 【解析】 一、闰…

Decontam去污染:一个尝试

为了程序运行的便利性,不想将Decontam放到windows的Rstudio里面运行,需要直接在Ubuntu中运行,并且为了在Decontam时进行其他操作,使用python去运行R 首先你需要有一个conda环境,安装了R,Decontam&#xff0…

云计算的部署方式(公有云、私有云、混合云、社区云)

云计算的部署方式(公有云、私有云、混合云、社区云) 目录 零、00时光宝盒 一、云计算的部署方式 1.1、公有云(Public Cloud) 1.2、私有云(Private Cloud)  1.3、混合云(Hybrid Cloud) 1.4、社区云&am…

【C++】list模拟实现list迭代器失效问题

list模拟实现&list迭代器失效问题 一,list模拟实现1. list的主要框架接口模拟2. list构造&拷贝构造&析构3. list迭代器3.1 普通迭代器3.2 const迭代器 4. 增删查改 二,迭代器失效问题1. list的迭代器失效原因2. 解决办法 一,list…

Java 汇编源码查看环境搭建

目录 一、简介 二、在IDEA开发环境中搭建汇编环境 2.1 在IDEA中搭建字节码查看环境 2.1.1 搭建步骤 2.1.1.1 第一步 2.1.1.2 第二步 2.1.1.3 第三步 2.1.1.4 第四步 2.1.2 验证 2.2 在IDEA开发环境中搭建汇编代码查看环境 2.2.2 配置HSDIS插件 2.2.3 验证HSDIS插件是…

js随机整数

在JavaScript中,您可以使用 Math.random() 函数生成一个0到1之间的随机数(包括0,但不包括1),然后通过适当的缩放和取整,可以得到一个随机整数。以下是一个简单的函数,用于生成指定范围内的随机整…

[虚拟机保护逆向] [HGAME 2023 week4]vm

[虚拟机保护逆向] [HGAME 2023 week4]vm 虚拟机逆向的注意点:具体每个函数的功能,和其对应的硬件编码的*长度* 和 *含义*,都分析出来后就可以编写脚本将题目的opcode转化位vm实际执行的指令 :分析完成函数功能后就可以编写脚本输出…

概率论与数理统计 P6 条件概率

文章目录 P6 条件概率一.条件概率二.乘法定理三.全概率公式 & 贝叶斯公式3.1 全概率公式(由因求果)3.2 贝叶斯公式(由果导因) P6 条件概率 一.条件概率 1.Def:设A、B是两个事件,且 P ( A ) > 0 P(…

深度学习在硬件和计算平台上的优化:实现更快、更高效的突破

引言 深度学习,作为机器学习领域的一个子集,通过模拟人脑神经元的连接方式,构建复杂的网络结构来处理和分析数据。然而,随着深度学习模型规模的不断扩大和复杂度的提高,其对计算资源的需求也呈指数级增长。因此&#…

【MySQL】表的增删改查——MySQL基本查询、数据库表的创建、表的读取、表的更新、表的删除

文章目录 MySQL表的增删查改1. Create(创建)1.1 单行插入1.2 多行插入1.3 替换 2. Retrieve(读取)2.1 select查看2.2 where条件2.3 结果排序2.4 筛选分页结果 3. Update(更新)3.1 更新单个数据3.2 更新多个…

如何保证消息的可靠传输

数据的丢失问题,可能出现在生产者、MQ、消费者中 生产者丢失: 生产者将数据发送到 RabbitMQ 的时候,可能数据就在半路给搞丢了,因为网络问题啥的,都有可能。此时可以选择用 RabbitMQ 提供的事务功能,就是生…

Unmanaged PowerShell

简介 在渗透测试当中经常会使用到PowerShell来执行脚本, 但是直接使用PowerShell.exe是一个非常敏感的行为, EDR等产品对PowerShell.exe进程的创建监控的很密切, 并且随着PowerShell的渗透测试工具的普及, 越来越多的EDR会利用微软提供的AMSI接口对PS脚本进行扫描, 但是对于低…

vue实现购物车功能

实现功能 CSS部分 <style>.tr {display: flex;}.th {margin: 10px;width: 20%;height: 50%;}.td {display: flex;margin: 10px;width: 20%;height: 100px;align-items: center;}.app-container .banner-box {border-radius: 20px;overflow: hidden;margin-bottom: 10px;}…

input中文输入法导致的高频事件

这是基本结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>中文输入法的高频事件</title&…

以题为例 浅谈前缀和算法

前缀求和算法是什么 前缀和算法就是以空间去换取时间&#xff0c;可用于快速求数组的区间和&#xff0c;它可以用于一维数组和二维数组&#xff0c;但我现在只接触了一维数组并没有接触二维数组&#xff0c;所以在这里先介绍一维数组前缀和相关的知识 前缀和典型代码 for(int…

通信-CAN-01 总线拓扑

本文主要介绍CAN总线拓扑&#xff0c;并结合实际用到CAN设备做些说明。 1 总线拓扑 拓扑结构中分为CPU&#xff0c;CAN 控制器&#xff0c;收发器&#xff0c;双绞线。CAN控制器根据两根线上的电位差来判断总线电平。发送方通过使总线发生变化&#xff0c;将消息发送给接收方…

BPSK调制解调

BPSK数字调制是相移键控PSK的一种&#xff0c;通过数字信号&#xff0c;调制载波的相位&#xff0c;利用载波的相位变化来反映数字信号&#xff0c;载波的振幅和频率均不变化。PSK应用很广泛&#xff0c;抗噪声性能比ASK和FSK要好&#xff0c;频带利用率较高。BPSK中&#xff0…

探讨:C#运行程序文件并获取输出的小问题

尝试了一下用C#运行一个控制台程序&#xff0c;希望获取输出并在适当的时候输入&#xff0c;看起来挺简单&#xff0c;不过实际使用发现只能让程序一次性执行完毕并获取输出&#xff08;并没有仔细尝试各种方式&#xff09;。 代码很简单&#xff1a; private void Test(){Proc…

Java实战:Spring Boot 利用 Redis 解决海量重复提交问题

本文将详细介绍如何在 Spring Boot 应用程序中利用 Redis 解决海量重复提交问题。我们将深入探讨重复提交问题的原因和影响&#xff0c;以及如何使用 Redis 的数据结构和原子操作来控制请求的重复提交。 1. 引言 在现代的互联网应用中&#xff0c;用户可能会频繁地提交相同的…

前端文件流、切片下载和上传

前端文件流、切片下载和上传技术在提升文件传输效率和优化用户体验方面发挥着关键作用。这些技术不仅可以帮助解决大文件传输过程中可能遇到的问题&#xff0c;如网络超时、内存溢出等&#xff0c;还能通过并行传输和断点续传等功能&#xff0c;提高传输速度和稳定性。 一、前端…