element input-number源码

input-number.vue

<template>
  <div
    @dragstart.prevent
    :class="[
      'el-input-number',
      inputNumberSize ? 'el-input-number--' + inputNumberSize : '',
      { 'is-disabled': inputNumberDisabled },
      { 'is-without-controls': !controls },
      { 'is-controls-right': controlsAtRight }
    ]">
    <span
      class="el-input-number__decrease"
      role="button"
      v-if="controls"
      v-repeat-click="decrease"
      :class="{'is-disabled': minDisabled}"
      @keydown.enter="decrease">
      <i :class="`el-icon-${controlsAtRight ? 'arrow-down' : 'minus'}`"></i>
    </span>
    <span
      class="el-input-number__increase"
      role="button"
      v-if="controls"
      v-repeat-click="increase"
      :class="{'is-disabled': maxDisabled}"
      @keydown.enter="increase">
      <i :class="`el-icon-${controlsAtRight ? 'arrow-up' : 'plus'}`"></i>
    </span>
    <el-input
      ref="input"
      :value="displayValue"
      :placeholder="placeholder"
      :disabled="inputNumberDisabled"
      :size="inputNumberSize"
      :max="max"
      :min="min"
      :name="name"
      :label="label"
      @keydown.up.native.prevent="increase"
      @keydown.down.native.prevent="decrease"
      @blur="handleBlur"
      @focus="handleFocus"
      @input="handleInput"
      @change="handleInputChange">
    </el-input>
  </div>
