# CNumberValve 数值滑块组件

## 功能说明

CNumberValve 是一个数值滑块组件，用于在表单中通过滑块选择数值。组件提供了滑动条和增减按钮两种方式来调整数值，并支持设置数值范围、步长和单位显示。

## 引用方式

```js
import { CNumberValve } from '@components/forms/numberValve';
```

## 组件参数

- `itemRes` (Object，必填)：表单数据资源对象，表单组件内部机制专用
- `placeholder` (String，可选)：输入框占位提示文本
- `range` (Array，可选)：取值范围，格式为 [最小值, 最大值]，默认为 [0, 100]
- `step` (Number，可选)：步长，即每次调整改变的最小数值单位，默认为 1
- `unit` (String，可选)：数值单位，仅用于显示，不影响实际值

## 使用示例

### 基础用法

```html
<template>
    <CForm :form="form">
        <CFormItem name="volume" label="音量">
            <CNumberValve placeholder="请选择音量" />
        </CFormItem>
    </CForm>
</template>

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

export default {
    components: {
        CForm,
        CFormItem,
        CNumberValve,
    },
    data() {
        return {
            form: {
                volume: 50,
            },
        };
    },
};
</script>
```

### 设置取值范围和步长

```html
<CFormItem name="temperature" label="温度">
    <CNumberValve :range="[16, 32]" :step="0.5" placeholder="请选择温度" />
</CFormItem>
```

### 显示单位

```html
<CFormItem name="distance" label="距离">
    <CNumberValve :range="[0, 1000]" :step="10" unit="米" placeholder="请选择距离" />
</CFormItem>
```

## 注意事项

1. CNumberValve 组件通常需要配合 CForm 和 CFormItem 组件一起使用
2. 点击组件会弹出滑块选择浮层，用户可以通过以下方式调整数值：
    - 拖动滑块：直接拖动滑块到所需位置
    - 点击按钮：点击"减小"或"增加"按钮按步长调整数值
3. 组件会根据设定的步长自动对数值进行修正，确保数值是步长的整数倍
4. 当设置了 `unit` 参数时，单位文本会显示在表单项的值后面，但不会影响实际存储的数值
5. 组件会自动限制数值在设定的范围内