✨ feat: 新增单选框组件

+<!--
+ * @Date: 2022-08-30 11:34:19
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-08-30 11:42:03
+ * @FilePath: /data-table/src/components/RadioField/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="radio-field-page">
+    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <van-field :name="item.key">
+      <template #input>
+        <van-radio-group v-model="item.value">
+          <van-radio v-for="x in item.sub" :key="index" :name="x.key" icon-size="1rem" style="margin-bottom: 0.25rem;">{{ x.value }}</van-radio>
+        </van-radio-group>
+      </template>
+    </van-field>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object
+})
+</script>
+
+<style lang="less" scoped>
+.radio-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+}
+</style>

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

 <!--
 <!--
  * @Date: 2022-07-18 10:22:22
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-30 10:35:45
+ * @LastEditTime: 2022-08-30 11:11:50
  * @FilePath: /data-table/src/views/index.vue
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
  * @Description: 首页
 -->
 -->
@@ -42,7 +42,7 @@ onMounted(() => {
     label: '年龄',
     label: '年龄',
     placeholder: '请输入年龄',
     placeholder: '请输入年龄',
     component: '',
     component: '',
-    component_type: 'text',
+    component_type: 'number',
     required: false,
     required: false,
   }, {
   }, {
     key: 'gender',
     key: 'gender',