Input Number 数字输入框详解Element Plus 是一个基于 Vue 3 的 UI 组件库，它提供了丰富

Element Plus 是一个基于 Vue 3 的 UI 组件库，它提供了丰富的组件来帮助开发者快速构建现代化的 Web 应用程序。Input Number（数字输入框）是其中的一个基本组件，用于输入数字值，并提供了一些有用的特性如上下调节按钮、限制输入范围等。

`Input Number` 属性详解

v-model / model-value:

用途: 双向绑定输入框的值。可以是一个数字或字符串形式的数字。

<template>
  <el-input-number v-model="num" :min="1" :max="10"></el-input-number>
</template>
<script setup>
import { ref } from 'vue'
const num = ref(1)
</script>

min:
- 用途: 设置允许输入的最小值。
- 默认值: -Infinity
max:
- 用途: 设置允许输入的最大值。
- 默认值: Infinity
step:
- 用途: 设置每次点击增加或减少的步长。
- 默认值: 1
step-strictly:
- 用途: 是否严格遵从步长，即输入值必须为 min + n * step 的结果。
- 默认值: false
size:
- 用途: 设置输入框的尺寸，可选值为 medium、small、mini。
- 默认值: —
disabled:
- 用途: 是否禁用该输入框。
- 默认值: false
controls:
- 用途: 是否显示控制按钮（加减按钮）。
- 默认值: true
controls-position:
- 用途: 控制按钮的位置，可选值为 right。
- 默认值: —
name:
- 用途: 输入框的名称，主要用于表单提交。
- 默认值: —
label:
- 用途: 输入框的标签文本。
- 默认值: —
placeholder:
- 用途: 输入框为空时显示的提示信息。
- 默认值: —
precision:
- 用途: 设置数值精度，即小数点后的位数。
- 默认值: —
debounce:
- 用途: 输入值变化后延迟触发的时间，单位为毫秒。
- 默认值: 300

完整示例代码

<template>
  <div>
    <h2>Input Number 示例</h2>
    
    <!-- 基本用法 -->
    <el-input-number v-model="basicValue" placeholder="基本用法"></el-input-number>
    
    <!-- 最小值和最大值 -->
    <el-input-number v-model="value1" :min="1" :max="10" placeholder="1到10之间"></el-input-number>
    
    <!-- 步长 -->
    <el-input-number v-model="value2" :step="2" placeholder="步长为2"></el-input-number>
    
    <!-- 严格步长 -->
    <el-input-number v-model="value3" :step="2" :step-strictly="true" placeholder="严格步长"></el-input-number>
    
    <!-- 尺寸 -->
    <el-input-number v-model="value4" size="medium" placeholder="中等尺寸"></el-input-number>
    <el-input-number v-model="value5" size="small" placeholder="小尺寸"></el-input-number>
    <el-input-number v-model="value6" size="mini" placeholder="迷你尺寸"></el-input-number>
    
    <!-- 禁用状态 -->
    <el-input-number v-model="value7" disabled placeholder="禁用状态"></el-input-number>
    
    <!-- 隐藏控制按钮 -->
    <el-input-number v-model="value8" :controls="false" placeholder="隐藏控制按钮"></el-input-number>
    
    <!-- 控制按钮位置 -->
    <el-input-number v-model="value9" controls-position="right" placeholder="右侧控制按钮"></el-input-number>
    
    <!-- 名称 -->
    <el-input-number v-model="value10" name="exampleName" placeholder="名称属性"></el-input-number>
    
    <!-- 标签 -->
    <el-input-number v-model="value11" label="示例标签" placeholder="标签属性"></el-input-number>
    
    <!-- 占位符 -->
    <el-input-number v-model="value12" placeholder="请输入数字"></el-input-number>
    
    <!-- 精度 -->
    <el-input-number v-model="value13" :precision="2" placeholder="两位小数"></el-input-number>
    
    <!-- 延迟触发 -->
    <el-input-number v-model="value14" :debounce="500" placeholder="500ms延迟"></el-input-number>
    
    <!-- 当前值展示 -->
    <p>当前值: {{ value1 }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 基本值
const basicValue = ref(0)

// 最小值和最大值
const value1 = ref(1)

// 步长
const value2 = ref(0)

// 严格步长
const value3 = ref(0)

// 尺寸
const value4 = ref(0)
const value5 = ref(0)
const value6 = ref(0)

// 禁用状态
const value7 = ref(0)

// 隐藏控制按钮
const value8 = ref(0)

// 控制按钮位置
const value9 = ref(0)

// 名称
const value10 = ref(0)

// 标签
const value11 = ref(0)

// 占位符
const value12 = ref(0)

// 精度
const value13 = ref(0.00)

// 延迟触发
const value14 = ref(0)
</script>

<style scoped>
/* 添加一些样式以区分各个示例 */
.el-input-number {
  margin-bottom: 10px;
}
</style>

Input Number 数字输入框详解

Input Number 属性详解

完整示例代码

`Input Number` 属性详解