InputNumber 計數器

數字輸入框。支援 min/max 邊界、step 步進與 stepStrictly 倍數約束、precision 小數位、加減按鈕開關與三檔尺寸；鍵盤 ↑/↓ 同樣步進。

計數器

<template>
  <div class="demo-col" style="gap: 20px">
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="count" :min="1" :max="99" :step="1" placeholder="數量" name="count" />
      <span class="demo-note">min=1 max=99，受控值：{{ count }}</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="price" :step="0.5" :precision="2" :min="0" />
      <span class="demo-note">step=0.5 precision=2：{{ price }}</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="strict" :step="10" step-strictly />
      <span class="demo-note">stepStrictly：輸入框失焦後歸到 10 的倍數</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="noControls" :controls="false" placeholder="無步進器" />
      <LhInputNumber v-model="disabledVal" disabled />
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="sized" size="small" />
      <LhInputNumber v-model="sized" size="medium" />
      <LhInputNumber v-model="sized" size="large" />
    </div>
    <p class="demo-note">controls=false 隱藏加減按鈕；輸入框聚焦時方向鍵（↑/↓）也可步進。</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    count: 6,
    price: 12.5,
    strict: 20,
    noControls: undefined,
    disabledVal: 3,
    sized: 8,
  }),
}
</script>

Props

屬性	說明	類型	預設值
v-model	綁定值（model: modelValue/input）	number \| null	null
min	最小值（低於則歸到 min）	number	—
max	最大值（超過則歸到 max）	number	—
step	步進值	number	1
stepStrictly	輸入值必須是 step 的倍數（失焦歸位）	boolean	false
precision	小數位數（超出則四捨五入）	number	—
controls	顯示加減按鈕	boolean	true
size	尺寸	'small' \| 'medium' \| 'large'	'medium'
disabled	停用	boolean	false
placeholder	佔位文案	string	—
name	原生 name	string	—
sx	sx 快速佈局屬性	—	—

Events

事件	說明	回呼參數
input	v-model 事件	(val)
change	值變化時觸發	(val)

無障礙

加減按鈕為原生 button；輸入框聚焦時 ↑/↓ 步進；置於 LhFormItem 內校驗失敗時 aria-invalid。