element-ui inputNumber 组件源码分享

news/2024/5/14 6:53:41/文章来源:https://blog.csdn.net/qq_37309987/article/details/137127357

今日简单分享 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 获得焦点。

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

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

相关文章

39.基于SpringBoot + Vue实现的前后端分离-无人智慧超市管理系统(项目 + 论文PPT)

项目介绍 随着互联网时代的发展,传统的线下管理技术已无法高效、便捷的管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,国家在环境要求不断提高的前提下,无人智慧超市管理系统建设也逐渐进入了信…

数据增强项目 | 用于目标检测的训练数据增强

项目应用场景 面向增强目标检测训练数据集,采用 Horizontal Flipping、Scaling、Translation、Rotation、Shearing、Resizing 等方法进行数据集的增强和丰富,能够提高目标检测算法的鲁棒性 项目效果: 项目细节 > 具体参见项目 README.md …

Modbus转Profinet网关快速解决PLC插槽数量不够用的烦恼

通过Modbus转Profinet(XD-MDPN100)网关的应用,不仅可以实现Modbus设备与Profinet网络的平滑对接,还能有效解决PLC插槽限制和Modbus指令轮询等问题,Modbus转Profinet网关(XD-MDPN100)在解决PLC插…

Linux:详解TCP报头类型

文章目录 温习序号的意义序号和确认序号报文的类型 TCP报头类型详解ACK: 确认号是否有效SYN: 请求建立连接; 我们把携带SYN标识的称为同步报文段FIN: 通知对方, 本端要关闭了PSH: 提示接收端应用程序立刻从TCP缓冲区把数据读走RST: 对方要求重新建立连接; 我们把携带RST标识的称…

vue2处理跨域问题

vue中访问springboot中的RestController中的服务 &#xff08;vue.config.js不生效-CSDN博客&#xff09; 1、创建项目 使用vue init webpack my_frontend 创建vue项目 在HelloWorld.vue文件中添加内容&#xff1a; HelloWorld.vue 文件内容&#xff1a; <template>&…

Qt 图片预览(等比例显示、放大、缩小、平移图像)显示

使用Qt的Painter绘制图像并显示&#xff0c;根据窗口的大小计算图片显示的尺寸&#xff0c;并可以对图片放大和缩小的显示&#xff0c;还可以对已经放大了的图片进行平移预览的操作。 效果如下&#xff1a; 使用函数 painter.translate() 对画布进行平移操作。使用函数 painte…

Linux(CentOS7.5) 安装部署 Python3.6(超详细!包含 Yum 源配置!)

文章目录 1.配置 Yum 源2.下载 Python3 包3. 解压4.安装依赖环境5.安装出错场景 6.创建软链接7.配置 Python3 的环境变量8.验证补充&#xff1a;安装 openssl-devel补充&#xff1a;pip3 源配置 1.配置 Yum 源 # 注意&#xff01;&#xff01;&#xff01;请先切换到 root 账号…

鸿蒙OS开发实例:【消息传递】

介绍 在HarmonyOS中&#xff0c;参考官方指导&#xff0c;其实你会发现在‘指南’和‘API参考’两个文档中&#xff0c;对消息传递使用的技术不是一对一的关系&#xff0c;那么今天这篇文章带你全面了解HarmonyOS 中的消息传递 概况 参照官方指导&#xff0c;我总结了两部分…

海豚【货运系统源码】货运小程序【用户端+司机端app】源码物流系统搬家系统源码师傅接单

技术栈&#xff1a;前端uniapp后端vuethinkphp 主要功能&#xff1a; 不通车型配置不通价格参数 多城市定位服务 支持发货地 途径地 目的地智能费用计算 支持日期时间 预约下单 支持添加跟单人数选择 支持下单优惠券抵扣 支持司机收藏订单评价 支持订单状态消息通知 支…

五、基于KubeAdm搭建多节点K8S集群

