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

组件定义

使用el-row确保元素都在一行上

对外暴露的prop是minValue和maxValue，但是不建议直接使用，使用计算属性minValueComputed和maxValueComputed

更改计算属性的值的不要直接更改计算属性，也不要直接更改原本的prop，通知外层的父组件来更改，通过父组件将变动传递到子组件中

父子组件使用prop进行属性传递的时候，应该极力避免在子组件中直接更改prop的值，获取属性值使用计算属性进行v-model绑定，不要直接绑定在prop上，因为v-model的数据流是双向的。修改值的话，监听计算属性的setter方法，当变化的时候，通知父组件键更改外部的prop的传递值

html 复制代码

<template>
  <el-row>
    <el-col :span="10">
      <el-input
        type="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-input
        type="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,最大值和最小值不在同一行的情况

html 复制代码

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