一、基础用法
要使用Input Number数字输入框，只需要在<el-input-number>元素中使用v-model绑定变量即可。例如：
<template>
<el-input-number v-model="value" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref(10); // 默认值为10
</script>
二、属性配置
Element Plus为Input Number提供了多种属性来进行配置，以满足不同的需求。以下是一些常用的属性：
| 属性名 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| v-model | number | 绑定值 | - |
| min | number | 计数器允许的最小值 | -∞ |
| max | number | 计数器允许的最大值 | +∞ |
| step | number | 计数器步长 | 1 |
| step-strictly | boolean | 是否只能输入步进的倍数 | false |
| precision | number | 数值精度，接收一个非负整数，且不能小于step的小数位数 | - |
| size | string | 计数器尺寸，可选值为large, small | - |
| controls | boolean | 是否使用控制按钮 | true |
| controls-position | string | 控制按钮位置，可选值为’right’ | - |
| disabled | boolean | 是否禁用状态 | false |
| readonly | boolean | 是否只读状态 | false |
| placeholder | string | 输入框占位符文本 | - |
三、事件处理
Element Plus为Input Number提供了多种事件来处理用户输入和组件状态变化。以下是一些常用的事件：
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 绑定值变化时触发 | 改变后的值 |
| blur | 组件失去焦点时触发 | - |
| focus | 组件获得焦点时触发 | - |
| input | 输入框内容变化时触发（注意：这个事件在Element Plus的Input Number中可能不常用，因为它主要用于原生input元素） | - |
四、高级用法
- 动态精度：在某些情况下，你可能需要根据用户输入的数字动态变更Input Number的精度（即
precision属性值）。这可以通过自定义指令或计算属性来实现。 - 自定义控制按钮：你可以通过插槽（slot）来自定义增减按钮的内容或样式。
- 与其他组件结合使用：你可以将Input Number与其他Element Plus组件（如
el-select、el-button等）结合使用，创建复合型输入框。
五、注意事项
- 当输入无效的字符串到输入框时，由于错误，输入值将把NaN导入到上层。
- 设置了计数器的最大值
max和最小值min后，计数器想要置为空的方法是将值置为undefined。
通过以上教程，你应该能够掌握Element Plus中Input Number数字输入框的基本用法和高级技巧，从而在你的项目中灵活地应用这个组件。