xtf-number-box

组件说明

xtf-number-box 是数量增减输入组件，适用于购物车、库存和重量填写。它会自动限制边界、处理小数精度，并通过 v-model 输出数值。

---

基础用法

1. 最简数量

<template><xtf-number-box v-model="count" /></template>
<script>
export default {
  data() {
    return { count: 1 }
  }
}
</script>

2. 边界与加减事件

<template>
  <xtf-number-box
    v-model="count"
    :min="1"
    :max="5"
    @change="changed"
    @plus="plus"
    @minus="minus"
    @blur="blurred"
    @overlimit="overlimit"
  />
</template>
<script>
export default {
  data() {
    return { count: 1 }
  },
  methods: {
    changed(value) {
      console.log('数量', value)
    },
    plus(value) {
      uni.showToast({ title: '增加到 ' + value, icon: 'none' })
    },
    minus(value) {
      uni.showToast({ title: '减少到 ' + value, icon: 'none' })
    },
    blurred(value) {
      console.log('确认数量', value)
    },
    overlimit(data) {
      uni.showToast({ title: data.type + ' 已到边界', icon: 'none' })
    }
  }
}
</script>

3. 小数与尺寸

<template>
  <xtf-number-box
    v-model="weight"
    :min="0.5"
    :max="5"
    :step="0.5"
    :decimal-length="1"
    input-width="120"
    button-size="76"
    theme="success"
  />
</template>
<script>
export default {
  data() {
    return { weight: 1.5 }
  }
}
</script>

---

全部属性

| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | | --- | --- | --- | --- | | value | Number \| String | 1 | 当前值，支持 v-model | 数量绑定 | | min/max | Number \| String | 0/9999 | 最小/最大可提交值 | 限制范围 | | step | Number \| String | 1 | 每次加减幅度 | 步进输入 | | disabled | Boolean | false | 禁用输入和按钮 | 不可编辑状态 | | integer | Boolean | false | 强制取整 | 件数 | | decimalLength | Number \| String | -1 | 小数位数，-1 自动推断 | 重量金额 | | inputWidth | Number \| String | 92 | 输入区宽度 | 紧凑布局 | | buttonSize | Number \| String | 68 | 加减按钮尺寸 | 尺寸调整 | | theme | String | 'primary' | 根节点主题类 | 自定义主题类配合 | | customClass | String | '' | 根节点类名 | 样式覆盖 | | customStyle | String \| Object | '' | 根节点样式 | 动态样式 |

事件

事件名称	触发时机	回调参数	参数说明
input	值提交后	(value: Number)	v-model 更新值
change	值提交后	(value: Number)	标准变更通知
plus/minus	点击加/减且成功	(value: Number)	变更后的值
blur	输入失焦或确认	(value: Number)	规范化后的值
focus	声明的事件名	()	源码未绑定原生 focus，当前不会触发
overlimit	在边界点击加减	({ type, value })	操作方向及当前值

---

插槽

插槽名	作用	作用域参数	说明
无	-	-	组件未提供插槽

主题说明

• 容器使用 var(--xtf-color-surface)、var(--xtf-color-border) 和 var(--xtf-shadow-soft)。
• 按钮背景使用 var(--xtf-color-surface-muted)，文字使用 var(--xtf-color-text)。 如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。