Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fa015b0b 1 parent 79c96c28

单选多选控件新增描述属性显示

Inline Side-by-side
Showing 2 changed files with 21 additions and 9 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-11-21 14:42:00 4 + * @LastEditTime: 2022-12-22 11:35:38
5 * @FilePath: /data-table/src/components/CheckboxField/index.vue 5 * @FilePath: /data-table/src/components/CheckboxField/index.vue
6 * @Description: 多项选择控件 6 * @Description: 多项选择控件
7 --> 7 -->
...@@ -14,6 +14,9 @@ ...@@ -14,6 +14,9 @@
14 (最多可选数:&nbsp;{{ item.component_props.max }}) 14 (最多可选数:&nbsp;{{ item.component_props.max }})
15 </span> 15 </span>
16 </div> 16 </div>
17 + <div v-if="item.component_props.note" class="note">
18 + {{ item.component_props.note }}
19 + </div>
17 <van-field :name="item.key" :rules="item.rules" :border="false"> 20 <van-field :name="item.key" :rules="item.rules" :border="false">
18 <template #input> 21 <template #input>
19 <van-checkbox-group 22 <van-checkbox-group
...@@ -24,13 +27,13 @@ ...@@ -24,13 +27,13 @@
24 > 27 >
25 <van-checkbox 28 <van-checkbox
26 v-for="x in item.component_props.options" 29 v-for="x in item.component_props.options"
27 - :key="index" 30 + :key="x.value"
28 - :name="x" 31 + :name="x.value"
29 icon-size="1rem" 32 icon-size="1rem"
30 shape="square" 33 shape="square"
31 :checked-color="themeVars.radioColor" 34 :checked-color="themeVars.radioColor"
32 style="margin-bottom: 0.25rem" 35 style="margin-bottom: 0.25rem"
33 - >{{ x }}</van-checkbox 36 + >{{ x.title }}</van-checkbox
34 > 37 >
35 </van-checkbox-group> 38 </van-checkbox-group>
36 </template> 39 </template>
...@@ -61,6 +64,12 @@ onMounted(() => { ...@@ -61,6 +64,12 @@ onMounted(() => {
61 font-size: 0.9rem; 64 font-size: 0.9rem;
62 font-weight: bold; 65 font-weight: bold;
63 } 66 }
67 + .note {
68 + font-size: 0.9rem;
69 + margin-left: 1rem;
70 + color: gray;
71 + padding-bottom: 0.5rem
72 + }
64 } 73 }
65 74
66 :deep(.van-checkbox) { 75 :deep(.van-checkbox) {
......
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-12-19 10:47:56 4 + * @LastEditTime: 2022-12-22 11:31:31
5 * @FilePath: /data-table/src/components/RadioField/index.vue 5 * @FilePath: /data-table/src/components/RadioField/index.vue
6 * @Description: 单项选择控件 6 * @Description: 单项选择控件
7 --> 7 -->
...@@ -11,10 +11,7 @@ ...@@ -11,10 +11,7 @@
11 {{ item.component_props.label 11 {{ item.component_props.label
12 }}<span v-if="item.component_props.required">&nbsp;*</span> 12 }}<span v-if="item.component_props.required">&nbsp;*</span>
13 </div> 13 </div>
14 - <div 14 + <div v-if="item.component_props.note" class="note">
15 - v-if="item.component_props.note"
16 - style="font-size: 0.9rem; margin-left: 1rem; color: gray; margin-top: 0.25rem;"
17 - >
18 {{ item.component_props.note }} 15 {{ item.component_props.note }}
19 </div> 16 </div>
20 <van-field :name="item.key" :rules="item.rules"> 17 <van-field :name="item.key" :rules="item.rules">
...@@ -62,6 +59,12 @@ const themeVars = { ...@@ -62,6 +59,12 @@ const themeVars = {
62 color: red; 59 color: red;
63 } 60 }
64 } 61 }
62 + .note {
63 + font-size: 0.9rem;
64 + margin-left: 1rem;
65 + color: gray;
66 + padding-bottom: 0.5rem
67 + }
65 } 68 }
66 69
67 :deep(.van-radio) { 70 :deep(.van-radio) {
......