优化表单显示

Tevin

2021-03-31 3cafdf134729197e22a53f79dd25c45db2062fa3

优化表单显示

 forms/form/CFormItem.vue

@@ -37,6 +37,8 @@
        //     transform   (value) => any   将字段值转换成目标值后进行校验
        //     message     string           错误信息，不设置时会通过模板自动生成
        rules: Array,
        // 表单是否禁用
        disabled: Boolean,
    },
    data() {
        return {
@@ -50,6 +52,7 @@
                name: this.name,
                label: this.label,
                required: this.isRequired,
                disabled: this.disabled,
                error: this.error,
                onChange: evt => this.onChange(evt),
            };

 forms/form/cForm.scss

@@ -54,10 +54,11 @@
    }
    .c-form-submit {
        margin-top: 37px;
        padding: 0 20px;
        padding: 0 20px 30px;
        [type=primary] {
            height: 80px;
            font-size: 33px;
            line-height: 2.2;
            line-height: 78px;
            border: 1PX solid #2093df;
            background: #2093df;
            &:not([disabled]):active {
@@ -65,6 +66,9 @@
                border: 1PX solid #2093df;
                background: #2093df;
            }
            &::after {
                display: none;
            }
        }
    }
}

 forms/select/CSelect.vue

@@ -18,6 +18,7 @@
                :name="itemRes.name"
                :title="itemRes.label"
                :required="itemRes.required"
                :disabled="itemRes.disabled"
                :error="itemRes.error"
                :placeholder="placeholder"
                :value="selected"
@@ -30,6 +31,7 @@
                :name="itemRes.name"
                :title="itemRes.label"
                :required="itemRes.required"
                :disabled="itemRes.disabled"
                :error="itemRes.error"
                :placeholder="placeholder"
                :value="chose.name"

 forms/select/cSelect.scss

@@ -23,4 +23,9 @@
    .at-input__icon {
        display: none;
    }
    .at-input__container {
        input {
            pointer-events: none;
        }
    }
}

 forms/textarea/CTextArea.vue

@@ -18,7 +18,7 @@
            :style="{height: areaHeight}"
            :placeholder="placeholder"
            :value="itemRes.formData[itemRes.name]"
            :autoFocus="true"
            :autoFocus="false"
            @input="evt=>itemRes.onChange(evt.detail.value)"
        />
    </view>