项目地址: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)的更多相关文章

  1. Element没更新了?Element没更新,基于El的扩展库更新

    think-vuele 基于Vue和ElementUI框架进行整合二次开发的一个框架.提供一些elementUI没有的或当时没有的控件.优化了或简化了便于2B软件开发的一些控件 demo:http:/ ...

  2. input取值区间实例

    前端开发中经常会遇到 input 取值区间的需求,比如搜索的时候,价格区间,积分值区间 大致的需求为 input 的值必须是正整数,第二个 input 的值必须大于第一个 DOM结构如下: <d ...

  3. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  4. 基于Verilog HDL 的数字时钟设计

    基于Verilog HDL的数字时钟设计 一.实验内容:     利用FPGA实现数字时钟设计,附带秒表功能及时间设置功能.时间设置由开关S1和S2控制,分别是增和减.开关S3是模式选择:0是正常时钟 ...

  5. [转载]Js小技巧||给input type=“password”的输入框赋默认值

    http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...

  6. 不让input表单的输入框保存用户输入的历史记录

    如何不让input表单的输入框保存用户输入的历史记录.  有时我们在设计网页时不想让表单保存用户输入历史记录,比如一些隐私数据,或一些冲值卡 <input name="test&quo ...

  7. Java基于opencv实现图像数字识别(五)—投影法分割字符

    Java基于opencv实现图像数字识别(五)-投影法分割字符 水平投影法 1.水平投影法就是先用一个数组统计出图像每行黑色像素点的个数(二值化的图像): 2.选出一个最优的阀值,根据比这个阀值大或小 ...

  8. Java基于opencv实现图像数字识别(四)—图像降噪

    Java基于opencv实现图像数字识别(四)-图像降噪 我们每一步的工作都是基于前一步的,我们先把我们前面的几个函数封装成一个工具类,以后我们所有的函数都基于这个工具类 这个工具类呢,就一个成员变量 ...

  9. Java基于opencv实现图像数字识别(三)—灰度化和二值化

    Java基于opencv实现图像数字识别(三)-灰度化和二值化 一.灰度化 灰度化:在RGB模型中,如果R=G=B时,则彩色表示灰度颜色,其中R=G=B的值叫灰度值:因此,灰度图像每个像素点只需一个字 ...

  10. Java基于opencv实现图像数字识别(二)—基本流程

    Java基于opencv实现图像数字识别(二)-基本流程 做一个项目之前呢,我们应该有一个总体把握,或者是进度条:来一步步的督促着我们来完成这个项目,在我们正式开始前呢,我们先讨论下流程. 我做的主要 ...

随机推荐

  1. 解决:pytesseract.pytesseract.TesseractNotFoundError: tesseract is not installed or it‘s not in your PATH. See README file for more information.

    问题:使用pytesseract库识别图片中文字时出现报错 代码: import pytesseract from PIL import Image,ImageEnhance img=Image.op ...

  2. Java中File类

    File类是java.io包中唯一代表磁盘文件本身的对象.File类的对象主要用来获取文件本身的一些信息,如文件所在目录.文件长度.读写权限等. 一. 文件的创建与删除 通常使用以下三种方法来创建一个 ...

  3. nginx服务器下的TP5框架的虚拟域名配置

    server { listen 80; default_type 'text/html'; charset utf-8; server_name www.xxx.com; root /usr/loca ...

  4. python:包含’e’和‘-’的 str 转 float

    from functools import reduce def str2float(s): s = s.split('.') a = s[0] b = s[1] if a[0] == '-': a ...

  5. Java实现简单的大顶堆

    Java实现简单的大顶堆 今天刷LeetCode的347. 前 K 个高频元素的时候使用到了优先队列,由于对大顶堆掌握不算熟练,于是写了一个简单大顶堆练手: 实现代码在最后 之前很少使用泛型来写代码, ...

  6. Nginx 代理解决跨域问题分析

    Nginx 代理解决跨域问题分析   当你遇到跨域问题,不要立刻就选择复制去尝试.请详细看完这篇文章再处理 .我相信它能帮到你. 分析前准备: 前端网站地址:http://localhost:8080 ...

  7. 字节过滤流 --->对象流(存入对象的)----> ObjectOutputStream: 用法

    前提:1).要有一个类 并创建这个类的对象2)要让类必须继承Serializable接口3)transient修饰的属性 值不参与序列化1创建字节输出节点流FileOutputStream fos = ...

  8. 第12组 Beta冲刺 (2/5)

    1.1基本情况 ·队名:美少女战士 ·组长博客:https://www.cnblogs.com/yaningscnblogs/p/14016602.html ·作业博客:https://edu.cnb ...

  9. Q:带宽检测 iperf工具

    一.下载 iperf的下载地址为:https://iperf.fr/iperf-download.php,选择相应的版本 linux安装 rpm -qa|grep -i rperf rpm -ivh ...

  10. CentOS查看已安装的服务与卸载服务。。

    1:使用rpm查看, rmp -qa | grep servername rpm -qa 查看以安装的所有服务,grep过滤我们需要看的服务. 2:使用yum查看<此命令恕在下未能完全理解,可能 ...