FxInputNumber 计数器

仅允许输入标准的数字值，并可定义范围与步进。不依赖任何 UI 框架，基于 FxInput，复用 v-repeat-click（长按重复）。颜色走 @fx/styles token。

基础用法

<template>
  <FxInputNumber v-model="num" />
</template>

<script setup lang="ts">
import { ref } from "vue"
const num = ref(1)
</script>

禁用

<template>
  <FxInputNumber v-model="num" :disabled="true" />
</template>

<script setup lang="ts">
import { ref } from "vue"
const num = ref(1)
</script>

步进

step 设置步进；长按按钮持续递增。

<template>
  <FxInputNumber v-model="num" :step="2" />
</template>

<script setup lang="ts">
import { ref } from "vue"
const num = ref(2)
</script>

严格步进

step-strictly 只接受 step 的倍数。

<template>
  <div class="col">
    <FxInputNumber v-model="num" :step="2" step-strictly />
    <span class="tip">只能输入 step（2）的倍数</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const num = ref(2)
</script>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tip {
  color: var(--fx-text-color-secondary);
  font-size: 13px;
}
</style>

精度

precision 限制小数位。

<template>
  <FxInputNumber v-model="num" :precision="2" :step="0.1" />
</template>

<script setup lang="ts">
import { ref } from "vue"
const num = ref(5.12)
</script>

尺寸

<template>
  <div class="row">
    <FxInputNumber v-model="n1" size="large" />
    <FxInputNumber v-model="n2" />
    <FxInputNumber v-model="n3" size="small" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const n1 = ref(1)
const n2 = ref(1)
const n3 = ref(1)
</script>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 16px;
}
</style>

按钮位置

controls-position="right" 把控制按钮放右侧（上下堆叠）。

<template>
  <div class="row">
    <FxInputNumber v-model="n1" />
    <FxInputNumber v-model="n2" controls-position="right" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const n1 = ref(1)
const n2 = ref(1)
</script>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 16px;
}
</style>

自定义图标

decrease-icon / increase-icon 插槽自定义按钮图标。

<template>
  <div class="col">
    <span class="tip">decrease-icon / increase-icon 插槽自定义按钮图标</span>
    <FxInputNumber v-model="num">
      <template #decrease-icon>
        <FxIcon name="ep:minus" />
      </template>
      <template #increase-icon>
        <FxIcon name="ep:plus" />
      </template>
    </FxInputNumber>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const num = ref(1)
</script>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tip {
  color: var(--fx-text-color-secondary);
  font-size: 13px;
}
</style>

前缀 / 后缀

prefix / suffix 插槽（透传给 FxInput）。

<template>
  <div class="col">
    <FxInputNumber v-model="num" :min="0" :max="10">
      <template #prefix>数量</template>
    </FxInputNumber>
    <FxInputNumber v-model="price" :precision="2">
      <template #suffix>￥</template>
    </FxInputNumber>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const num = ref(3)
const price = ref(9.9)
</script>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

格式化

formatter / parser 控制展示与解析（如千分位、货币符号）。

<template>
  <div class="col">
    <span class="tip">formatter/parser 用于格式化展示（如带千分位）</span>
    <FxInputNumber
      v-model="num"
      :formatter="(v) => `$ ${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
      :parser="(v) => v.replace(/\$\s?|(,*)/g, '')"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const num = ref(12345)
</script>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tip {
  color: var(--fx-text-color-secondary);
  font-size: 13px;
}
</style>

API

Attributes

属性	说明	类型	默认值
v-model / modelValue	绑定值	number | null	—
min	最小值	number	MIN_SAFE_INTEGER
max	最大值	number	MAX_SAFE_INTEGER
step	步进	number	1
step-strictly	是否只能是 step 的倍数	boolean	false
precision	精度（小数位）	number	—
size	尺寸	'large' | 'default' | 'small'	default
disabled	是否禁用	boolean	false
controls	是否显示控制按钮	boolean	true
controls-position	按钮位置	'' | 'right'	''
value-on-clear	清空时的值	'min' | 'max' | number | null	null
readonly	只读	boolean	false
name	input name	string	—
placeholder	占位	string	—
align	内容排列方向	'left' | 'right' | 'center'	center
disabled-scientific	禁用科学计数法输入（e/E）	boolean	false
formatter / parser	展示格式化 / 解析	(v: string) => string	—
tabindex	tabindex	string | number	0

Slots

插槽名	说明
decrease-icon	自定义减少按钮图标
increase-icon	自定义增加按钮图标
prefix	输入框前缀
suffix	输入框后缀

Events

事件名	说明	类型
update:modelValue	值变化	(val: number | undefined) => void
change	值变化（含新旧值）	(cur, prev) => void
input	输入时	(val: number | null | undefined) => void
blur	失焦	(evt: FocusEvent) => void
focus	聚焦	(evt: FocusEvent) => void

Exposes

方法	说明
focus	聚焦输入框
blur	移除焦点