✨ feat: 新增多选框组件

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

@@ -3,6 +3,7 @@ import TableField from '@/components/TableField/index.vue'
 import TextField from '@/components/TextField/index.vue'
 import TextareaField from '@/components/TextareaField/index.vue'
 import RadioField from '@/components/RadioField/index.vue'
+import CheckboxField from '@/components/CheckboxField/index.vue'
 
 /**
  * 生成自定义组件类型
@@ -10,6 +11,7 @@ import RadioField from '@/components/RadioField/index.vue'
  * @type text 单行文本 TextField
  * @type textarea 多行文本 TextareaField
  * @type radio 单选框 RadioField
+ * @type checkbox 多选框 CheckboxField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -36,8 +38,10 @@ export function createComponentType(data) {
       item.component = TextField;
     }
     if (item.component_type === 'radio') {
-      item.name = 'radio';
       item.component = RadioField;
     }
+    if (item.component_type === 'checkbox') {
+      item.component = CheckboxField;
+    }
   })
 }

@@ -2,12 +2,12 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-29 16:44:15
+ * @LastEditTime: 2022-08-30 13:21:07
  * @FilePath: /data-table/src/main.js
  * @Description:
  */
 import { createApp } from 'vue';
-import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio } from 'vant';
+import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup } from 'vant';
 import router from './router';
 import App from './App.vue';
 // import axios from './utils/axios';
@@ -23,6 +23,6 @@ app.config.warnHandler = () => null;
 
 app.config.globalProperties.$http = axios; // 关键语句
 
-app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup);
+app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup);
 
 app.mount('#app');

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-30 11:11:50
+ * @LastEditTime: 2022-08-30 13:28:54
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -59,6 +59,20 @@ onMounted(() => {
       value: '女'
     }]
   }, {
+    key: 'hobby',
+    value: [],
+    label: '兴趣爱好',
+    placeholder: '',
+    component: '',
+    component_type: 'checkbox',
+    sub: [{
+      key: 'football',
+      value: '足球'
+    }, {
+      key: 'basketball',
+      value: '篮球'
+    }]
+  }, {
     key: 'message',
     value: 'zzz',
     label: '留言',