designer-hub/packages/app/src/components/data-form.vue

<script setup lang="ts">
import WdButton from 'wot-design-uni/components/wd-button/wd-button.vue'
import WdInput from 'wot-design-uni/components/wd-input/wd-input.vue'

defineProps({
  schema: {
    type: Object as PropType<{
      [key: string | symbol]: { type: 'TextField' | 'Submit' | string; label?: string }
    }>,
    required: true,
    default: () => ({}),
  },
})
const types = {
  TextField: WdInput,
  Submit: WdButton,
}
const defaultProps = {
  TextField: {
    noBorder: true,
    style: {},
    customClass: 'rounded border border-[#e1e1e1] border-solid p-1',
    placeholder: ' ',
  },
  Submit: {
    customClass: 'w-full! rounded-lg! my-4!',
    block: true,
  },
}
</script>
<template>
  <div ref="form">
    <template v-for="([prop, { type, label }], index) in Object.entries(schema)" :key="index">
      <div class="grid mb-4">
        <label
          v-if="type !== 'Submit'"
          class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-relaxed mb-1"
          :for="prop"
        >
          {{ label || prop }}
        </label>
        <!-- #ifdef H5 -->
        <component :is="types[type]" :name="prop" v-bind="defaultProps[type]">
          <span v-if="type === 'Submit'">提交</span>
        </component>
        <!-- #endif -->
      </div>
    </template>
  </div>
</template>