vue element plus Input Number 数字输入框

简介: vue element plus Input Number 数字输入框

仅允许输入标准的数字值,可定义范围

基础用法#

要使用它,只需要在 <el-input-number> 元素中使用 v-model 绑定变量即可,变量的初始值即为默认值。

TIP

当输入无效的字符串到输入框时,由于错误,输入值将把 NaN 导入到上层

禁用状态#

disabled属性接受一个 Boolean,设置为true即可禁用整个组件。 ,如果你只需要控制数值在某一范围内,可以设置 min 属性和 max 属性, 默认最小值为 0

步进#

允许定义递增递减的步进控制

设置 step 属性可以控制步长。

严格步进#

step-strictly属性接受一个Boolean。 如果这个属性被设置为 true,则只能输入步进的倍数。

精度#

设置 precision 属性可以控制数值精度,接收一个 Number

TIP

precision 的值必须是一个非负整数,并且不能小于 step 的小数位数。

不同的输入框尺寸#

使用 size 属性额外配置尺寸,可选的尺寸大小为:largesmall

按钮位置#

设置 controls-position 属性可以控制按钮位置。

API#

Attributes#

属性名 说明 类型 默认值
model-value / v-model 选中项绑定值 number
min 设置计数器允许的最小值 number -Infinity
max 设置计数器允许的最大值 number Infinity
step 计数器步长 number 1
step-strictly 是否只能输入 step 的倍数 boolean false
precision 数值精度 number
size 计数器尺寸 enum default
readonly 2.2.16 原生 readonly 属性,是否只读 boolean false
disabled 是否禁用状态 boolean false
controls 是否使用控制按钮 boolean true
controls-position 控制按钮位置 enum
name 等价于原生 input name 属性 string
label 等价于原生 input label 属性 string
placeholder 等价于原生 input placeholder 属性 string
id 等价于原生 input id 属性 string
value-on-clear 2.2.0 当输入框被清空时显示的值 number / null / enum
validate-event 是否触发表单验证 boolean true

Events#

事件名 说明 类型
change 绑定值被改变时触发 Function
blur 在组件 Input 失去焦点时触发 Function
focus 在组件 Input 获得焦点时触发 Function

Exposes#

名称 说明 类型
focus 使 input 组件获得焦点 Function
blur 使 input 组件失去焦点 Function

源代码#

组件文档

相关文章
|
前端开发
input去掉输入框type为number时的上下箭头的实现方法
input去掉输入框type为number时的上下箭头的实现方法
100 0
|
前端开发
css:input数字编辑框number去掉右侧上下箭头
css:input数字编辑框number去掉右侧上下箭头
375 0
css:input数字编辑框number去掉右侧上下箭头
|
移动开发 前端开发
火狐谷歌浏览器去掉input type=number时控件的方法
火狐谷歌浏览器去掉input type=number时控件的方法
|
监控
Element el-input-number 计数器详解
本文目录 1. 用途 2. 基本用法 3. 指定最大、最小值 4. 监控数值变化 5. 自定义步数 6. 自定义精度 7. 调整按钮位置 8. 小结
1458 0
Element el-input-number 计数器详解
|
JavaScript Android开发 前端开发
解决input[type=number]无法显示非数字字符的问题
在移动端webview实现的页面中,有数字的地方必须使用input type="number"类型的input,否则触发后的键盘为全键盘,而非数字键盘。但另外的一个问题是,input 为 type="number" 类型的无法显示非数字字符,比如:12/23中/。
1361 0
|
算法
Leetcode 313. Super Ugly Number
题目翻译成中文是『超级丑数』,啥叫丑数?丑数就是素因子只有2,3,5的数,7 14 21不是丑数,因为他们都有7这个素数。 这里的超级丑数只是对丑数的一个扩展,超级丑数的素因子不再仅限于2 3 5,而是由题目给定一个素数数组。与朴素丑数算法相比,只是将素因子变了而已,解法还是和朴素丑数一致的。
104 1
|
6月前
|
存储 SQL 算法
LeetCode 题目 65:有效数字(Valid Number)【python】
LeetCode 题目 65:有效数字(Valid Number)【python】
|
7月前
|
存储 算法
【LeetCode力扣】单调栈解决Next Greater Number(下一个更大值)问题
【LeetCode力扣】单调栈解决Next Greater Number(下一个更大值)问题
53 0