Vue数字输入框组件示例代码详解

下面我来详细讲解「Vue数字输入框组件示例代码详解」的完整攻略：

1. 简介

此篇文章介绍了一个基于Vue.js的数字输入框组件代码，包含了组件的使用和原理分析。该组件可以通过点击增加或减少数字的值，并且支持通过键盘输入数字。

2. 示例说明

以下为组件代码示例：

组件模板代码

<template>
  <div class="number-input-box" :class="{disabled: disabled}">
    <button @click="decrease">-</button>
    <input type="text"
           :value="value"
           @blur="handleBlur"
           @input="handleChange"
           :disabled="disabled"
    >
    <button @click="increase">+</button>
  </div>
</template>

组件JS代码

export default {
  name: 'NumberInput',
  props: {
    disabled: Boolean,
    value: [Number, String],
    defaultValue: {
      type: [Number, String],
      default: 0
    },
    min: {
      type: [Number, String],
      default: -Infinity
    },
    max: {
      type: [Number, String],
      default: Infinity
    },
    step: {
      type: [Number, String],
      default: 1
    }
  },
  data () {
    return {
      currentValue: this.value
    }
  },
  watch: {
    value (val) {
      if (val !== this.currentValue) {
        this.currentValue = val
      }
    },
    currentValue (val) {
      this.$emit('input', val)
    }
  },
  computed: {
    minDisabled () {
      return this.currentValue <= this.min
    },
    maxDisabled () {
      return this.currentValue >= this.max
    }
  },
  methods: {
    decrease () {
      if (this.disabled || this.minDisabled) return
      this.currentValue = Number(this.currentValue) - Number(this.step)
    },
    increase () {
      if (this.disabled || this.maxDisabled) return
      this.currentValue = Number(this.currentValue) + Number(this.step)
    },
    handleBlur () {
      if (this.currentValue < this.min) {
        this.currentValue = this.min
      } else if (this.currentValue > this.max) {
        this.currentValue = this.max
      }
    },
    handleChange (e) {
      let value = e.target.value.trim()
      value = Number(value)
      if (!isNaN(value)) {
        if (value < this.min) {
          value = this.min
        } else if (value > this.max) {
          value = this.max
        }
        this.currentValue = value
      } else {
        e.target.value = this.currentValue
      }
    }
  }
}

3. 如何使用

引入组件

将组件放在一个单独的文件中，文件名为NumberInput.vue，然后在需要使用的地方引入即可：

<template>
  <div class="app">
    <h1>Vue数字输入框组件示例</h1>
    <number-input
      :min="1"
      :max="999"
      :step="2"
      v-model="value">
    </number-input>
  </div>
</template>

<script>
import NumberInput from './NumberInput.vue'

export default {
  name: 'App',
  components: {
    NumberInput
  },
  data () {
    return {
      value: 50
    }
  }
}
</script>

组件属性

支持以下属性：

属性名	类型	默认值	说明
value	Number/String	0	当前的值
defaultValue	Number/String	0	默认的值
min	Number/String	-Infinity	最小值
max	Number/String	Infinity	最大值
step	Number/String	1	步幅
disabled	Boolean	false	是否禁用组件

事件

支持以下事件：

事件名	参数	说明
input	(value:Number/String)	当值发生变化时触发

4. 原理分析

模板代码

组件的模板代码将三个元素组合在了一起，分别为一个减少的按钮、一个文本输入框以及一个增加的按钮。其中，点击减少按钮和增加按钮可以调用decrease和increase方法实现数字的增减，文本输入框的值发生变化时会触发handleChange方法，同时文本输入框失去焦点时会触发handleBlur方法。

数据和属性

组件的数据有两个，一个是currentValue，表示当前的值，第二个是disabled，表示是否禁用组件。

组件的属性包括:

• defaultValue: 默认的值
• min: 最小值
• max: 最大值
• step: 步幅

值发生变化时会触发当前值的更改，并发送input事件，用于在需要用到组件的地方获取当前的值。

当属性值发生变化时，会通过watch函数来监控变化，并对currentValue进行值的更改。

在组件内部，还有两个computed属性：

• minDisabled：用于判断当前减少的按钮是否被禁用
• maxDisabled：用于判断当前增加的按钮是否被禁用

方法

此组件有四个方法：

• decrease：减少数字，并更新currentValue的值
• increase：增加数字，并更新currentValue的值
• handleBlur：在文本输入框失去焦点时触发，用以验证边界值
• handleChange：处理文本框的变化，并进行合法性校验

以上就是Vue数字输入框组件的攻略。