基于elementUIinput组件自行封装“数字区间”输入框组件
最新回答
姐独占天下
2024-11-30 04:34:43
在开发时遇到一个数字区间输入框的需求，如下图：
项目使用的是vue，组件库用的是ElementUI，但是elementUI并没有提供数字区间组件，只提供了InputNumber计数器输入框，如果用两个计数器输入框进行拼接也能满足需求，但是样式调试起来太过于复杂且不够灵活，不能令人满意，并且该数字区间输入框在其它界面也有这种需求，于是就在elementinput输入框的基础上自行封装了一个数字区间组件使用。
实现效果实现效果如下：
使用方式如下：
<input-number-range:disabled="isDisabled":precision="num"v-model="value"></input-number-range>其中disabled属性控制是否禁用，precision属性控制精度默认为0即只能输入整数，v-model双向绑定要传递的值，该值是一个数组类型?[最小值,最大值]
另外该组件只能输入数字，输入其他非数字，或错误数字（多个小数）都会默认为空；在先输入最小值时，如果后输入的最大值小于最小值，则最大值默认为最小值，同理先输入最大值时，如果后输入的最小值大于最大值，则最小值默认为最大值
实现代码实现代码可以分为两块一块为组件的封装代码，一块为上述实现效果的演示代码
数字区间组件代码
<template><div><divclass="input-number-range":class="{'is-disabled':disabled}"><divclass="flex"><divclass="from"><!--blur:最小值失焦事件focus:最小值聚焦事件input:最小值输入事件change:最小值change事件--><el-inputref="input_from"v-model="userInputForm":disabled="disabled"placeholder="最小值"@blur="handleBlurFrom"@focus="handleFocusFrom"@input="handleInputFrom"@change="handleInputChangeFrom"></el-input></div><divclass="center"><span>至</span></div><divclass="to"><!--blur:最大值失焦事件focus:最大值聚焦事件input:最大值输入事件change:最大值change事件--><el-inputref="input_to"v-model="userInputTo":disabled="disabled"placeholder="最大值"@blur="handleBlurTo"@focus="handleFocusTo"@input="handleInputTo"@change="handleInputChangeTo"></el-input></div></div></div></div></template><script>exportdefault{name:"InputNumberRange",/**组件接收参数*/props:{value:{required:true},//是否禁用disabled:{type:Boolean,default:false,},//精度参数precision:{type:Number,default:0,validator(val){returnval>=0&&val===parseInt(val,10);},},},data(){return{userInputForm:null,//最小值userInputTo:null,//最大值};},watch:{/**监听value实现双向绑定*/value:{immediate:true,handler(value){//判断是否为数字number类型if(valueinstanceofArray&&this.precision!==undefined){letfromVal=value[0]&&typeofvalue[0]==="number"?value[0]:null;lettoVal=value[1]&&typeofvalue[1]==="number"?value[1]:null;this.userInputForm=fromVal?fromVal:null;this.userInputTo=toVal?toVal:null;}},},},methods:{//根据精度保留数字toPrecision(num,precision){if(precision===undefined)precision=0;returnparseFloat(Math.round(num*Math.pow(10,precision))/Math.pow(10,precision));},/**触发以下事件时自动向上冒泡执行(通过emit将事件抛给elementinput组件)*/handleBlurFrom(event){this.$emit("blurfrom",event);},handleFocusFrom(event){this.$emit("focusfrom",event);},handleBlurTo(event){this.$emit("blurto",event);},handleFocusTo(event){this.$emit("focusto",event);},handleInputFrom(value){this.$emit("inputfrom",value);this.userInputFrom=value;},handleInputTo(value){this.$emit("inputto",value);this.userInputTo=value;},//from输入框change事件handleInputChangeFrom(value){constnewVal=this.setPrecisionValue(value);this.userInputForm=newVal;//如果初始化数字的精度不符合代码设置时重置数字this.userInputTo=this.setPrecisionValue(this.userInputTo);if(!this.userInputForm&&!this.userInputTo){this.$emit("input",[]);this.$emit("changefrom",newVal);return;}if(!this.userInputTo){this.userInputForm=newVal;}else{//最小值大于最大值时逻辑判断this.userInputForm=!newVal||parseFloat(newVal)<=parseFloat(this.userInputTo)?newVal:this.userInputTo;}this.$emit("input",[this.userInputForm,this.userInputTo]);this.$emit("changefrom",newVal);},//to输入框change事件handleInputChangeTo(value){constnewVal=this.setPrecisionValue(value);this.userInputTo=newVal;this.userInputForm=this.setPrecisionValue(this.userInputForm);if(!this.userInputTo&&!this.userInputForm){this.$emit("input",[]);this.$emit("changefrom",newVal);return;}if(!this.userInputForm){this.userInputTo=newVal;}else{//最大值小于最小值时逻辑判断this.userInputTo=!newVal||parseFloat(newVal)>=parseFloat(this.userInputForm)?newVal:this.userInputForm;}this.$emit("input",[this.userInputForm,this.userInputTo]);this.$emit("changeto",newVal);},//设置成精度数字setPrecisionValue(value){if(!value)returnnull;constnewVal=Number(value);//如果是非数字空返回nullif(isNaN(value))returnnull;if(typeofnewVal==="number"&&this.precision!==undefined){constval=this.toPrecision(value,this.precision);returnval;}returnnull;},},};</script><stylelang="scss"scoped>//取消element原有的input框样式::v-deep.el-input.el-input__inner{border:0px;margin:0;padding:015px;background-color:transparent;text-align:center;}.input-number-range{background-color:#fff;border:1pxsolid#dcdfe6;border-radius:4px;}.flex{display:flex;flex-direction:row;width:100%;justify-content:center;align-items:center;.center{margin-top:1px;}}.is-disabled{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed;}</style>上述就是完整的组件代码，写好组件代码后，就是在项目中使用，有两种方式，一种是使用时在通过引用进行使用如下：
<template><div><InputNumberRange></InputNumberRange></div></template><script>importInputNumberRangefrom'./components/inputNumberRange.vue'exportdefault{name:"XXXX"components:{InputNumberRange,},data(){}}</script>另一种方式是在main.js中进行全局组测，这样就可以自由使用<input-number-range>标签，如下：
importInputNumberRangefrom'./components/inputNumberRange.vue'Vue.component(InputNumberRange.name,InputNumberRange)示例演示代码
<template><divclass="main"><!--演示操作按钮模块--><divclass="caseHeader"><div><el-switchv-model="isDisabled"size="small"active-text="禁用"@change="switchChange"></el-switch></div><divstyle="display:flex"><span>精度：</span><el-input-numbersize="small"v-model="num"@change="precisionChange":min="0":max="10"label="描述文字"></el-input-number></div><div><el-buttontype="link"size="small"@click="reset">重置</el-button></div></div><!--数字区间使用模块--><divclass="numberRange"><el-formref="form":model="formData"label-width="80px"><el-form-itemlabel="数字区间"><input-number-range:disabled="isDisabled":precision="num"v-model="formData.numberRange"></input-number-range></el-form-item></el-form></div></div></template><script>exportdefault{name:"TestCase",data(){return{isDisabled:false,//是否禁用num:0,//精度formData:{numberRange:[],},};},methods:{/**重置方法*/reset(){this.formData.numberRange=[];}},};</script><stylelang="scss"scoped>.main{width:100%;margin:16px;position:relative;}.numberRange{width:400px;}.caseHeader{width:400px;display:flex;justify-content:space-between;margin:24px;}</style>上述就是数字区间输入组件的实现即演示内容
原文：https://juejin.cn/post/7100122768330473502热门标签
