计数器（InputNumber）

Element-UI 的计数器组件用于输入标准的数字值，并可以通过按钮或键盘来增加或减少值。计数器组件可以定义数值范围、步长以及其他属性以满足不同的应用需求。

提示

计数器（InputNumber）官方文档：https://element.eleme.cn/#/zh-CN/component/input-number (opens new window)

1. 基本用法

基本语法：在 Vue 组件中使用 <el-input-number> 标签即可创建一个计数器。

<template>
  <el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
</template>

<script>
export default {
  data() {
    return {
      num: 5 // 初始值
    };
  }
};
</script>

• v-model 绑定：通过 v-model 绑定变量 num 控制计数器的值。用户通过按钮或输入改变值时，num 会自动更新。

InputNumber 属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	number	—	0
min	设置计数器允许的最小值	number	—	-Infinity
max	设置计数器允许的最大值	number	—	Infinity
step	计数器步长	number	—	1
step-strictly	是否只能输入 step 的倍数	boolean	—	false
precision	数值精度	number	—	—
size	计数器尺寸	string	large, small	—
disabled	是否禁用计数器	boolean	—	false
controls	是否使用控制按钮	boolean	—	true
controls-position	控制按钮位置	string	right	—
name	原生属性	string	—	—
label	输入框关联的 label 文本	string	—	—
placeholder	输入框默认 placeholder	string	—	—

InputNumber 事件

事件名称	说明	回调参数
change	绑定值被改变时触发	currentValue, oldValue
blur	在组件 Input 失去焦点时触发	(event: Event)
focus	在组件 Input 获得焦点时触发	(event: Event)

InputNumber 方法

方法名	说明	参数
focus	使 input 获取焦点	—
select	选中 input 中的文字	—

2. 常见计数器示例

基础计数器

设置计数器的最小值和最大值，并通过 v-model 绑定变量。

<template>
  <el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
</template>

<script>
export default {
  data() {
    return {
      num: 5 // 初始值
    };
  }
};
</script>

• 绑定值更新：当用户改变计数器的值时，v-model 绑定的变量 num 会自动更新。
• 

禁用状态的计数器

通过 disabled 属性禁用计数器，用户无法修改计数器的值。

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

<script>
export default {
  data() {
    return {
      num: 5 // 初始值
    };
  }
};
</script>

自定义步长的计数器

设置计数器的步长为 2，每次增加或减少操作都按指定步长调整。

<template>
  <el-input-number v-model="num" :min="0" :max="20" :step="2"></el-input-number>
</template>

<script>
export default {
  data() {
    return {
      num: 10 // 初始值
    };
  }
};
</script>

精确到小数的计数器

通过 precision 属性设置数值精度，使计数器值保留两位小数。

<template>
  <el-input-number v-model="num" :min="0" :max="1" :step="0.1" :precision="2"></el-input-number>
</template>

<script>
export default {
  data() {
    return {
      num: 0.5 // 初始值
    };
  }
};
</script>

只允许输入步长倍数的计数器

设置 step-strictly 属性，使计数器只允许输入步长的倍数。

<template>
  <el-input-number v-model="num" :min="0" :max="10" :step="2" step-strictly></el-input-number>
</template>

<script>
export default {
  data() {
    return {
      num: 4 // 初始值
    };
  }
};
</script>

设置计数器尺寸

可以通过 size 属性设置计数器的尺寸，支持 medium、small 和 mini 三种尺寸。

<template>
  <div>
    <el-input-number v-model="num1" :min="1" :max="10" size="medium"></el-input-number>
    <el-input-number v-model="num2" :min="1" :max="10" size="small"></el-input-number>
    <el-input-number v-model="num3" :min="1" :max="10" size="mini"></el-input-number>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 5,
      num2: 5,
      num3: 5
    };
  }
};
</script>

• 尺寸设置：通过 size 属性可以调整计数器的大小，使其适应不同的界面需求。
• 

设置控制按钮位置

通过 controls-position 属性可以将控制按钮的位置设置为右侧。

<template>
  <el-input-number v-model="num" :min="1" :max="10" controls-position="right"></el-input-number>
</template>

<script>
export default {
  data() {
    return {
      num: 5 // 初始值
    };
  }
};
</script>

• 控制按钮位置：默认情况下，控制按钮位于输入框内部的两侧。通过 controls-position 属性可以将控制按钮放置在输入框的右侧。
• 

总结

• 灵活的属性配置：通过设置 min、max、step、precision 等属性，可以精确控制计数器的行为。
• 多样的尺寸选择：支持 medium、small 和 mini 三种尺寸，以适应不同的界面设计需求。
• 控制按钮位置：可以根据需要调整控制按钮的位置，提供更灵活的用户体验。
• 丰富的事件处理：支持 change、blur、focus 等事件，允许开发者处理用户交互。
• 简单的交互方式：用户可以通过按钮或键盘输入来修改计数器的值，并实时更新绑定的数据。