gxt_app/components/form-item/form-item.uvue

<template>
    <view class="form-item-wrapper" :class="{ horizontal: layout === 'horizontal', vertical: layout === 'vertical' }">
        <view class="form-item-main">
            <view class="form-item-label-row" v-if="label.length > 0">
                <text class="form-item-required" v-if="required">*</text>
                <text class="form-item-label" :style="layout === 'horizontal' && labelWidth.length > 0 ? { width: labelWidth } : {}">{{ label }}</text>
            </view>
            <view class="form-item-content">
                <slot></slot>
            </view>
        </view>
        <view class="form-item-error" v-if="error.length > 0">
            <text class="form-item-error-text">{{ error }}</text>
        </view>
    </view>
</template>

<script setup lang="uts">
    // Props 定义
    type Props = {
        label?: string
        required?: boolean
        error?: string
        layout?: 'horizontal' | 'vertical'
        labelWidth?: string
    }

    const props = withDefaults(defineProps<Props>(), {
        label: '',
        required: false,
        error: '',
        layout: 'horizontal',
        labelWidth: '140rpx'
    })
</script>

<style lang="scss">
    .form-item-wrapper {
        margin-bottom: 24rpx;

        .form-item-main {
            .form-item-label-row {
                flex-direction: row;
                align-items: center;
                position: relative;
                margin-left: 10rpx;
                overflow: visible;

                .form-item-required {
                    position: absolute;
                    left: -12rpx;
                    top: 5rpx;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #ff3b30;
                    margin-right: 4rpx;
                }

                .form-item-label {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #6e7580;
                }
            }

            .form-item-content {
                flex: 1;
            }
        }

        .form-item-error {
            margin-top: 8rpx;
            padding-left: 4rpx;

            .form-item-error-text {
                font-weight: 400;
                font-size: 24rpx;
                color: #ff3b30;
                line-height: 32rpx;
            }
        }

        // 左右布局（默认）
        &.horizontal {
            .form-item-main {
                flex-direction: row;
                align-items: center;
            }
        }

        // 上下布局
        &.vertical {
            .form-item-main {
                flex-direction: column;

                .form-item-label-row {
                    margin-bottom: 16rpx;
                }

                .form-item-content {
                    width: 100%;
                }
            }
        }
    }
</style>