X-Next

Appearance

InputNumber 数字输入 ​

用于金额、数量、比例等需要数值约束的输入场景。

基础用法 ​

vue
<template>
  <x-input-number v-model="value" :min="0" :max="100" />
  <x-input-number :default-value="32" :min="0" :max="100" />
  <x-input-number :default-value="500" disabled />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(12);
</script>

按钮模式 ​

vue
<template>
  <x-input-number v-model="value" :min="0" :max="100" />
  <x-input-number v-model="value" mode="button" :min="0" :max="100" />
</template>

尺寸 ​

vue
<template>
  <x-input-number v-model="value" size="mini" />
  <x-input-number v-model="value" size="small" />
  <x-input-number v-model="value" size="medium" />
  <x-input-number v-model="value" size="large" />
  <x-input-number v-model="value" mode="button" size="large" />
</template>

精度和步长 ​

3.6
vue
<template>
  <x-input-number v-model="value" :step="1.2" :precision="2" />
</template>

格式化展示 ​

12000
vue
<template>
  <x-input-number
    v-model="value"
    :min="0"
    :formatter="formatter"
    :parser="parser"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(12000);
const formatter = (value: string) => {
  const values = value.split('.');
  values[0] = values[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return values.join('.');
};
const parser = (value: string) => value.replace(/,/g, '');
</script>

前缀和后缀 ​

￥
%
vue
<template>
  <x-input-number v-model="value" allow-clear>
    <template #prefix>￥</template>
  </x-input-number>
  <x-input-number v-model="value" allow-clear hide-button>
    <template #suffix>%</template>
  </x-input-number>
  <x-input-number v-model="value" mode="button">
    <template #prepend>数量</template>
    <template #append>件</template>
  </x-input-number>
</template>

自定义图标 ​

vue
<template>
  <x-input-number v-model="value" :min="0" :max="100">
    <template #plus>+</template>
    <template #minus>-</template>
  </x-input-number>
</template>

触发时机 ​

15
vue
<template>
  <x-input-number
    v-model="value"
    :min="10"
    :max="100"
    model-event="input"
  />
</template>

状态 ​

vue
<template>
  <x-input-number :default-value="12" read-only />
  <x-input-number :default-value="12" error />
  <x-input-number :default-value="12" disabled />
</template>

事件回调 ​

等待操作
vue
<template>
  <x-input-number
    v-model="value"
    allow-clear
    @input="handleInput"
    @change="handleChange"
    @clear="handleClear"
  />
</template>

方法 ​

vue
<template>
  <x-input-number ref="inputNumberRef" v-model="value" />
  <x-button @click="inputNumberRef?.focus()">聚焦</x-button>
  <x-button @click="inputNumberRef?.blur()">失焦</x-button>
</template>

按需导入 ​

ts
import { InputNumber } from 'x-next';

Props ​

参数说明类型默认值
modelValue绑定值number-
defaultValue默认值，非受控模式number-
mode按钮模式'embed' | 'button''embed'
precision数字精度number-
step数字变化步长number1
disabled是否禁用booleanfalse
error是否错误状态booleanfalse
max最大值numberInfinity
min最小值number-Infinity
formatter展示值格式化(value: string) => string-
parser将展示值解析为数字字符串(value: string) => string-
placeholder占位提示string-
hideButton是否隐藏步进按钮booleanfalse
size输入框尺寸'mini' | 'small' | 'medium' | 'large'跟随全局配置
allowClear是否允许清空booleanfalse
modelEvent触发 v-model 更新的事件'change' | 'input''change'
readOnly是否只读booleanfalse
inputAttrs内部 input 元素属性object-

Events ​

事件名说明回调参数
update:modelValue值更新时触发value
change值变化时触发value, event
input输入时触发value, inputValue, event
focus获取焦点时触发event
blur失去焦点时触发event
clear点击清除按钮时触发event
keydown按下键盘时触发event

Slots ​

插槽名说明
prefix前缀内容
suffix后缀内容
prepend前置标签
append后置标签
plus自定义增加按钮图标
minus自定义减少按钮图标

Methods ​

方法说明
focus使输入框获取焦点
blur使输入框失去焦点