Input Number 数字输入框 ​

仅允许输入标准的数字值，可定义范围

ts
import { createApp } from 'vue'
import { InputNumber as ElInputNumber } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElInputNumber)

基础用法 ​

TIP

TIP 当输入无效的字符串到输入框时，由于错误，输入值将把 NaN 导入到上层

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

<script lang="ts" setup>
import { ref } from 'vue'
import { InputNumber as ElInputNumber } from '@szhn/dh-design-pc'


const num = ref(1)
const handleChange = (value: number | undefined) => {
  console.log(value)
}
</script>

禁用状态 ​

<template>
  <el-input-number v-model="num" :disabled="true" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { InputNumber as ElInputNumber } from '@szhn/dh-design-pc'


const num = ref(1)
</script>

步进 ​

允许定义递增递减的步进控制

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

<script lang="ts" setup>
import { ref } from 'vue'
import { InputNumber as ElInputNumber } from '@szhn/dh-design-pc'


const num = ref(5)
</script>

严格步进 ​

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

<script lang="ts" setup>
import { ref } from 'vue'
import { InputNumber as ElInputNumber } from '@szhn/dh-design-pc'


const num = ref(2)
</script>

精度 ​

TIP

TIP precision 的值必须是一个非负整数，并且不能小于 step 的小数位数。

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

<script lang="ts" setup>
import { ref } from 'vue'
import { InputNumber as ElInputNumber } from '@szhn/dh-design-pc'


const num = ref(1)
</script>

不同的输入框尺寸 ​

使用 size 属性额外配置尺寸，可选的尺寸大小为：large 或 small

<template>
  <div class="flex flex-wrap items-center gap-4">
    <el-input-number v-model="num1" size="large" />
    <el-input-number v-model="num2" />
    <el-input-number v-model="num3" size="small" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { InputNumber as ElInputNumber } from '@szhn/dh-design-pc'


const num1 = ref(1)
const num2 = ref(2)
const num3 = ref(3)
</script>

按钮位置 ​

<template>
  <div class="flex flex-wrap items-center gap-4">
    <el-input-number
      v-model="num"
      :min="1"
      :max="10"
      controls-position="right"
      size="large"
      @change="handleChange"
    />
    <el-input-number
      v-model="num"
      :min="1"
      :max="10"
      controls-position="right"
      @change="handleChange"
    />
    <el-input-number
      v-model="num"
      :min="1"
      :max="10"
      size="small"
      controls-position="right"
      @change="handleChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { InputNumber as ElInputNumber } from '@szhn/dh-design-pc'


const num = ref(1)
const handleChange = (value: number | undefined) => {
  console.log(value)
}
</script>

自定义图标 (2.6.3) ​

<template>
  <el-space direction="vertical">
    <el-space>
      <el-input-number v-model="num" />
      <el-input-number v-model="num">
        <template #decrease-icon>
          <el-icon>
            <ArrowDown />
          </el-icon>
        </template>
        <template #increase-icon>
          <el-icon>
            <ArrowUp />
          </el-icon>
        </template>
      </el-input-number>
    </el-space>
    <el-space>
      <el-input-number v-model="num" controls-position="right" />
      <el-input-number v-model="num" controls-position="right">
        <template #decrease-icon>
          <el-icon>
            <Minus />
          </el-icon>
        </template>
        <template #increase-icon>
          <el-icon>
            <Plus />
          </el-icon>
        </template>
      </el-input-number>
    </el-space>
  </el-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ArrowDown, ArrowUp, Minus, Plus } from '@szhn/dh-design-pc/icons'
import { Icon as ElIcon, InputNumber as ElInputNumber, Space as ElSpace } from '@szhn/dh-design-pc'


const num = ref(1)
</script>

带前缀和后缀 (2.8.4) ​

TIP

TIP 为了确保精度，输入的数值被限制在 Number.MIN_SAFE_INTEGER 到 Number.MAX_SAFE_INTEGER 之间。

<template>
  <el-space>
    <el-input-number v-model="num" :min="1" :max="10">
      <template #prefix>
        <span>￥</span>
      </template>
    </el-input-number>
    <el-input-number v-model="num" :min="1" :max="10">
      <template #suffix>
        <span>RMB</span>
      </template>
    </el-input-number>
  </el-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { InputNumber as ElInputNumber, Space as ElSpace } from '@szhn/dh-design-pc'


const num = ref(1)
</script>

格式化 (2.14.0) ​

通过 formatter 和 parser 属性来格式化输入框中显示的值。formatter 用于将实际值转换为显示值，parser 用于将显示值转换回实际值。

<template>
  <el-space direction="vertical">
    <el-input-number
      v-model="num1"
      :formatter="formatCurrency"
      :parser="parseCurrency"
    />
    <el-input-number
      v-model="num2"
      :min="0"
      :max="100"
      :formatter="formatPercent"
      :parser="parsePercent"
    />
  </el-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { InputNumber as ElInputNumber, Space as ElSpace } from '@szhn/dh-design-pc'


const num1 = ref(1000)
const num2 = ref(50)

const formatCurrency = (value: number | string) =>
  `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
const parseCurrency = (value: string) => value.replace(/\$\s?|(,*)/g, '')
const formatPercent = (value: number | string) => `${value}%`
const parsePercent = (value: string) => value.replace('%', '')
</script>

API ​

Attributes ​

属性名说明类型默认值
model-value / v-model选中项绑定值number / null—
min设置计数器允许的最小值numberNumber.MIN_SAFE_INTEGER
max设置计数器允许的最大值numberNumber.MAX_SAFE_INTEGER
step计数器步长number1
step-strictly是否只能输入 step 的倍数booleanfalse
precision数值精度number—
size计数器尺寸enumdefault
readonly 2.2.16原生 readonly 属性，是否只读booleanfalse
disabled是否禁用状态booleanfalse
controls是否使用控制按钮booleantrue
controls-position控制按钮位置enum—
name等价于原生 input name 属性string—
aria-label a11y 2.7.2等价于原生 input aria-label 属性string—
placeholder等价于原生 input placeholder 属性string—
id等价于原生 input id 属性string—
value-on-clear 2.2.0当输入框被清空时显示的值number / null / enum—
validate-event是否触发表单验证booleantrue
tabindexinput 的 tabindexstring / number—
formatter 2.14.0指定输入框展示值的格式Function—
parser 2.14.0指定从格式化器输入中提取的值Function—
label a11y deprecated等价于原生 input aria-label 属性string—
inputmode 2.10.3等价于原生 input inputmode 属性string—
align 2.10.5内部输入文本对齐enum'center'
disabled-scientific 2.10.5禁用科学计数法的输入（例如输入 'e'）booleanfalse

Slots ​

插槽名说明
decrease-icon 2.6.3自定义输入框按钮减少图标
increase-icon 2.6.3自定义输入框按钮增加图标
prefix 2.8.4输入框头部内容
suffix 2.8.4输入框尾部内容

Events ​

名称说明类型
change绑定值被改变时触发Function
blur在组件 Input 失去焦点时触发Function
focus在组件 Input 获得焦点时触发Function

Exposes ​

名称详情类型
focus使 input 组件获得焦点Function
blur使 input 组件失去焦点Function