CNumberStep 数字步进器组件

功能说明

CNumberStep 是一个数字步进器组件，用于在表单中输入数字并通过步进按钮增减数值。组件支持设置数值范围、步长、奇偶修正和单位显示。

引用方式

import { CNumberStep } from '@components/forms/numberStep';

组件参数

• itemRes (Object，必填)：表单数据资源对象，表单组件内部机制专用
• placeholder (String，可选)：输入框占位提示文本
• range (Array，可选)：取值范围，格式为 [最小值, 最大值]，默认为 [0, 100]
• step (Number，可选)：步长，即每次点击增减按钮改变的数值，默认为 1
• correct (String，可选)：奇偶修正模式，可选值有 odd（奇数）、even（偶数），默认为空
• unit (String，可选)：数值单位，显示在数字输入框右侧

使用示例

基础用法

<template>
  <CForm :form="form">
    <CFormItem name="quantity" label="数量">
      <CNumberStep />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CNumberStep } from '@components/forms/numberStep';

export default {
  components: {
    CForm,
    CFormItem,
    CNumberStep
  },
  data() {
    return {
      form: {
        quantity: 1
      }
    };
  }
};
</script>

设置取值范围和步长

<CFormItem name="age" label="年龄">
  <CNumberStep :range="[18, 60]" :step="1" />
</CFormItem>

奇偶修正模式

<!-- 只允许选择奇数 -->
<CFormItem name="oddNumber" label="奇数">
  <CNumberStep correct="odd" />
</CFormItem>

<!-- 只允许选择偶数 -->
<CFormItem name="evenNumber" label="偶数">
  <CNumberStep correct="even" />
</CFormItem>

显示单位

<CFormItem name="weight" label="重量">
  <CNumberStep :range="[0, 200]" :step="0.5" unit="kg" />
</CFormItem>

注意事项

1. CNumberStep 组件通常需要配合 CForm 和 CFormItem 组件一起使用
2. 当设置 correct 参数时，组件会自动修正输入值，确保符合奇数或偶数的要求
3. 奇偶修正规则：

• 当输入值不符合奇偶要求时，如果是增加操作，会再增加 1；如果是减少操作，会再减少 1
• 如果修正后的值超出范围，则会向相反方向修正

1. 组件支持直接输入数字，但会自动限制在设定的范围内
2. 当输入框为空时，点击步进按钮会将值设置为最小值