更新记录

1.0.1（2026-06-25） 下载此版本

优化组件。

1.0.0（2026-06-25） 下载此版本

首次发布

平台兼容性

uni-app(5.07)

jx-number 数字输入框组件

介绍

jx-number 是一个基于 uni-app 的数字输入框组件，参考 uni-number-box 设计，支持 Vue2 和 Vue3，完美兼容小程序、App、H5 等多端平台。

特性

• ✅ 支持 Vue2 和 Vue3 的 v-model 双向绑定
• ✅ 自动根据 step 处理数值精度（整数、0.1、0.01、0.001 等）
• ✅ 自动修正越界值（小于 min 或大于 max 时自动修正）
• ✅ 支持禁用状态、只读模式
• ✅ 可控制加减按钮显示/隐藏
• ✅ 完美的多端兼容性（小程序、App、H5）
• ✅ 组件高度 37px，紧凑美观

安装

将 jx-number 组件复制到项目的 uni_modules 目录下即可使用。

使用方法

Vue2 使用方式

<template>
  <view>
    <!-- 基础用法 -->
    <jx-number v-model="num1" />

    <!-- 带最小值最大值 -->
    <jx-number 
      v-model="num2" 
      :min="0" 
      :max="100" 
      :step="5" 
    />

    <!-- 小数精度控制 -->
    <jx-number 
      v-model="num3" 
      :step="0.01" 
      :min="0" 
      :max="10" 
    />

    <!-- 自定义宽度，隐藏加减按钮 -->
    <jx-number 
      v-model="num4" 
      :width="200"
      :show="false" 
    />

    <!-- 禁用状态 -->
    <jx-number v-model="num5" disabled />

    <!-- 只读模式 -->
    <jx-number v-model="num6" readonly />
  </view>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 10,
      num3: 0.00,
      num4: 5,
      num5: 20,
      num6: 15
    }
  },
  watch: {
    num1(newVal) {
      console.log('值变化:', newVal);
    }
  }
}
</script>

Vue3 使用方式

<template>
  <view>
    <!-- Vue3 推荐使用 v-model -->
    <jx-number v-model="num1" />

    <!-- 带配置 -->
    <jx-number 
      v-model="num2" 
      :min="0" 
      :max="100" 
      :step="0.1" 
    />
  </view>
</template>

<script setup>
import { ref } from 'vue';

const num1 = ref(0);
const num2 = ref(0.0);
</script>

API

Props（属性）

Events（事件）

数值精度说明

组件会根据 step 的值自动处理数值精度：

• step = 1 → 整数（0, 1, 2, 3...）
• step = 0.1 → 保留 1 位小数（0.0, 0.1, 0.2...）
• step = 0.01 → 保留 2 位小数（0.00, 0.01, 0.02...）
• step = 0.001 → 保留 3 位小数（0.000, 0.001, 0.002...）
• 以此类推...

平台兼容性

注意事项

1. v-model 绑定：组件同时支持 Vue2 的 v-model 和 Vue3 的 v-model，无需额外配置
2. 数值修正：当外部传入的值小于 min 或大于 max 时，组件会自动修正并同步回父组件
3. 精度处理：手动输入时，离开输入框会自动根据 step 格式化数值
4. step 建议：建议使用 1、0.1、0.01、0.001 等标准步长，避免浮点数精度问题
5. 禁用状态：disabled 为 true 时，加减按钮和输入框都会禁用
6. 只读模式：readonly 为 true 时，只能通过加减按钮修改值，不能手动输入

示例代码

完整示例

<template>
  <view class="container">
    <view class="item">
      <text>整数输入（step=1）</text>
      <jx-number 
        v-model="form.count" 
        :min="0" 
        :max="100" 
        :step="1" 
        :width="180"
      />
    </view>

    <view class="item">
      <text>价格输入（step=0.01）</text>
      <jx-number 
        v-model="form.price" 
        :min="0" 
        :max="9999" 
        :step="0.01" 
        :width="220"
      />
    </view>

    <view class="item">
      <text>百分比输入（step=0.1）</text>
      <jx-number 
        v-model="form.rate" 
        :min="0" 
        :max="100" 
        :step="0.1" 
        :width="200"
      />
    </view>

    <view class="item">
      <text>只读模式</text>
      <jx-number 
        v-model="form.readonlyValue" 
        :step="1" 
        readonly
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        count: 0,
        price: 0.00,
        rate: 0.0,
        readonlyValue: 10
      }
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
.item {
  margin-bottom: 20px;
}
.item text {
  display: block;
  margin-bottom: 10px;
}
</style>

更新日志

v1.0.0

• 🎉 初始版本发布
• ✅ 支持 Vue2 / Vue3
• ✅ 支持多端平台（小程序、App、H5）
• ✅ 自动数值精度处理
• ✅ 自动越界值修正
• ✅ 支持禁用、只读模式

许可证

MIT License

作者

jx-number 组件由开发者维护，如有问题欢迎反馈。