</template>
<script>
  import ElInput from 'element-ui/packages/input';
  import Focus from 'element-ui/src/mixins/focus';
  import RepeatClick from 'element-ui/src/directives/repeat-click';

  export default {
    name: 'ElInputNumber',
    mixins: [Focus('input')],
    inject: {
      elForm: {
        default: ''
      },
      elFormItem: {
        default: ''
      }
    },
    directives: {
      repeatClick: RepeatClick
    },
    components: {
      ElInput
    },
    props: {
          // 计数器步长
      step: {
        type: Number,
        default: 1
      },
      // 是否只能输入 step 的倍数
      stepStrictly: {
        type: Boolean,
        default: false
      },
      // 设置计数器允许的最大值
      max: {
        type: Number,
        default: Infinity
      },
      // 设置计数器允许的最小值
      min: {
        type: Number,
        default: -Infinity
      },
      // value / v-model    绑定值
      value: {},
      // 是否禁用计数器
      disabled: Boolean,
      // 计数器尺寸    string    large, small
      size: String,
      // 是否使用控制按钮
      controls: {
        type: Boolean,
        default: true
      },
      // 控制按钮位置    string    right
      controlsPosition: {
        type: String,
        default: ''
      },
      // 原生属性
      name: String,
      // 输入框关联的label文字
      label: String,
      // 输入框默认 placeholder
      placeholder: String,
      // 数值精度
      precision: {
        type: Number,
        validator(val) {
          return val >= 0 && val === parseInt(val, 10);
        }
      }
    },
    data() {
      return {
        currentValue: 0,
        userInput: null
      };
    },
    watch: {
      // vaue值变化
      value: {
        // 立即触发
        immediate: true,
        // 自定义函数
        handler(value) {
          let newVal = value === undefined ? value : Number(value);
          if (newVal !== undefined) {
            if (isNaN(newVal)) {
              return;
            }
            // 是否只能输入 step 的倍数
            if (this.stepStrictly) {
              const stepPrecision = this.getPrecision(this.step);
              const precisionFactor = Math.pow(10, stepPrecision);
              newVal = Math.round(newVal / this.step) * precisionFactor * this.step / precisionFactor;
            }

            if (this.precision !== undefined) {
              newVal = this.toPrecision(newVal, this.precision);
            }
          }
          if (newVal >= this.max) newVal = this.max;
          if (newVal <= this.min) newVal = this.min;
          this.currentValue = newVal;
          this.userInput = null;
          this.$emit('input', newVal);
        }
      }
    },
    computed: {
      // 不能小于最小数
      minDisabled() {
        return this._decrease(this.value, this.step) < this.min;
      },
      // 不能大于最大数
      maxDisabled() {
        return this._increase(this.value, this.step) > this.max;
      },
      numPrecision() {
        const { value, step, getPrecision, precision } = this;
        const stepPrecision = getPrecision(step);
        if (precision !== undefined) {
          if (stepPrecision > precision) {
            console.warn('[Element Warn][InputNumber]precision should not be less than the decimal places of step');
          }
          return precision;
        } else {
          return Math.max(getPrecision(value), stepPrecision);
        }
      },
      // 控制条在右侧
      controlsAtRight() {
        return this.controls && this.controlsPosition === 'right';
      },
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },
      inputNumberSize() {
        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
      },
      inputNumberDisabled() {
        return this.disabled || (this.elForm || {}).disabled;
      },
      displayValue() {
        if (this.userInput !== null) {
          return this.userInput;
        }

        let currentValue = this.currentValue;

        if (typeof currentValue === 'number') {
          // 如果只能输入 step 的倍数
          if (this.stepStrictly) {
            // 小数点后面几位小数
            const stepPrecision = this.getPrecision(this.step);
            const precisionFactor = Math.pow(10, stepPrecision);
            currentValue = Math.round(currentValue / this.step) * precisionFactor * this.step / precisionFactor;
          }

          if (this.precision !== undefined) {
            currentValue = currentValue.toFixed(this.precision);
          }
        }

        return currentValue;
      }
    },
    methods: {
      // 截取为传入的位数
      toPrecision(num, precision) {
        if (precision === undefined) precision = this.numPrecision;
        return parseFloat(Number(num).toFixed(precision));
      },
      // 获取小数点后面还有几位
      getPrecision(value) {
        if (value === undefined) return 0;
        const valueString = value.toString();
        const dotPosition = valueString.indexOf('.');
        let precision = 0;
        if (dotPosition !== -1) {
          precision = valueString.length - dotPosition - 1;
        }
        return precision;
      },
      _increase(val, step) {
        if (typeof val !== 'number' && val !== undefined) return this.currentValue;

        const precisionFactor = Math.pow(10, this.numPrecision);
        // Solve the accuracy problem of JS decimal calculation by converting the value to integer.
        return this.toPrecision((precisionFactor * val + precisionFactor * step) / precisionFactor);
      },
      // 递减函数
      _decrease(val, step) {
        if (typeof val !== 'number' && val !== undefined) return this.currentValue;
        // eg: 10的0.1次方
        const precisionFactor = Math.pow(10, this.numPrecision);

        return this.toPrecision((precisionFactor * val - precisionFactor * step) / precisionFactor);
      },
      increase() {
        if (this.inputNumberDisabled || this.maxDisabled) return;
        const value = this.value || 0;
        const newVal = this._increase(value, this.step);
        this.setCurrentValue(newVal);
      },
      decrease() {
        if (this.inputNumberDisabled || this.minDisabled) return;
        const value = this.value || 0;
        const newVal = this._decrease(value, this.step);
        this.setCurrentValue(newVal);
      },
      handleBlur(event) {
        this.$emit('blur', event);
      },
      handleFocus(event) {
        this.$emit('focus', event);
      },
      setCurrentValue(newVal) {
        const oldVal = this.currentValue;
        if (typeof newVal === 'number' && this.precision !== undefined) {
          newVal = this.toPrecision(newVal, this.precision);
        }
        if (newVal >= this.max) newVal = this.max;
        if (newVal <= this.min) newVal = this.min;
        if (oldVal === newVal) return;
        this.userInput = null;
        this.$emit('input', newVal);
        this.$emit('change', newVal, oldVal);
        this.currentValue = newVal;
      },
      handleInput(value) {
        this.userInput = value;
      },
      handleInputChange(value) {
        const newVal = value === '' ? undefined : Number(value);
        if (!isNaN(newVal) || value === '') {
          this.setCurrentValue(newVal);
        }
        this.userInput = null;
      },
      select() {
        this.$refs.input.select();
      }
    },
    mounted() {
      let innerInput = this.$refs.input.$refs.input;
      innerInput.setAttribute('role', 'spinbutton');
      innerInput.setAttribute('aria-valuemax', this.max);
      innerInput.setAttribute('aria-valuemin', this.min);
      innerInput.setAttribute('aria-valuenow', this.currentValue);
      innerInput.setAttribute('aria-disabled', this.inputNumberDisabled);
    },
    updated() {
      if (!this.$refs || !this.$refs.input) return;
      const innerInput = this.$refs.input.$refs.input;
      innerInput.setAttribute('aria-valuenow', this.currentValue);
    }
  };
