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


    组件定义

    • 使用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-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,最大值和最小值不在同一行的情况

    <el-form-item label="损耗比率(%)" prop="wastageRate" >
      <range-input
        :minValue.sync="wastageRateMin"
        :maxValue.sync="wastageRateMax"
        minPlaceholder="最小值"
        maxPlaceholder="最大值"
        :cleanFlag="rankInputCleanFlag"
      />
    el-form-item>
    
  • 相关阅读:
    武汉星起航给想做亚马逊精细化铺货模式的卖家分享一些技巧
    Java中Map详解
    【设计模式】 - 结构型模式 - 迭代器模式
    C++ 即将超越 Java,TIOBE 6 月编程语言排行榜发布!
    每天几道Java面试题(第一天)
    《软件方法》读后感
    案例:用户管理
    Mybatis-Plus主键生成策略
    商业智能BI开发和报表开发有什么本质区别?
    博客项目(前后端分离)(servlet实战演练)
  • 原文地址:https://blog.csdn.net/qq_40603125/article/details/139760212