当前位置：首页 > news >正文

element-plus教程：Input Number 数字输入框

news 2025/6/29 3:11:34

一、基础用法

要使用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等）结合使用，创建复合型输入框。