el-input-number

`el-input-number` 是一个基于 Element UI 的数字输入框组件。它提供了一个可自定义范围的数字输入框，用户可以通过鼠标滚轮或点击按钮来增加或减少数值。你可以使用 `el-input-number` 来实现数字输入和调整的功能。

以下是一个示例代码，展示如何使用 `el-input-number` 组件：

<template>
  <el-input-number v-model="value" :min="1" :max="10" :step="1"></el-input-number>
</template>

<script>
export default {
  data() {
    return {
      value: 1
    };
  }
};
</script>

在上面的示例中，我们使用 `v-model` 指令将 `value` 变量与 `el-input-number` 组件进行双向绑定。通过设置 `min` 和 `max` 属性，我们限制了数值的范围为 1 到 10 之间。`step` 属性表示每次增加或减少的步长为 1。

你可以根据自己的需求，进一步自定义 `el-input-number` 组件的样式和功能。

相关问题

el-input-number 输入负数

### element UI `el-input-number` 组件支持输入负数的方法

在使用 `el-input-number` 组件时，默认情况下是可以输入负数的，除非特别设置了最小值为0从而限制了这一行为。如果希望确保能够输入负数，则可以通过设置属性 `min` 来实现这一点。

#### 设置 min 属性以允许负数输入

为了使 `el-input-number` 接受负数值，在初始化组件时应将 `min` 属性设为一个小于零的值，比如 `-Infinity` 或者具体的负数界限。这会使得用户可以自由地减少到任何小于设定的最大值且不低于指定最小值的数字[^1]。

<template>
  <div class="demo">
    <!-- 使用 el-input-number 并设置 min 属性 -->
    <el-input-number v-model="num" :min="-999"></el-input-number>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: null, // 初始值可为空或其他默认值
    };
  },
};
</script>

此代码片段展示了如何通过配置 `min` 参数来让 `el-input-number` 支持负数输入。当 `min` 设定为一个负数时，如上述例子中的 `-999`，则表示允许用户输入直到该最低限度为止的所有整数，包括正数、零和相应的负数范围内的值[^2]。

el-input-number step

el-input-number 的 step 属性用于设置每次点击增加或减少按钮时的步长（增加或减少的值）。默认情况下，步长为 1。

你可以通过设置 step 属性来自定义步长。例如，将 step 设置为 0.5，则每次点击增加或减少按钮时，el-input-number 的值将增加或减少 0.5。

以下是一个示例：

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

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

在上面的示例中，el-input-number 的初始值为 0，而且步长设置为 0.5。因此，每次点击增加或减少按钮时，el-input-number 的值将增加或减少 0.5。