更新所有表单组件文档和头注释

Tevin

2025-03-18 fdeb869c386da95150a087bc22bcebc4e57d0f76

 forms/numberValve/CNumberValve.vue

@@ -1,5 +1,8 @@
/**
 * CNumberValve
 * 数值滑块组件，用于在表单中通过滑块选择数值
 * 提供了滑动条和增减按钮两种方式来调整数值
 * 支持设置数值范围、步长和单位显示
 * @author Tevin
 */

@@ -16,18 +19,15 @@
                :required="itemRes.required"
                :disabled="itemRes.disabled"
                :error="itemRes.error"
                :value="itemRes.formData[itemRes.name]"
                :value="valueStr"
                :placeholder="placeholder"
            >
                <view class="at-icon at-icon-chevron-right"></view>
            </AtInput>
        </view>
        <AtRange
            :min="range[0]"
            :max="range[1]"
            :value="[0, itemRes.formData[itemRes.name]]"
            :onChange="evt => evt && itemRes.onChange(evt[1])"
        />
        <AtFloatLayout
            :class="placeholder?'on-title':''"
            :title="placeholder"
            :isOpened="opened"
            :onClose="evt => handleClose()"
        >
@@ -52,7 +52,16 @@
                            @touchstart="evt => handleTouchStart()"
                            @touchmove="evt => handleTouchMove(evt)"
                        ></view>
                        <view class="current"><text class="text">{{current}}</text></view>
                        <view class="current">
                            <text
                                class="text m-text-ignore"
                                v-if="current===''"
                            >(请拖动)</text>
                            <text
                                class="text"
                                v-else
                            >{{current}}</text>
                        </view>
                    </view>
                </view>
                <view class="btn">
@@ -74,7 +83,7 @@
<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import { AtInput, AtFloatLayout, AtButton, AtRange } from 'taro-ui-vue';
import { AtInput, AtFloatLayout, AtButton } from 'taro-ui-vue';
import './cNumberValve.scss';

export default {
@@ -83,7 +92,6 @@
        AtInput,
        AtFloatLayout,
        AtButton,
        AtRange,
    },
    props: {
        // 表单数据资源（表单组件内部机制专用）
@@ -100,16 +108,32 @@
            type: Number,
            default: 1,
        },
        // 数值单位（仅显示）
        unit: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            opened: false,
            rect: { width: 0, left: 0 },
            current: 0,
            current: '',
            sliderLeft: 0,
        };
    },
    computed: {},
    computed: {
        valueStr() {
            if (
                this.itemRes.formData[this.itemRes.name] ||
                this.itemRes.formData[this.itemRes.name] === 0
            ) {
                return this.itemRes.formData[this.itemRes.name] + ' ' + this.unit;
            } else {
                return '';
            }
        },
    },
    methods: {
        handleOpen() {
            this.opened = true;
@@ -132,9 +156,17 @@
            const targetValue = clientX - this.rect.left;
            const distance = Math.min(Math.max(targetValue, 0), this.rect.width);
            const sliderLeft = Math.floor((distance / this.rect.width) * 100);
            const sliderValue =
            // 实际值
            let sliderValue =
                Math.round((sliderLeft / 100) * (this.range[1] - this.range[0])) +
                this.range[0];
            if (this.range[0] < sliderValue && sliderValue < this.range[1]) {
                sliderValue -= sliderValue % this.step;
            }
            // 范围限制
            sliderValue = Math.max(sliderValue, this.range[0]);
            sliderValue = Math.min(sliderValue, this.range[1]);
            // 设置
            this.sliderLeft = sliderLeft;
            this.current = sliderValue;
            this.itemRes.onChange(sliderValue);
@@ -143,29 +175,45 @@
            let $slider = null;
            if (process.env.TARO_ENV === 'h5') {
                $slider = $(this.$refs.slider.$el);
                const rect = $slider[0].getBoundingClientRect();
                this.rect.width = rect.width;
                this.rect.left = rect.left;
            } else if (process.env.TARO_ENV === 'weapp') {
                $slider = $(this.$refs.slider);
                Taro.createSelectorQuery()
                    .select('#' + this.$refs.slider.uid)
                    .boundingClientRect(rect => {
                        this.rect.width = rect.width;
                        this.rect.left = rect.left;
                    })
                    .exec();
            }
            Taro.createSelectorQuery()
                .select('#' + this.$refs.slider.uid)
                .boundingClientRect(rect => {
                    this.rect.width = rect.width;
                    this.rect.left = rect.left;
                })
                .exec();
        },
        handleChangeVal(type, value) {
            this.updateRect();
            let currentNext = 0;
            if (type === 'left') {
                currentNext = this.current - this.step;
                const gap = this.current % this.step;
                if (gap === 0) {
                    currentNext = this.current - this.step;
                } else {
                    currentNext = this.current - gap;
                }
            } else if (type === 'right') {
                currentNext = this.current + this.step;
                const gap = this.current % this.step;
                if (gap === 0) {
                    currentNext = this.current + this.step;
                } else {
                    currentNext = this.current + (this.step - gap);
                }
            } else if (type === 'change') {
                currentNext = value;
            }
            // 范围限制
            currentNext = Math.max(currentNext, this.range[0]);
            currentNext = Math.min(currentNext, this.range[1]);
            // 设置
            const sliderLeft = Math.round(
                ((currentNext - this.range[0]) / (this.range[1] - this.range[0])) * 100
                ((currentNext - this.range[0]) / (this.range[1] - this.range[0])) * 100,
            );
            this.sliderLeft = sliderLeft;
            this.current = currentNext;