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>

<script setup lang="ts">
import { ref } from 'vue';
const value = ref(12);
</script>

尺寸 ​

四种尺寸的高度分别为 24px、28px、32px、36px；mode="button" 时两侧按钮与输入框等高。

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="mini" />
  <x-input-number v-model="value" mode="button" size="small" />
  <x-input-number v-model="value" mode="button" size="medium" />
  <x-input-number v-model="value" mode="button" size="large" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
const value = ref(12);
</script>

精度和步长 ​

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

<script setup lang="ts">
import { ref } from 'vue';
const value = ref(12);
</script>

格式化展示 ​

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>

前缀和后缀 ​

￥
%数量
件数量件

按钮模式下的前后置内容

mode="button" 时左右两端是加减按钮，prepend / append 插槽会被按钮占用。 需要自定义前后置内容时，请同时指定 hide-button（如上例第四项）。

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">
    <template #prepend>数量</template>
    <template #append>件</template>
  </x-input-number>
  <x-input-number v-model="value" mode="button" hide-button>
    <template #prepend>数量</template>
    <template #append>件</template>
  </x-input-number>
</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">
    <template #plus>+</template>
    <template #minus>-</template>
  </x-input-number>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const value = ref(12);
</script>

触发时机 ​

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

<script setup lang="ts">
import { ref } from 'vue';
const value = ref(12);
</script>

状态 ​

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

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

事件回调 ​

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

<script setup lang="ts">
import { ref } from 'vue';
const value = ref(12);
const eventLog = ref('等待操作');
const handleInput = (value: number | undefined, inputValue: string) => {
  eventLog.value = `input: ${inputValue || '空'} / ${value ?? '空'}`;
};
const handleChange = (value: number | undefined) => {
  eventLog.value = `change: ${value ?? '空'}`;
};
const handleClear = () => {
  eventLog.value = 'clear';
};
</script>

方法 ​

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>

<script setup lang="ts">
import { ref } from 'vue';
const value = ref(12);
const inputNumberRef = ref();
</script>

在 Form 中校验 ​

组件放进 x-form-item 后会自动继承 Form 的尺寸与禁用状态，并按 FormItem 的校验规则展示错误。默认 validateTrigger 为 change，即值变化时触发校验。

vue
<template>
  <x-form ref="formRef" :model="formState" :rules="formRules">
    <x-form-item field="quantity" label="数量">
      <x-input-number v-model="formState.quantity" :min="1" placeholder="请输入数量" />
    </x-form-item>
    <x-form-item>
      <x-space>
        <x-button type="primary" @click="handleValidate">校验</x-button>
        <x-button @click="handleReset">重置</x-button>
      </x-space>
    </x-form-item>
  </x-form>
  <p role="status">{{ validateResult }}</p>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance, FieldRule } from 'x-next';

const formState = reactive({ quantity: undefined as number | undefined });
const formRules: Record<string, FieldRule[]> = {
  quantity: [{ required: true, type: 'number', min: 1, message: '数量至少为 1' }],
};
const formRef = ref<FormInstance>();
const validateResult = ref('');

const handleValidate = async () => {
  const errors = await formRef.value!.validate();
  validateResult.value = errors
    ? `校验失败：${Object.values(errors).map((error) => error.message).join('；')}`
    : '校验通过';
};
const handleReset = () => {
  formRef.value!.resetFields();
  validateResult.value = '已重置';
};
</script>

按需导入 ​

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

样式按需引入（base.css 为共享基础层，多个组件只需引入一次）：

ts
import 'x-next/style/base.css';
import 'x-next/style/form-input-number.css';

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是否隐藏步进按钮；mode="button" 时同时用于让出 prepend / append 插槽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使输入框失去焦点