YY_MP_REFACTOR/src/components/FormField/index.vue

<template>
  <view class="form-field">
    <!-- 横向 -->
    <view v-if="layout === 'horizontal'" class="form-field-horizontal">
      <view class="form-field-label" :style="{ width: labelWidth }">
        <view class="form-field-required">
          <text v-if="required"> * </text>
        </view>
        <text class="form-field-title">
          {{ label }}
        </text>
      </view>
      <view class="form-field-body-right">
        <slot />
      </view>
    </view>

    <!-- 纵向 -->
    <view v-else class="form-field-vertical">
      <view class="form-field-label">
        <view class="form-field-required">
          <text v-if="required"> * </text>
        </view>
        <text class="form-field-title">
          {{ label }}
        </text>
        <text v-if="description" class="form-field-description">
          {{ description }}
        </text>
      </view>
      <view class="form-field-body-left">
        <slot />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
type FormFieldLayout = 'horizontal' | 'vertical'

interface Props {
  label: string
  required?: boolean
  layout?: FormFieldLayout
  labelWidth?: string
  description?: string
}

withDefaults(defineProps<Props>(), {
  required: false,
  layout: 'horizontal',
  labelWidth: '220rpx',
  description: '',
})
</script>

<style lang="scss" scoped>
.form-field {
  background-color: #fff;
  .form-field-horizontal {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 20rpx 28rpx;

    .form-field-body-right {
      line-height: 36rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 1;
    }
  }

  .form-field-vertical {
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    .form-field-label {
      padding: 24rpx 28rpx;
    }

    .form-field-body-left {
      padding: 0 28rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex: 1;
    }
  }

  .form-field-title {
    color: #303133;
    font-size: 32rpx;
    white-space: normal;
    word-break: break-all;
  }

  .form-field-label {
    display: flex;
    align-items: center;
    line-height: 36rpx;
  }

  .form-field-required {
    margin-right: 8rpx;
    color: #fa3534;
    font-size: 30rpx;
  }
}
</style>