数值步长输入组件，修复空值时显示异常的问题

Tevin

2022-01-21 eb514affa9174c7f931b3e71435e7ee819e2d4d0

 forms/numberStep/CNumberStep.vue

@@ -13,15 +13,21 @@
            :disabled="itemRes.disabled"
            :error="itemRes.error"
        />
        <AtInputNumber
        <view
            class="c-number-step-step"
            :class="[unit?'on-unit':'', isEmpty?'on-empty':'']"
            ref="number"
            :min="range[0]"
            :max="range[1]"
            :step="step"
            :width="120"
            :value="itemRes.formData[itemRes.name]"
            :onChange="evt=>itemRes.onChange(evt)"
        />
        >
            <AtInputNumber
                :min="range[0]"
                :max="range[1]"
                :step="step"
                :width="120"
                :value="itemRes.formData[itemRes.name]"
                :onChange="evt=>handleChange(evt)"
            />
            <view class="c-number-step-unit">{{unit}}</view>
        </view>
    </view>
</template>

@@ -45,28 +51,81 @@
        // 取值范围
        range: {
            type: Array,
            default: [0, 100],
            default: () => [0, 100],
        },
        // 步长
        step: {
            type: Number,
            default: 1,
        },
        // 奇偶修正 odd 奇数 / even 偶数
        correct: {
            type: String,
            default: '',
        },
        // 数值单位
        unit: {
            type: String,
            default: '',
        },
    },
    data() {
        return {};
    },
    computed: {},
    methods: {},
    computed: {
        // 空值判断，弥补空值时显示最小值的问题
        isEmpty() {
            const curVal = this.itemRes.formData[this.itemRes.name];
            if (typeof curVal === 'undefined') {
                return true;
            } else if (!curVal && curVal !== 0) {
                return true;
            } else {
                return false;
            }
        },
    },
    methods: {
        handleChange(val) {
            // 奇偶修正模式
            if (this.correct) {
                const lastValue = this.isEmpty
                    ? this.range[0]
                    : this.itemRes.formData[this.itemRes.name];
                let nextValue = val;
                if (
                    (this.correct === 'odd' && nextValue % 2 === 0) ||
                    (this.correct === 'even' && nextValue % 2 === 1)
                ) {
                    // 增加
                    if (lastValue <= nextValue) {
                        nextValue++;
                    }
                    // 减小
                    else if (lastValue > nextValue) {
                        nextValue--;
                    }
                }
                // 范围
                nextValue = Math.max(nextValue, this.range[0]);
                nextValue = Math.min(nextValue, this.range[1]);
                this.itemRes.onChange(nextValue);
            }
            // 正常模式
            else {
                this.itemRes.onChange(val);
            }
        },
    },
    mounted() {
        if (process.env.TARO_ENV === 'h5') {
            $(this.$refs.input.$el)
                .find('.at-input__input')
                .find('.at-input__container')
                .prepend(this.$refs.number.$el);
        } else if (process.env.TARO_ENV === 'weapp') {
            $(this.$refs.input.$el)
                .find('.at-input__container')
                .append(this.$refs.number.$el);
                .append(this.$refs.number);
        }
    },
};