当前位置：首页 > news >正文

elementui写一个自定义的rangeInput的组件

news 2025/7/15 19:27:59

组件定义

使用el-row确保元素都在一行上
对外暴露的prop是minValue和maxValue，但是不建议直接使用，使用计算属性minValueComputed和maxValueComputed
更改计算属性的值的不要直接更改计算属性，也不要直接更改原本的prop，通知外层的父组件来更改，通过父组件将变动传递到子组件中
父子组件使用prop进行属性传递的时候，应该极力避免在子组件中直接更改prop的值，获取属性值使用计算属性进行v-model绑定，不要直接绑定在prop上，因为v-model的数据流是双向的。修改值的话，监听计算属性的setter方法，当变化的时候，通知父组件键更改外部的prop的传递值

<template><el-row><el-col :span="10"><el-inputtype="number"v-model="minValueComputed":placeholder="minPlaceholder"size="mini"class="rangeInput"@input="minValueComputed = handleInput(minValueComputed)"/></el-col><el-col :span="4"><span style="text-align: center; display: block; margin-left: 5px">至</span></el-col><el-col :span="10"><el-inputtype="number"v-model="maxValueComputed":placeholder="maxPlaceholder"size="mini"class="rangeInput"@input="maxValueComputed = handleInput(maxValueComputed)"/></el-col></el-row>
</template><script>
export default {name: 'RangeInput',props: {minValue: String||Number,maxValue: String||Number,minPlaceholder: String,maxPlaceholder: String,cleanFlag: Boolean},data() {return {internalMinValue: this.minValue,internalMaxValue: this.maxValue,minErrorMsg: ''}},computed: {minValueComputed: {get() {return this.internalMinValue;},set(value) {this.internalMinValue = value;this.$emit('update:minValue', value);}},maxValueComputed: {get() {return this.internalMaxValue;},set(value) {this.internalMaxValue = value;this.$emit('update:maxValue', value);}}},methods: {handleInput(value) {return value.replace(/[^\d|\.|-]/g, '');},},watch: {cleanFlag() {this.minValueComputed = '';this.maxValueComputed = '';}}
}
</script><style scoped lang="scss">
::v-deep .rangeInput .el-input__inner{width: 70px !important;height: 30px !important;
}</style><style scoped>
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {-webkit-appearance: none;
}
/deep/ input[type="number"] {-moz-appearance: textfield;
}
/deep/ inpit {border: none
}
</style>

使用

给外围的el-form中加上一个inline-block,最大值和最小值不在同一行的情况

<el-form-item label="损耗比率(%)" prop="wastageRate" ><range-input:minValue.sync="wastageRateMin":maxValue.sync="wastageRateMax"minPlaceholder="最小值"maxPlaceholder="最大值":cleanFlag="rankInputCleanFlag"/>
</el-form-item>