</script>

repeat-click.js

 

import { once, on } from 'element-ui/src/utils/dom';

export default {
  bind (el, binding, vnode) {
    let interval = null;
    let startTime;
    /**
     * context是一个 Component 类型的数据结构，这个Component是flow定义的结构，具体可看vue源码中的flow内的内容，
     * Component就是组件，所以这个context就是该vnode所在的组件上下文，再来看 binding.expression, 官网说这就是 
     * v - repeat - click="decrease" 中的decrease方法，这个方法写在组件的methods内，
     * 那么 context[binding.expression] 就是 context['decrease'] 因此就拿到了组件内的decrease方法，
     * 类似于在组件中使用 this.decrease 一样，然后最后的 apply()
    就很奇怪了，apply的用法是参数的第一个表示要执行的目标对象，如果为null或者undefined则表示在window上调用该方法，这里没有参数，
    那就是undefined，所以是在window上执行
     *  */
    const handler = () => vnode.context[binding.expression].apply();
    const clear = () => {
      if (Date.now() - startTime < 100) {
        handler();
      }
      clearInterval(interval);
      interval = null;
    };

    on(el, 'mousedown', (e) => {
      /* 
        这个方法就是给元素绑定事件，if-else处理了兼容性的情况， attachEvent 是ie的方法， addEventListener 是其他主流浏览器的方法。
         on 的第三个参数就是事件处理函数, on 中第一句 if (e.button !== 0) return 的 e.button 是按下了鼠标的哪个键
        Element源码分析系列7-InputNumber(数字输入框)
        不等于0则是说明按下的不是左键，因为一般只处理左键的点击事件，注意 onclick 只响应鼠标左键的按下，而 onmousedown
        则响应3个键的按下，所以这里要区分。


        on 最后一句 interval = setInterval(handler, 100) 设置了定时器定时执行handler方法从而每隔0.1s触发一次数字增加或减少事件，
        然后我们思考，按下去鼠标时给dom元素添加了事件:定时执行handler，那么在鼠标抬起时肯定要销毁这个定时器，否则将会无限触发handler方法，
        造成数字一直增加或减少，因此 once(document, 'mouseup', clear) 这句话就是在鼠标抬起时销毁定时器，先看clear方法
        里面就是clearInterval销毁定时器，前面的if逻辑很关键，在按下鼠标时记录一个时间，抬起鼠标时检测当前时间 - 按下时的时间
         < 100毫秒，如果是则触发一次点击，如果不写这个if，则无法实现单击操作，因为如果不写，由于interval = setInterval(handler, 100)，
         在按下后100毫秒后才会触发一次点击，则在100毫秒内抬起鼠标时interval已经被clear了。最后注意下 once(document, 'mouseup', clear) ，
          once 是只触发一次的高阶函数
      */
      if (e.button !== 0) return;
      startTime = Date.now();
      once(document, 'mouseup', clear);
      clearInterval(interval);
      interval = setInterval(handler, 100);
    });
  }
};