表单显示细节优化

Tevin

2021-04-21 e3426d0fa18fc2305f799a35eb0848c17e24b452

表单显示细节优化

 forms/datePicker/CDatePicker.vue

@@ -9,6 +9,7 @@
            v-if="mode==='dateRange'"
            :value="itemRes.formData[itemRes.name]"
            :onChange="evt=>handleChange(evt)"
            :placeholder="placeholder"
        >
            <AtInput
                ref="input"
@@ -25,6 +26,7 @@
            v-else-if="mode==='dateTime'"
            :value="itemRes.formData[itemRes.name]"
            :onChange="evt=>handleChange(evt)"
            :placeholder="placeholder"
        >
            <AtInput
                ref="input"
@@ -63,6 +65,8 @@
            type: String,
            default: 'date',
        },
        // 占位提示
        placeholder: String,
    },
    data() {
        return {};

 forms/datePicker/CDateRangeAction.vue

@@ -22,7 +22,10 @@
                :show="drawerShow"
                :onClose="evt => drawerShow=false"
            >
                <view class="title">请选择日期</view>
                <view class="title">
                    <view v-if="placeholder">{{placeholder}}</view>
                    <view v-else>请选择日期</view>
                </view>
                <view class="date">
                    <picker
                        mode='date'
@@ -76,8 +79,12 @@
        AtButton,
    },
    props: {
        value: null,
        // 项值
        value: String,
        // 变化回调
        onChange: Function,
        // 占位提示
        placeholder: String,
    },
    data() {
        return {

 forms/datePicker/CDateTimeAction.vue

@@ -23,7 +23,8 @@
                :onClose="evt => drawerShow=false"
            >
                <view class="title">
                    <view>请选择日期时间</view>
                    <view v-if="placeholder">{{placeholder}}</view>
                    <view v-else>请选择日期与时间</view>
                    <AtButton
                        size="small"
                        type="primary"
@@ -85,9 +86,11 @@
    },
    props: {
        // 项值
        value: null,
        value: String,
        // 变化回调
        onChange: Function,
        // 占位提示
        placeholder: String,
    },
    data() {
        return {

 forms/form/cForm.scss

@@ -8,6 +8,9 @@
.c-form {
    width: 100%;
    .c-form-item {
        .at-input__title {
            margin-right: 20px;
        }
        .at-input__title--required {
            position: relative;
            &::before {

 forms/numberStep/CNumberStep.vue

@@ -13,8 +13,12 @@
            :disabled="itemRes.disabled"
            :error="itemRes.error"
        />
        <AtInputNumber
        <view
            class="c-number-step-step"
            :class="unit?'on-unit':''"
            ref="number"
        >
            <AtInputNumber
            :min="range[0]"
            :max="range[1]"
            :step="step"
@@ -22,6 +26,8 @@
            :value="itemRes.formData[itemRes.name]"
            :onChange="evt=>itemRes.onChange(evt)"
        />
            <view class="c-number-step-unit">{{unit}}</view>
        </view>
    </view>
</template>

@@ -52,6 +58,11 @@
            type: Number,
            default: 1,
        },
        // 数值单位
        unit: {
            type: String,
            default: '',
        },
    },
    data() {
        return {};
@@ -66,7 +77,7 @@
        } else if (process.env.TARO_ENV === 'weapp') {
            $(this.$refs.input.$el)
                .find('.at-input__container')
                .append(this.$refs.number.$el);
                .append(this.$refs.number);
        }
    },
};

 forms/numberStep/cNumberStep.scss

@@ -18,12 +18,28 @@
    .at-input {
        padding: 16px 0;
    }
    .c-number-step-step {
    .at-input-number {
        .at-input-number__btn {
            padding: 16px 16px;
                width: 30px;
                height: 30px;
        }
        .at-input-number__input {
            font-size: 30px;
        }
    }
        &.on-unit {
            position: relative;
            .at-input-number__input {
                padding-right: 40px;
            }
            .c-number-step-unit {
                @include position(absolute, 2px 186px n n);
                width: 40px;
                line-height: 62px;
                color: #999;
            }
        }
    }
}

 forms/numberValve/CNumberValve.vue

@@ -16,12 +16,15 @@
                :required="itemRes.required"
                :disabled="itemRes.disabled"
                :error="itemRes.error"
                :value="itemRes.formData[itemRes.name]"
                :value="itemRes.formData[itemRes.name] + unit"
                :placeholder="placeholder"
            >
                <view class="at-icon at-icon-chevron-right"></view>
            </AtInput>
        </view>
        <AtFloatLayout
            :class="placeholder?'on-title':''"
            :title="placeholder"
            :isOpened="opened"
            :onClose="evt => handleClose()"
        >
@@ -93,6 +96,11 @@
            type: Number,
            default: 1,
        },
        // 数值单位（仅显示）
        unit: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
@@ -125,9 +133,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);

 forms/numberValve/cNumberValve.scss

@@ -36,6 +36,11 @@
            max-height: 100%;
            min-height: auto;
        }
        &.on-title {
            .at-float-layout__container {
                height: 530px;
            }
        }
        .layout-body {
            height: 100%;
            min-height: auto;