组件

Number input 数字输入

数字步进输入样式壳；± 按钮与数字框均用 :focus-visible 焦点环；步进行为由业务 JS 绑定。

默认

<div class="pvs-number-input">
  <button type="button" class="pvs-number-input__btn" aria-label="减少">−</button>
  <input class="pvs-number-input__field" type="number" value="1" min="0" max="99" aria-label="数量" />
  <button type="button" class="pvs-number-input__btn" aria-label="增加">+</button>
</div>

Small & block

pvs-number-input--sm 紧凑；--block 撑满容器宽。

<div class="pvs-cluster pvs-items-center">
  <div class="pvs-number-input pvs-number-input--sm">
    <button type="button" class="pvs-number-input__btn">−</button>
    <input class="pvs-number-input__field" type="number" value="3" />
    <button type="button" class="pvs-number-input__btn">+</button>
  </div>
</div>
<div class="pvs-number-input pvs-number-input--block pvs-mt-4" style="max-width:14rem">
  <button type="button" class="pvs-number-input__btn">−</button>
  <input class="pvs-number-input__field" type="number" value="10" />
  <button type="button" class="pvs-number-input__btn">+</button>
</div>

类名速查

类名	说明
`pvs-number-input`	根容器
`pvs-number-input__btn / __field`	步进钮与数字框
`pvs-number-input--sm / --block`	紧凑 / 块级