✨ feat: 多项选择控件新增排列方向属性和最大可选数属性

 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-07 16:06:06
+ * @LastEditTime: 2022-09-08 13:35:49
  * @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" :border="false">
+    <div class="label">
+      {{ item.label }}
+      <span v-if="item.required" style="color: red;">&nbsp;*</span>
+      <span v-if="item.component_props.max" style="color: gray;">(最多可选数:&nbsp;{{ item.component_props.max }})</span>
+    </div>
+    <van-field :name=" item.key" :border="false">
       <template #input>
-        <van-checkbox-group v-model="item.value">
+        <van-checkbox-group v-model="item.value" :direction="item.component_props.direction"
+          :max="item.component_props.max">
           <van-checkbox v-for="x in item.options" :key="index" :name="x.key" icon-size="1rem" shape="square"
             style="margin-bottom: 0.25rem;">{{ x.value }}</van-checkbox>
         </van-checkbox-group>
@@ -31,9 +36,6 @@ const props = defineProps({
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-    span {
-      color: red;
-    }
   }
 }
 </style>

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-08 11:35:17
+ * @LastEditTime: 2022-09-08 13:38:52
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -46,17 +46,17 @@ onMounted(() => {
   //   },
   //   required: true,
   // },
-  {
-    key: 'username',
-    value: 'test',
-    label: '用户名',
-    placeholder: '请输入用户名',
-    component: '',
-    component_props: {
-      name: 'text'
-    },
-    required: true,
-  },
+  // {
+  //   key: 'username',
+  //   value: 'test',
+  //   label: '用户名',
+  //   placeholder: '请输入用户名',
+  //   component: '',
+  //   component_props: {
+  //     name: 'text'
+  //   },
+  //   required: true,
+  // },
   // {
   //   key: 'email',
   //   value: '',
@@ -77,33 +77,35 @@ onMounted(() => {
   //   component_props: {
   //     name: 'number'
   //   },
-  //   required: false,
-  // },
-  {
-    key: 'gender',
-    value: '',
-    label: '性别',
-    placeholder: '',
-    component: '',
-    component_props: {
-      name: 'radio',
-      direction: 'horizontal'
-    },
-    options: [{
-      key: '男',
-      value: '男'
-    }, {
-      key: '女',
-      value: '女'
-    }]
-  },
+  //   required: true,
+  // },
+  // {
+  //   key: 'gender',
+  //   value: '',
+  //   label: '性别',
+  //   placeholder: '',
+  //   component: '',
+  //   component_props: {
+  //     name: 'radio',
+  //     direction: 'horizontal'
+  //   },
+  //   options: [{
+  //     key: '男',
+  //     value: '男'
+  //   }, {
+  //     key: '女',
+  //     value: '女'
+  //   }]
+  // },
   // {
   //   key: 'hobby',
   //   value: [],
   //   label: '兴趣爱好',
   //   component: '',
   //   component_props: {
-  //     name: 'checkbox'
+  //     name: 'checkbox',
+  //     direction: 'horizontal',
+  //     max: '3'
   //   },
   //   options: [{
   //     key: '足球',
@@ -111,6 +113,12 @@ onMounted(() => {
   //   }, {
   //     key: '篮球',
   //     value: '篮球'
+  //   }, {
+  //     key: '羽毛球',
+  //     value: '羽毛球'
+  //   }, {
+  //     key: '乒乓球',
+  //     value: '乒乓球'
   //   }]
   // },
   // {