Element-UI 源码解析之 inputNumber

2023-11-11 23:13:40

在 Element-UI 中，inputNumber 是一个用于数字输入的组件，它提供了丰富的功能，包括：

支持各种数字格式，如整数、小数、百分比等
支持步进操作，可以快速调整数字
支持最大值和最小值限制，防止输入超出范围
支持各种输入验证规则，确保输入的数字符合要求

基本使用方法

要使用 inputNumber，需要先在项目中安装 Element-UI，然后在组件中导入 inputNumber 组件。

import { InputNumber } from 'element-ui'

export default {
  components: { InputNumber }
}

接下来，就可以在组件中使用 inputNumber 组件了。

<template>
  <el-input-number v-model="value" />
</template>

<script>
export default {
  data() {
    return {
      value: 0
    }
  }
}

属性

inputNumber 组件提供了丰富的属性，可以满足各种不同的需求。

属性	类型	默认值
v-model	Number	-	绑定 inputNumber 的值
step	Number	1	步进值，每次点击向上或向下按钮时，值的变化量
max	Number	-	最大值，如果输入的值大于 max，则会自动纠正为 max
min	Number	-	最小值，如果输入的值小于 min，则会自动纠正为 min
precision	Number	-	小数点后的位数，如果值为 -1，则表示不限制小数点后的位数
step-strictly	Boolean	false	是否严格限制步进值，如果为 true，则只能通过点击向上或向下按钮来改变值，不能直接输入
disabled	Boolean	false	是否禁用 inputNumber
readonly	Boolean	false	是否只读
controls	Boolean	true	是否显示向上和向下按钮
size	String	medium	输入框的大小，可选值有 small、medium、large
placeholder	String	-	输入框的占位符
label	String	-	输入框的标签
autofocus	Boolean	false	是否自动聚焦

事件

inputNumber 组件提供了以下事件：

事件	参数
change	value	值改变时触发
focus	-	获得焦点时触发
blur	-	失去焦点时触发

源码分析

inputNumber 组件的源码位于 Element-UI 的官方 GitHub 仓库中。其核心代码如下：

export default {
  name: 'ElInputNumber',
  componentName: 'ElInputNumber',

  mixins: [
    mixins.emitter
  ],

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

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

  computed: {
    min() {
      return this.$attrs.min || this.minLimit
    },
    max() {
      return this.$attrs.max || this.maxLimit
    },
    step() {
      return this.$attrs.step || this.stepLimit
    },
    value() {
      return this.currentValue
    },
    size() {
      return this.$attrs.size || this.elFormItem.size || 'default'
    },
    disabled() {
      return this.$attrs.disabled || this.elFormItem.disabled
    },
    readonly() {
      return this.$attrs.readonly || this.elFormItem.readonly
    },
    precision() {
      return this.$attrs.precision || this.elFormItem.precision
    }
  },

  watch: {
    value(val) {
      this.setCurrentValue(val)
    },
    currentValue(val) {
      this.$emit('input', val)
      this.userInput = null
    }
  },

  methods: {
    // ...
  },

  render(h) {
    // ...
  }
}