InputNumber计数器
InputNumber 计数器
仅允许输入标准的数字值,可定义范围
要使用它,只需要在el-input-number元素中使用v-model绑定变量即可,变量的初始值即为默认值。<template><el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> </template> <script>export default {data() {return {num1: 1};},methods: {handleChange(value) {console.log(value);}}}; </script>
禁用状态
disabled
属性接受一个Boolean
,设置为true
即可禁用整个组件,如果你只需要控制数值在某一范围内,可以设置min
属性和max
属性,不设置min
和max
时,最小值为 0。
1 <template> 2 <el-input-number v-model="num2" :disabled="true"></el-input-number> 3 </template> 4 <script> 5 export default { 6 data() { 7 return { 8 num2: 1 9 } 10 } 11 }; 12 </script>
View Code
步数
允许定义递增递减的步数控制
设置step
属性可以控制步长,接受一个Number
。
1 <template> 2 <el-input-number v-model="num3" :step="2"></el-input-number> 3 </template> 4 <script> 5 export default { 6 data() { 7 return { 8 num3: 5 9 } 10 } 11 }; 12 </script>
View Code
尺寸
额外提供了 medium
、small
、mini
三种尺寸的数字输入框
1 <template> 2 <el-input-number v-model="num4"></el-input-number> 3 <el-input-number size="medium" v-model="num5"></el-input-number> 4 <el-input-number size="small" v-model="num6"></el-input-number> 5 <el-input-number size="mini" v-model="num7"></el-input-number> 6 </template> 7 <script> 8 export default { 9 data() { 10 return { 11 num4: 1, 12 num5: 1, 13 num6: 1, 14 num7: 1 15 } 16 } 17 }; 18 </script>
View Code
按钮位置
设置 controls-position
属性可以控制按钮位置。
1 <template> 2 <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number> 3 </template> 4 <script> 5 export default { 6 data() { 7 return { 8 num8: 1 9 }; 10 }, 11 methods: { 12 handleChange(value) { 13 console.log(value); 14 } 15 } 16 }; 17 </script>
View Code
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 绑定值 | number | — | — |
min | 设置计数器允许的最小值 | number | — | -Infinity |
max | 设置计数器允许的最大值 | number | — | Infinity |
step | 计数器步长 | number | — | 1 |
size | 计数器尺寸 | string | large, small | — |
disabled | 是否禁用计数器 | boolean | — | false |
controls | 是否使用控制按钮 | boolean | — | true |
controls-position | 控制按钮位置 | string | right | - |
name | 原生属性 | string | — | — |
label | 输入框关联的label文字 | string | — | — |
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 绑定值被改变时触发 | 最后变更的值 |
blur | 在组件 Input 失去焦点时触发 | (event: Event) |
focus | 在组件 Input 获得焦点时触发 | (event: Event) |
Methods
方法名 | 说明 | 参数 |
---|---|---|
focus | 使 input 获取焦点 | - |
转载于:https://www.cnblogs.com/grt322/p/8553316.html
InputNumber计数器相关推荐
- Vue自定义InputNumber 计数器组件
1.为什么要自己封装一个InputNumber 计数器组件? 因为原始的el-element的el-input-number组件有问题: 原生组件能输入英文,不能限制只能输入数值: 原始组件能通过键盘 ...
- vue Element InputNumber 计数器传参数
当我们在列表中使用InputNumber 这个组件的时候 即想要计数器的值,又想给方法传递参数进行操作的时候,就用到了这个,官网文档并么有详细介绍,这里我踩个坑, <div class=&quo ...
- Vue InputNumber 计数器
效果: 父组件: <template><InputNumber :InputNumberData="InputNumber" :max="10" ...
- 【element】InputNumber计数器 动态渲染设置默认值后加减号失效问题
今天同事遇到了一个问题,遍历一个数组,在页面上渲染n个计数器,计数器的初始值为0. 上图为el-input绑定的值. 一开始是直接赋值,结果导致加减号失效.后来百度后发现需要使用this.¥set,至 ...
- Element组件(inputNumber计数器)
格式: <el-input-number> <template><el-input-number v-model="num" :min="1 ...
- 009_InputNumber计数器
1. InputNumber计数器 1.1. InputNumber计数器, 仅允许输入标准的数字值, 可定义范围. 1.2. 计数器属性 参数 说明 类型 可选值 默认值 value / v-mod ...
- 【Vue.js】Vue.js组件库Element中的单选框、多选框、输入框和计数器
1.Radio 单选框 基础用法 由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器. 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Rad ...
- Element-ui中InputNumber 将日文全角输入法的数字转化为半角数字
Element-ui中InputNumber 将日文全角输入法的数字转化为半角数字 发现问题 修改Element-UI 的 InputNumber 计数器组件 效果 发现问题 这周测试人员在测试的时候 ...
- Element UI级联选择器(Cascader)获取级联对象
Element UI Cascader官网文档 GIF 代码: getCascaderObj = function(val, opt){return val.map(function (value, ...
最新文章
- PostgreSQL9.6+新增空闲事务自动查杀功能
- Nginx(四)------nginx 负载均衡
- vue双击事件_我总结了12个Vue.js开发技巧和窍门
- linux x64下安装oracle 11g
- 仿英雄联盟网页HTML代码 学生网页设计与制作期末作业下载 大学生网页设计与制作成品下载 DW游戏介绍网页作业代码下载
- win10系统托盘图标不见了_win10托盘图标不显示怎么回事_win10任务栏托盘图标显示不完全如何修复...
- Coin3D三维可视化教程2
- RS232 RS485 串口 电平标准
- 上海市高等学校信息技术水平二三级python 模拟题 编程
- Charles 模拟慢网络
- 创维电视显示服务器异常,创维网络电视,看在线电影及网络异常的处理!
- SqlServer2008操作总结
- 一个完整的研发体系应该包括的内容
- PHP从基础到高级详细教程(完整版)
- 我所理解的羽毛球运动(没有教练业余羽毛球如何让自己提高?)
- 按钮英文字母大小写-默认样式修改-vuetify
- python scripting for arcgis_Python Scripting for ArcGIS Pro
- quill光标位置插入html,quill编辑器+word文档上传,插入指定位置
- WebView 正确设置cookie 的方法
- Smells and Heuristics
热门文章
- Java empty、null、blank 还傻傻分不清楚?
- 批量导入后查询电话归属地
- android 自定义menu菜单,android 自定义menu菜单样式
- Redis核心知识——基础篇
- Oracle 补充日志分类和相关操作, logminer cdc实时同步数据变化,提取归档日志进行数据挖掘,相关代码实现
- css实现图片横向排列,溢出隐藏/滚动条横向拖动
- 解决 LiveQing 流媒体服务器videojs flash播放RTMP、HLS提示错误的问题
- opencv-python实现虹膜瞳孔内外圆检测
- 湖南成考学生最晚什么时候毕业
- maven聚合项目,新建molde,在maven projects中显示灰色