Element基于el-input数字范围输入框怎么实现

本文小编为大家详细介绍“Element基于el-input数字范围输入框怎么实现”，内容详细，步骤清晰，细节处理妥当，希望这篇“Element基于el-input数字范围输入框怎么实现”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

数字范围组件

在做筛选时可能会出现数字范围的筛选，例如：价格、面积，但是elementUI本身没有自带的数字范围组件，于是进行了简单的封装，不足可自行进行优化

满足功能：

• 最小值与最大值的相关约束，当最大值存在，最小值大于最大值且失焦，自动将最小值赋值为最大值，反之亦然。

• 拥有el-input组件本身的属性绑定以及方法

• 可设置精度，默认精度为0

• 可使用el-input插槽，但需要加前缀start-，end-进行区分

<numberRange:startValue.sync="startValue":endValue.sync="endValue"/>

相关代码：

<template><divclass="input-number-range":class="{'is-disabled':disabled}"><divclass="flex"><el-inputref="inputFromRef"clearablev-model="startValue":disabled="disabled":placeholder="startPlaceholder"@blur="handleBlurFrom"@focus="handleFocusFrom"@input="handleInputFrom"@change="handleInputChangeFrom"v-bind="$attrs"v-on="$listeners"><templatev-for="(value,name)instartSlots"#[name]="slotData"><slot:name="name"v-bind="slotData||{}"></slot></template></el-input><divclass="center"><span>至</span></div><el-inputref="inputToRef"clearablev-model="endValue":disabled="disabled":placeholder="endPlaceholder"@blur="handleBlurTo"@focus="handleFocusTo"@input="handleInputTo"@change="handleInputChangeTo"v-bind="$attrs"v-on="$listeners"><templatev-for="(value,name)inendSlots"#[name]="slotData"><slot:name="name"v-bind="slotData||{}"></slot></template></el-input></div></div></template><script>exportdefault{name:"InputNumberRange",props:{//inputs:{//type:Array,//required:true,//default:()=>[null,null],//},startValue:{type:Number||String,default:null,},endValue:{typeof:Number||String,default:null,},//是否禁用disabled:{type:Boolean,default:false,},startPlaceholder:{type:String,default:"最小值",},endPlaceholder:{type:String,default:"最大值",},//精度参数precision:{type:Number,default:0,validator(val){returnval>=0&&val===parseInt(val,10);},},},data(){return{};},&nbspputed:{startSlots(){constslots={};Object.keys(this.$slots).forEach((name)=>{if(name.startsWith("start-")){constnewKey=name.replace(/^start-/,"");slots[newKey]=this.$slots[name];}});returnslots;},endSlots(){constslots={};Object.keys(this.$slots).forEach((name)=>{if(name.startsWith("end-")){constnewKey=name.replace(/^end-/,"");slots[newKey]=this.$slots[name];}});returnslots;},},watch:{},methods:{handleInputFrom(value){this.$emit("update:startValue",value);},handleInputTo(value){this.$emit("update:endValue",value);},//from输入框change事件handleInputChangeFrom(value){//如果是非数字空返回nullif(value==""||isNaN(value)){this.$emit("update:startValue",null);return;}//初始化数字精度constnewStartValue=this.setPrecisionValue(value);//如果from>to将from值替换成toif(typeofnewStartValue==="number"&&parseFloat(newStartValue)>parseFloat(this.endValue)){this.startValue=this.endValue;}else{this.startValue=newStartValue;}if(this.startValue!==value){this.$emit("update:startValue",this.startValue);}},//to输入框change事件handleInputChangeTo(value){//如果是非数字空返回nullif(value==""||isNaN(value)){this.$emit("update:endValue",null);return;}//初始化数字精度constnewEndValue=this.setPrecisionValue(value);//如果from>to将from值替换成toif(typeofnewEndValue==="number"&&parseFloat(newEndValue)<parseFloat(this.startValue)){this.endValue=this.startValue;}else{this.endValue=newEndValue;}if(this.endValue!==value){this.$emit("update:endValue",this.endValue);}},handleBlurFrom(event){this.$emit("blur-from",event);},handleFocusFrom(event){this.$emit("focus-from",event);},handleBlurTo(event){this.$emit("blur-to",event);},handleFocusTo(event){this.$emit("focus-to",event);},//根据精度保留数字toPrecision(num,precision){if(precision===undefined)precision=0;returnparseFloat(Math.round(num*Math.pow(10,precision))/Math.pow(10,precision));},//设置精度setPrecisionValue(value){if(this.precision===undefined)returnvalue;returnthis.toPrecision(parseFloat(value),this.precision);},},};</script><stylelang="scss"scoped>//取消element原有的input框样式::v-deep.el-input__inner{border:0px;margin:0;padding:015px;background-color:transparent;}.input-number-range{background-color:#fff;border:1pxsolid#dcdfe6;border-radius:4px;}.flex{display:flex;flex-direction:row;width:100%;height:auto;justify-content:center;align-items:center;.center{margin-top:1px;}}.is-disabled{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed;}</style>

读到这里，这篇“Element基于el-input数字范围输入框怎么实现”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注主机评测网行业资讯频道。

上一篇：Python基础之with语句和上下文管理器怎么使用

下一篇：python OCR文字识别的方法有哪些

---