调整表单组件样式，实现提交按钮底部固定显示，实现文本域组件按行高度

Tevin

2021-07-08 0624a0e6ae3dc366f020c7be531ace6a099a664b

调整表单组件样式，实现提交按钮底部固定显示，实现文本域组件按行高度

 forms/form/CFormSubmit.vue

@@ -4,19 +4,29 @@
 */

<template>
    <view class="c-form-submit">
        <button
            form-type="submit"
            type="primary"
        >
            <slot>提交</slot>
        </button>
    <view
        class="c-form-submit"
        :class="fixed ? 'c-form-submit-fixed':''"
    >
        <view class="c-form-submit-inner">
            <button
                form-type="submit"
                type="primary"
            >
                <slot>提交</slot>
            </button>
        </view>
    </view>
</template>

<script>
export default {
    name: 'CFormSubmit',
    props: {},
    props: {
        fixed: {
            type: Boolean,
            default: false,
        },
    },
};
</script>

 forms/form/cForm.scss

@@ -73,5 +73,15 @@
                display: none;
            }
        }
        &.c-form-submit-fixed {
            height: 80px;
            .c-form-submit-inner {
                @include position(fixed, n 0 0 n, 10);
                width: 100%;
                padding: 20px 20px 30px;
                box-sizing: border-box;
                background-color: #fff;
            }
        }
    }
}

 forms/textarea/CTextArea.vue

@@ -16,10 +16,11 @@
        <textarea
            ref="textarea"
            class="textarea"
            :style="{height: areaHeight}"
            :style="{minHeight: areaHeight}"
            :placeholder="placeholder"
            :value="itemRes.formData[itemRes.name]"
            :autoFocus="false"
            :autoHeight="true"
            @input="evt=>itemRes.onChange(evt.detail.value)"
        />
    </view>
@@ -40,10 +41,9 @@
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
        // 文本域输入区域高度
        height: {
            type: Number,
            default: 94,
        },
        height: Number,
        // 文本雨输入区行数
        rows: Number,
        // 占位提示
        placeholder: String,
    },
@@ -52,7 +52,11 @@
    },
    computed: {
        areaHeight() {
            return Taro.pxTransform(this.height, 750);
            if (this.rows) {
                return Taro.pxTransform(this.rows * 40, 750);
            } else {
                return Taro.pxTransform(this.height, 750);
            }
        },
    },
    methods: {},

 forms/textarea/cTextArea.scss

@@ -14,7 +14,7 @@
        .textarea {
            flex: 1;
            width: 100%;
            height: 94px;
            min-height: 94px;
            padding-right: 18px;
            font-size: 32px;
            textarea {