前言

element-ui中有el-input-number计数框，用户可以用来输数值，如果我们想要输入某一范围时，ui没有对应的组件，我们需要自己封装一个，下面我们就用vue2来封装一个区间计数器。

实现

区间计数器就仿造日期选择器，用两个计数器拼在一起，中间用某一字符连接，通过设置css让两个计数器看起来是整体的。整体思路非常简单，首先我们先把两个计数器及样式写一下。

   <div class="number-range" :class="{'is--focus': isFocus}">
    <el-input-number
      v-model="minValue"
    />
    <span class="separator">{{ separator }}</span>
    <el-input-number
      v-model="maxValue"
    />
  </div>

注意中间我们用变量separator代替，可以设置一个默认值比如‘~’，接下来就是样式了，为了让两个计数器看起来是整体的，我们就用一个div包裹住三个元素，然后将el-input-number的边框设置为0。此时div就相当于是输入框的border，通过动态class让border在获取焦点时变颜色，达到更正式的效果。

 .number-range {
  display: inline-block;
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 15px;
  &:hover {
    border-color: #c0c4cc;
  }
  &.is--focus {
    border-color: #409eff;
   }
  }

具体的样式我们自行调整即可，左右两个计数器绑定数值，一个用minValue，一个用maxValue。组件接值的值与传递的值，我们用一个数组来声明[minValue,maxValue]。

   props: {
    value: {
      type: Array,
      default: () => []
    }
  },

前面我们提到当我们输入时，边框要变色，我们用isFocus布尔值来表示，计数器有两个我们点击那一个都需要变色，那么我们设置两个布尔值来表示左右计数器是否要变色，然后用计算属性获取到isFocus。具体值的改变就通过blur与focus时间去设置。

   data(){
       return{
           minFoucs:false,
           maxFoucs:false
        }
   },
 computed: {
    isFocus() {
      return this.minFocus || this.maxFocus
    }
  },
  
   //失去焦点
   handleBlur(e, position) {
    if (position === 'min') {
      this.minFocus = false
    }
    if (position === 'max') {
      this.maxFocus = false
    }
    this.$emit('blur', event, position)
  }
  //获取焦点
  handleFocus(event, position) {
    if (position === 'min') {
      this.minFocus = true
    }
    if (position === 'max') {
      this.maxFocus = true
    }
    this.$emit('focus', event, position)
  }

将计数器绑定好对应的方法，最后一步我们要将传递过来的value值变成双向绑定的，value我们变成了minValue与manValue，左右两边任一输入都会去更新最新的value的值。所以还是用计算属性，并且用$emit('input')去实现v-model的效果。

  minValue:{
       get () {
        return this.value[0]
      }
      set (val) {
        this.$emit('input', [val, this.maxValue])
      }
  }

用了conputed的get与set写法，要想改变计算属性的值就要这么写，之所以用 $emit('input')是因为v-model的原理就是$ emit+props。

总结

以上就是区间计数器，具体的props值我们可以根据需要去设置，重点是computed的get与set写法，配合着$emit实现了一个双向绑定。

需求小能手——区间计数器

前言

实现

总结