element-ui inputNumber 组件源码分享

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

1、inputNumber 组件的页面结构

2、inputNumber 组件的属性

3、inputNumber 组件的事件

4、inputNumber 组件的方法

一、inputNumber 组件的页面结构。

二、inputNumber 组件的属性

2.1 value / v-model 属性,绑定值,类型 number,默认值 0。

2.2 min 属性,设置计数器允许的最小值,类型 number,默认值 -Infinity。

2.3 max 属性,设置计数器允许的最大值,类型 number,默认值 Infinity。

2.4 step 属性,计数器步长,类型 number,默认 1。

2.5 step-strictly 属性,是否只能输入 step 的倍数,类型 boolean,默认 false。

2.6 precision 属性,数值精度,类型 number,无默认值。


2.7 size 属性,计数器尺寸,类型 string,large, small,无默认值。

2.8 disabled 属性,是否禁用计数器,类型 boolean,默认 false。

2.9 controls 属性,是否使用控制,类型 boolean,默认 true。

2.10 controls-position 属性,控制按钮位置,类型 string,默认 right。

2.11 name 属性,原生属性,类型 string,无默认值。

2.12 label 属性,输入框关联的label文字,类型 string,无默认值。

2.13 placeholder 属性,输入框默认 placeholder,类型 string,无默认值。

三、inputNumber 组件的事件

3.1 change 事件,绑定值被改变时触发,currentValue, oldValue。

3.2 blur 事件,在组件 Input 失去焦点时触发,(event: Event)。

3.3 focus 事件,在组件 Input 获得焦点时触发,(event: Event)。

四、inputNumber 组件的方法

4.1 focus 事件,使 input 获得焦点。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

linux安装Zookeeper的详细步骤

1.Java环境确认 确保已经安装了Java环境,没有的自行安装 2.官网下载包 Apache ZooKeeper 3.安装 3.1上传到linux,解压 我的目录为/root/apache-zookeeper-3.8.4-bin 进入到/root/apache-zookeeper-3.8.4-bin/conf目录下,执行命令复制zoo…

由浅到深认识Java语言(44):Junit单元测试

该文章Github地址:https://github.com/AntonyCheng/java-notes 在此介绍一下作者开源的SpringBoot项目初始化模板(Github仓库地址:https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址:https://blog.c…

硬件12、PCB模块化布局

模块画布局其实就是根据原理图中绘制的小模块,比如3.3V芯片及其外围电路部分的元器件在PCB中放在一起进行布线,会方便很多 1、最好打开分屏,一边在原理图中选中模块,一边在PCB中绘制 2、选中原理图中的模块的所有元件&#xff0…

工业智能物联网关如何助力工业防震减灾

地震灾害难以预料,一旦发生往往就损失重大。对于工业领域而言,地震灾害的影响不仅仅是对人员安全的威胁,还包括对生产设施的破坏、生产进程的中断以及伴生的持续性经济损失。 随着5G、大数据、物联网技术的发展,面向工业领域构建一…

有效的数独-java