如需查阅上一步骤,请点击下面链接:四、戴尔R630本地服务器Linux Centos7.9系统安装docker-ce-20.10.10-3.el7版本-CSDN博客文章浏览阅读727次,点赞12次,收藏13次。1、准备工作3、Linux Centos7.9系统的iDRAC远程管理、网络设置、SecureCRT远程登录终端、企业级静态ip地址配…

数据湖与湖仓一体是如何演变而来的?详谈大数据存储架构的变迁

在大数据存储架构的发展历程中&#xff0c;可以划分为三个显著的演进阶段。首先&#xff0c;随着Hadoop和Hive等初期项目的出现&#xff0c;数据仓库&#xff08;Data Warehouse&#xff09;的概念得以确立&#xff1b;随着数据仓库的不断演化&#xff0c;同时有了云与对象存储…

UE4_旋转节点总结二——实现盯着某物或者看向相同方向功能

如何利用旋转等蓝图节点完成Actor与Actor看向相同的方向或者一个Actor看向另一个Actor的方法。 一、蓝图节点SetActorRotation 效果&#xff1a; 效果 二、GetActorUpVector 测试&#xff1a; 角色向上的向量为负Z轴&#xff0c;正好是角色的头上面方向。 测试&#xff1a; 角…

动态规划刷题(算法竞赛、蓝桥杯)--守望者的逃离(线性DP)

1、题目链接&#xff1a;[NOIP2007 普及组] 守望者的逃离 - 洛谷 #include <bits/stdc.h> using namespace std; int main(){int m,s,t;cin>>m>>s>>t;int s1,s20;//s1跑,s2闪 for(int i1;i<t;i){//枚举时间,s1s2同时进行 s117;if(m>10){s260;m-1…

DARTS-PT: RETHINKING ARCHITECTURE SELECTION IN DIFFERENTIABLE NAS

Rethinking Architecture Selection in Differentiable NAS 论文链接&#xff1a;https://arxiv.org/abs/2108.04392v1 项目链接&#xff1a;https://github.com/ruocwang/darts-pt ABSTRACT 可微架构搜索(Differentiable Neural Architecture Search, NAS)是目前最流行的网…

上位机图像处理和嵌入式模块部署(qmacvisual非opencv算法编写)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 我们都知道&#xff0c;qmacvisual本身依赖于qtopencv的实现。大部分的界面都是依赖于qt的实现。图像算法部分&#xff0c;也是大部分都依赖于open…

【threejs】较大物体或shape的贴图较小问题处理方法

问题 有的场景内相对体型差距过大的物体&#xff08;如山地 海洋等&#xff09;由于尺寸问题&#xff0c;加载贴图过于小&#xff0c;同时shader也无法完全展示&#xff0c;如图 我们可以获取物体的uv&#xff0c;进行缩放使得贴图可以完全展开 如果uv是乱的 可以用xyz坐标最…

C语言例4-4:putchar()函数的调用格式和使用的例子

代码如下&#xff1a; //putchar()函数的调用格式和使用的例子 #include<stdio.h> //编译预处理命令&#xff0c;即文件包含命令 int main(void) {char ch1N, ch2E, ch3W;putchar(ch1);putchar(ch2);putchar(ch3); //输出变量c1、c2和c3中的字符putchar(\n);putcha…

Vue——案例01(查询用户)

一、案例实现页面 二、案例实现效果 1. 查询效果 2. 年龄升序 3. 年龄降序 4. 原顺序 三、案例实现思路 1. 定义界面所需标签样式 <div id"app"><h2>查询用户:</h2><input type"text" placeholder"请输入名字"/><b…

竞赛 python+大数据校园卡数据分析

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于yolov5的深度学习车牌识别系统实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;3分 该项目较为新颖&am…

浪潮信息AIStation与潞晨科技Colossal-AI 完成兼容性认证!

为进一步提升大模型开发效率&#xff0c;近年来&#xff0c;浪潮信息持续加强行业合作&#xff0c;携手业内头部&#xff0c;全面进攻大模型领域。日前&#xff0c;浪潮信息AIStation智能业务创新生产平台与潞晨科技Colossal-AI大模型开发工具完成兼容性互认证。后续&#xff0…