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>
相关推荐
夏梦春蝉几秒前
ES6从入门到精通:Symbol与迭代器
前端·javascript·es6
今夜星辉灿烂3 分钟前
nestjs微服务-系列2
javascript·后端
一个水瓶座程序猿.4 分钟前
ES6数组的`flat()`和`flatMap()`函数用法
前端·ecmascript·es6
袁煦丞20 分钟前
AI直接出答案!Perplexica开源搜索引擎:cpolar内网穿透实验室第534个成功挑战
前端·程序员·远程工作
Hilaku22 分钟前
用“人话”讲明白10个最常用的正则表达式
前端·javascript·正则表达式
木叶丸31 分钟前
跨平台方案该如何选择?
android·前端·ios
LL.。34 分钟前
同步回调和异步回调
开发语言·前端·javascript
网络点点滴38 分钟前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
运维咖啡吧39 分钟前
周一才上线的网站,单单今天已经超过1000访问了
前端·程序员·ai编程
世界哪有真情42 分钟前
用虚拟IP扩容端口池:解决高并发WebSocket端口耗尽问题
前端·后端·websocket