13、动态表单组件：怎么优雅地动态渲染表单

<template>
  <form class="dynamic-form" @submit="onSubmit">
    <div class="dynamic-form-title">{{ schema.title }}</div>
    <div
      class="dynamic-form-field"
      v-for="(field, index) in schema.fieldList"
      v-bind:key="index"
    >
      <div class="dynamic-form-label">{{ field.label }}：</div>
      <div v-if="field.fieldType === 'input'" class="dynamic-form-item">
        <input v-model="model[field.name]" />
      </div>
      <div v-else-if="field.fieldType === 'radio'" class="dynamic-form-item">
        <span
          v-for="(option, index) in field.options"
          v-bind:key="index"
          class="dynamic-form-option"
        >
          <input
            type="radio"
            :id="option.value"
            :name="field.name"
            :value="option.value"
            :checked="model[field.name] === option.value"
            @change="
              onRadioChange({ fieldName: field.name, value: option.value })
            "
          />
          <label :for="option.value">{{ option.name }}</label>
        </span>
      </div>
      <div v-else class="dynamic-form-item"></div>
    </div>
    <div>
      <button class="dynamic-form-btn" type="submit">提交</button>
    </div>
  </form>
</template>

<script setup lang="ts">
import { reactive, toRaw } from 'vue';

const schema = {
  title: '普通用户信息',
  filedList: [
    {
      label: '用户名称',
      name: 'usename',
      fieldType: 'input'
    },
    {
      label: '手机号码',
      name: 'phone',
      fieldType: 'input'
    },
    {
      label: '收货地址',
      name: 'address',
      fieldType: 'input'
    }
  ]
};

const model = reactive<{ [key: string]: unknown }>({});
schema.fieldList.forEach((field) => {
  model[field.name] = '';
});

const onRadioChange = (data: { fieldName: string; value: string }) => {
  model[data.fieldName] = data.value;
};

const onSubmit = (e: Event) => {
  e.preventDefault();
  window.alert(JSON.stringify(data));
};
</script>
<style> /* 样式代码省略，请看代码案例 */ </style>

<template>
  <div :class="{ [baseClassName]: true }">
    <Form>
      <Form
        ref="formRef"
        :model="internalModel"
        @finish="onFinish"
        @finishFail="onFinishFail"
      >
        <FormItem
          v-for="(field, index) in fieldList"
          :key="index"
          :label="field.label"
          :name="field.name"
          :rule="field.rule"
        >
          <component
            :is="registerComponentMap[field.fieldType]"
            :value="internalModel[field.name]"
            :options="field.options || []"
            @change="(value: unknown) => { onFieldChange({ name: field.name, value }) }"
          />
        </FormItem>
        <Row v-if="$slots.default">
          <slot></slot>
        </Row>
      </Form>
    </Form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { prefixName } from '../theme';
import Row from '../row';
import Form from '../form';
import Input from '../input';
import RadioList from '../radio-list';
import type { Component } from 'vue';
import type { DynamicFormField } from './common';

// 内置支持的表单数据组件
const registerComponentMap: { [key: string]: Component } = {
  Input: Input,
  RadioList: RadioList
};

const props = withDefaults(
  defineProps<{
    fieldList?: DynamicFormField[];
    model?: { [name: string]: unknown };
  }>(),
  {}
);

const internalModel = reactive<{ [name: string]: unknown }>(props?.model || {});
const FormItem = Form.FormItem;
const baseClassName = `${prefixName}-dynamic-form`;

const onFieldChange = (event: { name: string; value: string | unknown }) => {
  internalModel[event.name] = event.value;
};

const emits = defineEmits<{
  (event: 'finish', e: unknown): void;
  (event: 'finishFail', e: unknown): void;
}>();

const onFinish = (e: unknown) => {
  emits('finish', e);
};

const onFinishFail = (e: unknown) => {
  emits('finishFail', e);
};

</script>

<template>
  <div class="example">
    <DynamicForm
      :model="model"
      :fieldList="fieldList"
      @finish="onFinish"
      @finishFail="onFinishFail"
    >
      <Button type="primary">提交信息</Button>
    </DynamicForm>
  </div>
</template>

<script setup lang="ts">
import { Button, DynamicForm } from '../src';
import type { DynamicFormField } from '../src';

const model = {
  username: 'Hello',
  phone: '123456',
  address: '',
  service: ''
};

const fieldList: DynamicFormField[] = [
  {
    label: '用户名称',
    name: 'username',
    fieldType: 'Input',
    rule: {
      validator: (val: unknown) => {
        const hasError = /^[a-z]{1,}$/gi.test(`${val || ''}`) !== true;
        return {
          hasError,
          message: hasError ? '仅支持a-z的大小写字母' : ''
        };
      }
    }
  },
  {
    label: '手机号码',
    name: 'phone',
    fieldType: 'Input',
    rule: {
      validator: (val: unknown) => {
        const hasError = /^[0-9]{1,}$/gi.test(`${val || ''}`) !== true;
        return {
          hasError,
          message: hasError ? '仅支持0-9的数字' : ''
        };
      }
    }
  },
  {
    label: '快递地址',
    name: 'address',
    fieldType: 'Input',
    rule: {
      validator: (val: unknown) => {
        const hasError = `${val}`?.length === 0;
        return {
          hasError,
          message: hasError ? '地址不能为空' : ''
        };
      }
    }
  }
];

const onFinish = (e: any) => {
  // eslint-disable-next-line no-console
  console.log('success =', e);
};

const onFinishFail = (e: any) => {
  // eslint-disable-next-line no-console
  console.log('fail =', e);
};
</script>

<style>
html,
body {
  height: 100%;
  width: 100%;
}
.example {
  width: 400px;
  padding: 16px;
  margin: 20px auto;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #999999;
  font-size: 14px;
}

.btn {
  height: 32px;
  padding: 0 20px;
  min-width: 100px;
}
</style>

<template>
  <div :class="{ [baseClassName]: true }">
    <Form>
      <Form
        ref="formRef"
        :model="internalModel"
        @finish="onFinish"
        @finishFail="onFinishFail"
      >
        <FormItem
          v-for="(field, index) in fieldList"
          :key="index"
          :label="field.label"
          :name="field.name"
          :rule="field.rule"
        >
          <component
            :is="registerComponentMap[field.fieldType]"
            :value="internalModel[field.name]"
            :options="field.options || []"
            @change="(value: unknown) => { onFieldChange({ name: field.name, value }) }"
          />
        </FormItem>
        <Row v-if="$slots.default">
          <slot></slot>
        </Row>
      </Form>
    </Form>
  </div>
</template>

<script setup lang="ts"> 

// 中间省略上述演示过的代码 ....

// 内置支持的表单数据组件
const registerComponentMap: { [key: string]: Component } = {
  Input: Input,
  RadioList: RadioList
};

// 中间省略上述演示过的代码 ....

// 注册自定义表单数据组件方法
const registerFieldComponent = (name: string, component: Component) => {
  registerComponentMap[name] = component;
};

// 暴露可以注册自定义表单数据组件
defineExpose<{
  registerFieldComponent: typeof registerFieldComponent;
}>({
  registerFieldComponent
});
</script>