题目描述: 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 ,验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。(请参考示例图&#…

python如何获取word文档的总页数

最近在搞AI. 遇到了一个问题,就是要进行doc文档的解析。并且需要展示每个文档的总页数。 利用AI. 分别尝试了chatGPT, 文心一言, github copilot,Kimi 等工具,给出来的答案都不尽如人意。 给的最多的查询方式就是下面这种。 这个…

代码随想录阅读笔记-二叉树【翻转二叉树】

题目 翻转一棵二叉树。 思路 如果要从整个树来看,翻转还真的挺复杂,整个树以中间分割线进行翻转,如图: 可以发现想要翻转它,其实就把每一个节点的左右孩子交换一下就可以了。 关键在于遍历顺序,前中后序应…

如何通过vscode连接到wsl

下载wsl扩展 远程连接模式

SQL Server 实验二:数据库视图的创建和使用

目录 第一关 相关知识 什么是表 操作数据表 创建数据表 插入数据 修改表结构 删除数据表 编程要求 第一关实验代码: 第二关 相关知识 视图是什么 视图的优缺点 视图的优点 视图的缺点 操作视图 创建视图 通过视图向基本表中插入数据 通过视图修改基本表的…

Selenium元素定位之页面检测技巧

在进行web自动化测试的时候进行XPath或者CSS定位,需要检测页面元素定位是否正确,如果用脚本去检测,那么效率是极低的。 一般网上推选装额外的插件来实现页面元素定位检测 如:firebug。 其实F12开发者工具就能直接在页面上检测元…

JavaScript new一个对象的详细过程

JavaScript new一个对象的详细过程 new实现过程 new实现原理 new手写实现 实现过程/原理 开辟一块内存,创建一个空对象 执行构造函数对这个空对象进行构造 给空对象添加__proto__属性 调用函数改变this指向 最后返回this指向的新对象(如果是引用类型则返…

C# OpenCvSharp MatchTemplate 多目标匹配

目录 效果 项目 代码 下载 效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp; using O…

Collection集合 --java学习笔记

Collection Collection是单列集合的祖宗,它规定的方法(功能)是全部单列集合都会继承的 List系列集合:List系列集合:ArrayList、LinkedList --java学习笔记-CSDN博客 Set系列集合:Set系列集合:…

ARMv9新特性:虚拟内存系统架构 (VMSA) 的增强功能

快速链接: 【精选】ARMv8/ARMv9架构入门到精通-[目录] 👈👈👈 权限索引 2022 ARM引入了一种新的控制内存权限方法。 不再是直接在转换表条目 (TTE) 中编码权限,而是使用 TTE 中的字段来索引寄存器中指定的权限数组。这种间接提供…

.NET CORE 分布式事务(三) DTM实现Saga及高并发下的解决方案

目录(结尾附加项目代码资源地址) 引言: 1. SAGA事务模式 2. 拆分为子事务 3. 失败回滚 4. 如何做补偿 4.1 失败的分支是否需要补偿 5. 异常 6. 异常与子事务屏障 6.1 NPC的挑战 6.2 现有方案的问题 6.3 子事务屏障 6.4 原理 7. 更多高级场景 7.1 部分…

蓝桥杯单片机---第十一届省赛题目解析

文章目录 比赛题目一、代码相关定义、声明1.头文件声明2.变量声明 二、主要函数1.main函数2.按键扫描3.数码管显示4.电压 & LED显示5.定时器中断6.消除85C显示 三、次要函数1.初始化函数Init2.按键函数Key3.LED函数Led4.数码管函数Seg5.iic函数中6.onewire函数中 总结 比赛…

【Redis】redis主从复制

概述 常见的Redis高可用的方案包括持久化、主从复制(及读写分离)、哨兵和集群。其中持久化侧重解决的是Redis数据的单机备份问题(从内存到硬盘的备份);而主从复制则侧重解决数据的多机热备。此外,主从复制…

鸿蒙TypeScript入门学习第4天:【TS变量声明】

1、TypeScript 变量声明 变量是一种使用方便的占位符,用于引用计算机内存地址。 我们可以把变量看做存储数据的容器。 TypeScript 变量的命名规则: 变量名称可以包含数字和字母。除了下划线 _ 和美元 $ 符号外,不能包含其他特殊字符&…

使用ai智能写作场景之gpt整理资料,如何ai智能写作整理资料

Ai智能写作助手:Ai智能整理资料小助手 Ai智能整理资料小助手可试用3天! 通俗的解释一下怎么用ChatGPT来进行资料整理: 搜寻并获取指定数量的特定领域文章: 想像你在和我说话一样,告诉我你想要多少篇关于某个话题的文…

高效实用的Java输出流:BufferWriter类详解

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE相关知识点了,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,…