基于el-input实现数字区间输入框(已发布npm/github)
项目地址:https://github.com/heyu3913/InputNumberRange (求star)
input-number-range
tips:更多定制化需求请联系: 1310217042@qq.com / vx:iverson96i
背景:
在开发时遇到一个数字区间输入框的需求,项目使用的是vue,组件库用的是element UI,但是element UI并没有提供数字区间组件,只提供了InputNumber 计数器输入框,如果用两个计数器输入框进行拼接也能满足需求,但是样式调试起来太过于复杂且不够灵活,不能令人满意,并且该数字区间输入框在其它界面也有这种需求,于是就在element input输入框的基础上自行封装了一个数字区间组件使用。
Demo地址:
https://heyu3913.github.io/InputNumberRange/dist/index (开梯子访问)
使用方式:
npm下载:
npm i input-number-range -S
项目中引用:
import InputNumberRange from 'InputNumberRange'
组件中使用(记得注册)
<InputNumberRange ></InputNumberRange> (具体可看项目中App.vue)
参数说明:
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 是否必选 |
|---|---|---|---|---|---|
| v-model | 选中项绑定值 | array | - | - | 是 |
| disabled | 是否禁用 | boolean | - | false | 否 |
| precision | 属性控制精度 | number | - | 0 |
事件说明:
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| blurfrom | fromInput框失焦 | event |
| focusfrom | fromInput聚焦 | event |
| blurto | toInput框失焦 | event |
| focusto | toInput框聚焦 | event |
| inputfrom | fromInput框输入 | 输入的值 |
| inputto | toInput框输入 | 输入的值 |
基于el-input实现数字区间输入框(已发布npm/github)的更多相关文章
- Element没更新了?Element没更新,基于El的扩展库更新
think-vuele 基于Vue和ElementUI框架进行整合二次开发的一个框架.提供一些elementUI没有的或当时没有的控件.优化了或简化了便于2B软件开发的一些控件 demo:http:/ ...
- input取值区间实例
前端开发中经常会遇到 input 取值区间的需求,比如搜索的时候,价格区间,积分值区间 大致的需求为 input 的值必须是正整数,第二个 input 的值必须大于第一个 DOM结构如下: <d ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- 基于Verilog HDL 的数字时钟设计
基于Verilog HDL的数字时钟设计 一.实验内容: 利用FPGA实现数字时钟设计,附带秒表功能及时间设置功能.时间设置由开关S1和S2控制,分别是增和减.开关S3是模式选择:0是正常时钟 ...
- [转载]Js小技巧||给input type=“password”的输入框赋默认值
http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...
- 不让input表单的输入框保存用户输入的历史记录
如何不让input表单的输入框保存用户输入的历史记录. 有时我们在设计网页时不想让表单保存用户输入历史记录,比如一些隐私数据,或一些冲值卡 <input name="test&quo ...
- Java基于opencv实现图像数字识别(五)—投影法分割字符
Java基于opencv实现图像数字识别(五)-投影法分割字符 水平投影法 1.水平投影法就是先用一个数组统计出图像每行黑色像素点的个数(二值化的图像): 2.选出一个最优的阀值,根据比这个阀值大或小 ...
- Java基于opencv实现图像数字识别(四)—图像降噪
Java基于opencv实现图像数字识别(四)-图像降噪 我们每一步的工作都是基于前一步的,我们先把我们前面的几个函数封装成一个工具类,以后我们所有的函数都基于这个工具类 这个工具类呢,就一个成员变量 ...
- Java基于opencv实现图像数字识别(三)—灰度化和二值化
Java基于opencv实现图像数字识别(三)-灰度化和二值化 一.灰度化 灰度化:在RGB模型中,如果R=G=B时,则彩色表示灰度颜色,其中R=G=B的值叫灰度值:因此,灰度图像每个像素点只需一个字 ...
- Java基于opencv实现图像数字识别(二)—基本流程
Java基于opencv实现图像数字识别(二)-基本流程 做一个项目之前呢,我们应该有一个总体把握,或者是进度条:来一步步的督促着我们来完成这个项目,在我们正式开始前呢,我们先讨论下流程. 我做的主要 ...
随机推荐
- linux 中的errno 和 strerror(errno)
1. errno.h 中包含 errno 这个错误保存值 string.h 包含 strerror() 函数 ,它的原型 是 char *strerror(int errnum); 输入值应该是err ...
- 移动APP测试要点
一. UI测试 (1) 页面布局 ① 页面布局合理且友好,符合用户习惯 ② 列表型界面有滚动条 ③ 功能入口明显,容易找到 (2) 图形测试 ① 图片大小合适且清晰 ② 页面字体与风格一致 ③ 背景颜 ...
- Unity中实现在规定时间内从一个值递增到另一个值
1.进度条(在规定时间内完成进度条) private Image progressBar; private float currentProgress = 0; /// <summary> ...
- SaaS、PaaS、IaaS的区别
我们从SaaS.PaaS.IaaS的定义.工业应用以及具体案例几方面来介绍他们之间的区别 一.定义层面的区别 SaaS.PaaS.IaaS简单的说都属于云计算服务,也就是云计算+服务. 我们对于云计算 ...
- JS笔记(二):数据类型
镇楼图 Pixiv:torino 三.数据类型 原始类型 原始类型像是string.symbol.number之类的都只能存储原子值,而不能像对象一样随意扩展.但是为了提供额外功能,采取了轻量的对象包 ...
- sar与ksar使用显示监控数据
一.Ksar: 1)下载ksar地址:https://github.com/vlsi/ksar/releases/tag/v5.2.4-snapshot.10-gf068072 2)启动:java - ...
- 项目:口令保管箱,批处理文件配置.bat
#! python3 import sys import pyperclip PASSWORDS = {'email': 'F7minlBDDuvMJuxESSKHFhTxFtjVB6', 'blog ...
- PHP操作MySQL批量Update的写法,各框架通用防注入版
使用别人的扩展遇到了问题,发现没有做SQL注入的处理.我又写了个轮子,根据自己需求扩展了下,有需要的小伙伴可以直接取用. 这里就直接粘贴源码了,会用PHPD ,基本都会如何把它运用到各个框架里的. 本 ...
- 调用mglearn时的报错 TypeError: __init__() got an unexpected keyword argument 'cachedir'
import mglearn的时候发生的报错 原因是调用了joblib包中的memory类,但是cachedir这个参数已经弃用了 查到下面帖子之后改掉cachedir解决问题 https://blo ...
- 决策树(DecisionTree)(附源码)
决策树(DecisionTree) 决策树所属类别:监督学习,分类 优点:直观易懂,算法简单 缺点:容易过拟合,对连续型数据不太容易实现 实现方案:ID3,CART,C4.5 详细的资料见连接:别 ...