在Element Plus中探索数字输入框的源码奥秘

2023-09-16 20:35:02

深入剖析 Element Plus 数字输入框：掌控数字输入

在前端开发的世界里，输入框是一个必不可少的组件，用于收集和处理用户输入。对于数字输入，Element Plus 提供了一个强大的数字输入框组件，具有丰富的功能和现代化的设计。本文将深入剖析数字输入框的内部运作机制，帮助您充分利用它的潜力。

认识数字输入框的组成部分

数字输入框由多个子组件组成，每个组件都扮演着特定的角色：

el-input： 输入框的基本容器，负责处理用户输入。
el-input-number： 数字输入框的主要逻辑组件，负责数字的输入、验证和格式化。
el-input-number-input： 数字输入的原生 HTML 元素，也是用户与数字输入框交互的主要媒介。
el-input-number-controls： 数字输入框的控制按钮，包括增减按钮和步长选择器。

数字输入框的基本用法

数字输入框的基本用法非常简单，只需要在 <el-form> 组件中使用 <el-input-number> 标签即可：

<el-form>
  <el-input-number v-model="numberValue" />
</el-form>

在这个例子中，<el-input-number> 组件与 numberValue 数据绑定，允许用户输入数字值。

数字输入框的高级用法

除了基本用法之外，数字输入框还提供了丰富的配置项，允许开发者根据具体需求进行定制。下面列举一些常用的配置项：

step： 步长，用于控制数字的增减幅度。
min 和 max： 数字的最小值和最大值，用于限制用户输入的范围。
precision： 数字的精度，用于控制小数点后的位数。
controls： 是否显示增减按钮，默认值为 true。
controls-position： 增减按钮的位置，可以是 right 或 left。

数字输入框的源码剖析

接下来，我们将深入数字输入框的源码，看看它是如何工作的。

组件注册：

数字输入框组件在 packages/input-number/index.js 文件中被注册为 Vue.js 组件：

Vue.component('el-input-number', InputNumber);

组件模板：

数字输入框的模板在 packages/input-number/src/input-number.vue 文件中定义：

<el-input
  ref="input"
  v-model="currentValue"
  :class="inputNumberClass"
  :disabled="inputNumberDisabled"
  :readonly="readonly"
  :tabindex="tabindex"
  :autofocus="autofocus"
  :placeholder="placeholder"
  :size="size"
  :name="name"
  :validate-event="validateEvent"
  :suffix="suffix"
  :prefix="prefix"
  :controls="controls"
  :controls-position="controlsPosition"
  @compositionstart="handleCompositionStart"
  @compositionend="handleCompositionEnd"
  @input="handleInput"
  @change="handleValueChange"
  @keydown="handleKeydown">

  <template slot="prepend">
    <span v-if="controls && controlsPosition === 'left'" class="el-input-number__decrease" @mousedown="handleMouseDown">
      <span class="el-input-number__decrease-inner">-</span>
    </span>
  </template>

  <template slot="append">
    <span v-if="controls && controlsPosition === 'right'" class="el-input-number__increase" @mousedown="handleMouseDown">
      <span class="el-input-number__increase-inner">+</span>
    </span>
  </template>
</el-input>

在这个模板中，数字输入框使用了 <el-input> 组件作为基础，并通过插槽自定义了增减按钮的布局。

组件逻辑：

数字输入框的逻辑在 packages/input-number/src/input-number.js 文件中定义：

export default {
  name: 'ElInputNumber',

  mixins: [
    mixins_input,
    mixins_focus
  ],

  inject: {
    elForm: {
      default: ''
    }
  },

  props: {
    step: {
      type: Number,
      default: 1
    },
    max: {
      type: Number,
      default: Infinity
    },
    min: {
      type: Number,
      default: -Infinity
    },
    precision: {
      type: Number,
      validator: (val) => {
        return val >= 0 && val === parseInt(val, 10)
      }
    },
    controls: {
      type: Boolean,
      default: true
    },
    controlsPosition: {
      type: String,
      default: 'right',
      validator: (val) => {
        return ['right', 'left'].indexOf(val) !== -1
      }
    }
  },

  data() {
    return {
      currentValue: 0
    }
  },

  computed: {
    inputNumberClass() {
      return [
        'el-input-number',
        `el-input-number--${this.size}`
      ]
    },
    inputNumberDisabled() {
      return this.$el && this.$el.querySelector('input').disabled
    },
    currentPrecision() {
      if (this.precision !== undefined) {
        return this.precision
      } else {
        const power = Math.pow(10, Math.floor(Math.log(this.step) / Math.LN10))
        if (power > 1) {
          return Math.pow(10, Math.ceil(Math.log(this.step) / Math.LN10))
        }
        return 1
      }
    }
  },

  watch: {
    value(val) {
      if (val !== undefined) {
        this.currentValue = val
      }
    },
    currentValue(val) {
      this.$emit('input', val)
      this.$emit('change', val)
    }
  },

  methods: {
    // ...
  }
}