小编点评

## InputNumberRange组件简介 InputNumberRange组件是一个自定义数字输入框，它基于element UI的InputNumber组件，提供更灵活的输入格式和样式选择。 **主要功能:** * 支持数字输入框和选择框两种输入方式 * 支持自定义的格式和颜色 * 提供事件监听，可监听输入值变化 * 可配置精度和默认值 **使用方法:** 1. 下载或安装项目 2. 在vue组件中导入InputNumberRange组件 3. 注册组件 4. 使用`v-model`绑定输入值 5. 设置其他参数，例如格式、颜色、精度等 **示例:** ```vue ``` **资源:** * 项目地址：https://github.com/heyu3913/InputNumberRange * Demo地址：https://heyu3913.github.io/InputNumberRange/dist/index * 使用方式：npm下载

正文

项目地址：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框输入	输入的值