更新记录

0.0.1（2025-08-16） 下载此版本

init

平台兼容性

uni-app(4.07)

uni-app x(4.07)

Custom Input Number 自定义数字输入组件

一个简洁、易用的数字输入组件，支持步进调整功能。兼容 Vue 2 和 Vue 3。

功能特性

• 步进调整：通过加减按钮快速调整数值
• 数字输入：支持直接输入数字
• 范围限制：可设置最大值和最小值
• 步长控制：自定义每次增减的步长
• 精度控制：支持小数点精度设置
• 禁用状态：支持禁用整个组件
• 节流控制：防止快速点击导致的性能问题
• 自定义样式：支持通过 customStyle 自定义外观
• Vue 2/3 兼容：同时支持 Vue 2 和 Vue 3 的数据绑定方式

使用方法

基本用法

<template>
  <custom-input-number v-model="count" />
</template>

<script>
import CustomInputNumber from './input.vue';

export default {
  components: {
    CustomInputNumber
  },
  data() {
    return {
      count: 0
    };
  }
};
</script>

设置最大值和最小值

<custom-input-number v-model="count" :min="0" :max="100" />

自定义步长

<custom-input-number v-model="count" :step="5" />

精度控制

<custom-input-number v-model="price" :precision="2" :step="0.1" />

禁用状态

<custom-input-number v-model="count" :disabled="true" />

自定义样式

<custom-input-number 
  v-model="count" 
  :custom-style="{ 
    width: '200px', 
    borderRadius: '20px' 
  }" 
/>

属性

事件

节流功能

组件内置了节流功能，可通过 throttleTime 属性设置节流时间（默认 200 毫秒）。这有助于防止用户快速点击按钮导致的性能问题或不必要的频繁更新。

兼容性

该组件同时支持 Vue 2 和 Vue 3：

• 在 Vue 2 中使用 v-model 或 :value + @input
• 在 Vue 3 中使用 v-model 或 :modelValue + @update:modelValue

样式定制

组件提供了简洁的默认样式，同时支持通过 customStyle 属性进行样式定制。例如：

<custom-input-number 
  v-model="count" 
  :custom-style="{
    width: '180px',
    height: '48px',
    fontSize: '18px',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
  }" 
/>

注意事项

1. 输入框只允许输入数字和小数点
2. 当输入值超出最大值或最小值范围时，会自动调整为边界值
3. 当输入非数字时，会自动转换为有效数字或恢复为上一个有效值
4. 组件会根据设置的精度自动处理小数点位数