初始化组件模块

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-08-29 16:44:53
+ * @FilePath: /data-table/src/components/TableField/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <van-field v-if="item.component_type === 'radio'" :name="item.key" :label="item.label">
+    <template #input>
+      <van-radio-group v-model="item.value" direction="horizontal">
+        <van-radio v-for="x in item.sub" :key="index" :name="x.key">{{ x.value }}</van-radio>
+      </van-radio-group>
+    </template>
+  </van-field>
+  <van-field v-else v-model="item.value" :name="item.name" :label="item.label" :type="item.type"
+    :placeholder="item.placeholder" :rules="item.rules" :required="item.required" :autosize="item.autosize"
+    :row="item.row" />
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object
+})
+</script>
+
+<style lang="less" scoped>
+</style>

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-08-30 10:15:20
+ * @FilePath: /data-table/src/components/TextField/index.vue
+ * @Description: 单行文本输入框
+-->
+<template>
+  <div class="text-field-page">
+    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <van-field v-model="item.value" :name="item.name" :type="item.type" :placeholder="item.placeholder"
+      :rules="item.rules" :required="item.required" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object
+})
+</script>
+
+<style lang="less" scoped>
+  .text-field-page {
+    .label {
+      padding: 1rem 1rem 0 1rem;
+      font-size: 0.9rem;
+      font-weight: bold;
+      span {
+        color: red;
+      }
+    }
+  }
+</style>

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-08-30 10:18:18
+ * @FilePath: /data-table/src/components/TextareaField/index.vue
+ * @Description: 多行文本输入框
+-->
+<template>
+  <div class="textarea-field-page">
+    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <van-field v-model="item.value" :name="item.name" :type="item.type" :placeholder="item.placeholder"
+      :rules="item.rules" :required="item.required" rows="2" autosize />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object
+})
+</script>
+
+<style lang="less" scoped>
+  .textarea-field-page {
+    .label {
+      padding: 1rem 1rem 0 1rem;
+      font-size: 0.9rem;
+      font-weight: bold;
+      span {
+        color: red;
+      }
+    }
+  }
+</style>

+import _ from 'lodash'
+import TableField from '@/components/TableField/index.vue'
+import TextField from '@/components/TextField/index.vue'
+import TextareaField from '@/components/TextareaField/index.vue'
+
+/**
+ * 生成自定义组件类型
+ * @param {*} data
+ * @type text 单行文本 TextField
+ * @type textarea 多行文本 TextareaField
+ */
+export function createComponentType(data) {
+  // 判断类型和使用组件
+  _.each(data, (item, index) => {
+    if (item.component_type === 'text') {
+      item.type = 'text';
+      item.name = item.key;
+      item.component = TextField;
+    }
+    if (item.component_type === 'textarea') {
+      item.type = 'textarea';
+      item.name = item.key;
+      item.component = TextareaField;
+    }
+    // // 单选框
+    // if (item.component_type === 'radio') {
+    //   item.name = 'radio';
+    //   item.component = TableField;
+    // }
+  })
+}

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-25 10:10:29
- * @FilePath: /front/src/views/index.vue
+ * @LastEditTime: 2022-08-30 10:18:56
+ * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
 <template>
-  <div>111</div>
+  <van-image width="100%" height="200" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+  <div style="padding: 1rem;">表单描述</div>
+  <div style="padding: 1rem;">
+    <van-form @submit="onSubmit">
+      <van-cell-group>
+        <component v-for="(item, index) in mockData" :key="index" :is="item.component" :item="item" />
+      </van-cell-group>
+      <div style="margin: 16px;">
+        <van-button round block type="primary" native-type="submit">
+          提交
+        </van-button>
+      </div>
+    </van-form>
+  </div>
+
 </template>
 
 <script setup>
-import { _, dayjs, Cookies, $ } from '@/utils/generatePackage'
+import { createComponentType } from '@/hooks/useComponentType'
+
+const mockData = ref([]);
+onMounted(() => {
+  mockData.value = [{
+    key: 'username',
+    value: 'Hooke',
+    label: '用户名',
+    placeholder: '请输入用户名',
+    rules: [{ required: true, message: '请填写用户名' }],
+    component: '',
+    component_type: 'text',
+    required: true,
+  }, {
+    key: 'age',
+    value: '',
+    label: '年龄',
+    placeholder: '请输入年龄',
+    component: '',
+    component_type: 'text',
+    required: false,
+  }, {
+    key: 'gender',
+    value: 'female',
+    label: '性别',
+    placeholder: '',
+    component: '',
+    component_type: 'radio',
+    sub: [{
+      key: 'male',
+      value: '男'
+    }, {
+      key: 'female',
+      value: '女'
+    }]
+  }, {
+    key: 'message',
+    value: 'zzz',
+    label: '留言',
+    placeholder: '请输入留言',
+    component: '',
+    component_type: 'textarea',
+  }];
+  // 生成自定义组件
+  createComponentType(mockData.value)
+})
 
-const go = useGo()
-const goTo = useGoTo();
+const onSubmit = (values) => {
+  console.log('submit', values);
+};
 
 </script>
 
 <style lang="less" scoped>
-
 </style>