CNumberValve 数值滑块组件

功能说明

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

引用方式

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

组件参数

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

使用示例

基础用法

<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>

设置取值范围和步长

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

显示单位

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

注意事项

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