基于element UI input组件自行封装“数字区间”输入框组件的问题及解决

目录

• 问题描述
• 实现效果
• 实现代码

问题描述

在开发时遇到一个数字区间输入框的需求，如下图：

项目使用的是vue，组件库用的是element UI，但是element UI并没有提供数字区间组件，只提供了InputNumber 计数器输入框，如果用两个计数器输入框进行拼接也能满足需求，但是样式调试起来太过于复杂且不够灵活，不能令人满意，并且该数字区间输入框在其它界面也有这种需求，于是就在element input输入框的基础上自行封装了一个数字区间组件使用。

实现效果

实现效果如下：

使用方式如下：

其中disabled属性控制是否禁用，precision属性控制精度默认为0即只能输入整数，v-model双向绑定要传递的值，该值是一个数组类型 [最小值,最大值]

另外该组件只能输入数字，输入其他非数字，或错误数字（多个小数）都会默认为空；在先输入最小值时，如果后输入的最大值小于最小值，则最大值默认为最小值，同理先输入最大值时，如果后输入的最小值大于最大值，则最小值默认为最大值

实现代码

实现代码可以分为两块一块为组件的封装代码，一块为上述实现效果的演示代码

数字区间组件代码

上述就是完整的组件代码，写好组件代码后，就是在项目中使用，有两种方式，一种是使用时在通过引用进行使用如下：

另一种方式是在main.js中进行全局组测，这样就可以自由使用标签，如下：

import InputNumberRange from './components/inputNumberRange.vue' 
Vue.component(InputNumberRange.name, InputNumberRange)

示例演示代码

上述就是数字区间输入组件的实现即演示内容

到此这篇关于基于element UI input组件自行封装“数字区间”输入框组件的文章就介绍到这了,更多相关element UI数字区间输入组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！