009_InputNumber计数器

1. InputNumber计数器

1.1. InputNumber计数器, 仅允许输入标准的数字值, 可定义范围。

1.2. 计数器属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	number	无	0
min	设置计数器允许的最小值	number	无	-Infinity
max	设置计数器允许的最大值	number	无	Infinity
step	计数器步长	number	无	1
step-strictly	是否只能输入step的倍数	boolean	无	false
precision	数值精度	number	无	无
size	计数器尺寸	string	large, small	无
disabled	是否禁用计数器	boolean	无	false
controls	是否使用控制按钮	boolean	无	true
controls-position	控制按钮位置	string	right	无
name	原生属性	string	无	无
label	输入框关联的label文字	string	无	无
placeholder	输入框默认placeholder	string	无	无

1.3. 计数器事件

事件名称	说明	回调参数
blur	在组件Input失去焦点时触发	(event: Event)
focus	在组件Input获得焦点时触发	(event: Event)
change	绑定值被改变时触发	currentValue, oldValue

1.4. 计数器方法

事件名称	说明
focus	在Input获得焦点
select	选中input中的文字

2. InputNumber计数器例子

2.1. 使用脚手架新建一个名为element-ui-inputnumber的前端项目, 同时安装Element插件。

2.2. 在components下创建InputNumber.vue

<template><div><h1>基础用法</h1><h4>要使用它, 只需要在el-input-number元素中使用v-model绑定变量即可, 变量的初始值即为默认值。</h4><el-input-number v-model="base_num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number><h1>禁用状态</h1><h4>disabled属性接受一个Boolean, 设置为true即可禁用整个组件, 如果你只需要控制数值在某一范围内, 可以设置min属性和max属性, 不设置min和max时, 最小值为0。</h4><el-input-number v-model="disabled_num" :disabled="true"></el-input-number><h1>步数-允许定义递增递减的步数控制</h1><h4>设置step属性可以控制步长, 接受一个Number。</h4><el-input-number v-model="step_num" :step="2"></el-input-number><h1>严格步数</h1><h4>step-strictly属性接受一个Boolean。如果这个属性被设置为true, 则只能输入步数的倍数。</h4><el-input-number v-model="strictly_num" :step="2" step-strictly></el-input-number><h1>精度</h1><h4>设置precision属性可以控制数值精度, 接收一个Number。precision的值必须是一个非负整数, 并且不能小于step的小数位数。</h4><el-input-number v-model="precision_num" :precision="2" :step="0.1" :max="10"></el-input-number><h1>尺寸</h1><h4>额外提供了medium、small、mini 三种尺寸的数字输入框。</h4><el-input-number v-model="size_num1"></el-input-number><el-input-number size="medium" v-model="size_num2"></el-input-number><el-input-number size="small" v-model="size_num3"></el-input-number><el-input-number size="mini" v-model="size_num4"></el-input-number><h1>按钮位置</h1><h4>设置controls-position属性可以控制按钮位置。</h4><el-input-number v-model="position_num" controls-position="right" :min="1" :max="10"></el-input-number></div>
</template><script>
export default {data () {return {base_num: 1,disabled_num: 1,step_num: 5,strictly_num: 2,precision_num: 1,size_num1: 1,size_num2: 1,size_num3: 1,size_num4: 1,position_num: 1}},methods: {handleChange (value) {console.log(value)}}
}
</script><style scoped>.el-input-number + .el-input-number {margin-left: 20px;}
</style>

2.4. 运行项目, 访问http://localhost:8080/#/InputNumber

009_InputNumber计数器相关推荐

74ls390设计任意进制计数器_异步FIFO：设计原理及Verliog源码
1. 异步FIFO的概念异步FIFO为读取与写入采用不同的时钟,使用异步FIFO用于在不同的时钟域传输数据,主要用于跨时钟域传输多bit数据. 2. 异步FIFO的设计难点同步异步信号,避免亚 ...
epoch如何设置_使用TFRecordDataset时如何设置epoch计数器？
我正在使用tf.data.TFRecordDataset从TFRecord文件读取数据集.在我想知道每一步都在处理哪个时代.在详细信息如下:100个样本保存在一个TFRecord文件中,batch ...
php文本计数器源码,php 简单文本计数器[基于文件系统的页面计数器范例]
我们的计数器经常会用到文本文件来实现,定义计数器写入的文件是当前目录下count.txt,然后我们应当测试该文件能否打开基于文件系统的页面计数器范例 $countfile = "num.t ...
Python Qt GUI设计：QSpinBox计数器类（基础篇—15）
QSpinBox是一个计数器控件,允许用户选择一个整数值,通过单击向上/向下按钮或按键盘上的上/下箭头来增加/减少当前显示的值,当然用户也可以输入值. 在默认情况下,QSpinBox的取值范围是0-9 ...
FPGA（4）晶振与计数器 -- 实现定时器（led定时闪烁、蜂鸣器频率控制(单响)、蜂鸣器报警（频带控制，多响））
目录一.FPGA的晶振与定时器二.定时器(led闪烁.蜂鸣器频率控制) 1.时钟上升沿.复位下降沿触发 2.复位,计数器清零 3.计数满1s时,计数器清零 4-1.led闪烁(每秒) 4-2.蜂鸣 ...
【机器视觉案例】(11) 眨眼计数器，人脸关键点检测，附python完整代码
各位同学好,今天和大家分享一下如何使用 mediapipe+opencv 实现眨眼计数器.先放张图看效果. 下图左侧为视频图像,右侧为平滑后的人眼开合比曲线.以左眼为例,若眼眶上下边界的距离与左右边界 ...
Windows计数器做性能监控（window server 2008服务器）
使用Windows计数器一.创建数据收集器集二.创建数据收集器三.使用数据收集器 1.修改数据收集器的属性 2.手动启用.手动停止数据收集器集 3.计划任务 4.在性能监视器中查看一.性能监视 ...
SQL压力测试用的语句和相关计数器
将数据库中所有表的所有的内容选一遍: IF object_id('tempdb..#temp') is not null BEGIN DROP TABLE #temp END D ...
秋色园QBlog技术原理解析：性能优化篇：用户和文章计数器方案(十七)
2019独角兽企业重金招聘Python工程师标准>>> 上节概要: 上节秋色园QBlog技术原理解析:性能优化篇:access的并发极限及分库分散并发方案(十六) 中, 介绍了 ...

009_InputNumber计数器

009_InputNumber计数器相关推荐

最新文章

热门文章