Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0897c434 1 parent eeccec7d

✨ feat(单选/多选控件): 样式调整优化

Inline Side-by-side
Showing 3 changed files with 25 additions and 14 deletions
...@@ -12,7 +12,6 @@ declare module '@vue/runtime-core' { ...@@ -12,7 +12,6 @@ declare module '@vue/runtime-core' {
12 CalendarField: typeof import('./src/components/CalendarField/index.vue')['default'] 12 CalendarField: typeof import('./src/components/CalendarField/index.vue')['default']
13 CheckboxField: typeof import('./src/components/CheckboxField/index.vue')['default'] 13 CheckboxField: typeof import('./src/components/CheckboxField/index.vue')['default']
14 ContactField: typeof import('./src/components/ContactField/index.vue')['default'] 14 ContactField: typeof import('./src/components/ContactField/index.vue')['default']
15 - copy: typeof import('./src/components/RadioField copy/index.vue')['default']
16 DatePickerField: typeof import('./src/components/DatePickerField/index.vue')['default'] 15 DatePickerField: typeof import('./src/components/DatePickerField/index.vue')['default']
17 DateTimePickerField: typeof import('./src/components/DateTimePickerField/index.vue')['default'] 16 DateTimePickerField: typeof import('./src/components/DateTimePickerField/index.vue')['default']
18 DesField: typeof import('./src/components/DesField/index.vue')['default'] 17 DesField: typeof import('./src/components/DesField/index.vue')['default']
......
...@@ -19,13 +19,13 @@ ...@@ -19,13 +19,13 @@
19 <template #input> 19 <template #input>
20 <van-checkbox-group v-model="checkbox_value" :direction="item.component_props.direction" 20 <van-checkbox-group v-model="checkbox_value" :direction="item.component_props.direction"
21 :max="item.component_props.max" style="width: 100%"> 21 :max="item.component_props.max" style="width: 100%">
22 - <template v-for="x in item.component_props.options" :key="x.title"> 22 + <div v-for="x in item.component_props.options" :key="x.title" class="checkbox-wrapper">
23 <van-checkbox @click="onClick(x)" :name="x.title" icon-size="1rem" shape="square" 23 <van-checkbox @click="onClick(x)" :name="x.title" icon-size="1rem" shape="square"
24 :checked-color="themeVars.radioColor" style="margin-bottom: 0.25rem">{{ x.title }}</van-checkbox> 24 :checked-color="themeVars.radioColor" style="margin-bottom: 0.25rem">{{ x.title }}</van-checkbox>
25 <van-field v-if="checkbox_value.includes(x.value) && x.is_input" @blur="onBlur(x)" v-model="x.affix" 25 <van-field v-if="checkbox_value.includes(x.value) && x.is_input" @blur="onBlur(x)" v-model="x.affix"
26 label="" :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''" 26 label="" :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''"
27 :required="x.input_required" class="affix-input" /> 27 :required="x.input_required" class="affix-input" />
28 - </template> 28 + </div>
29 </van-checkbox-group> 29 </van-checkbox-group>
30 </template> 30 </template>
31 </van-field> 31 </van-field>
...@@ -114,18 +114,24 @@ onMounted(() => { ...@@ -114,18 +114,24 @@ onMounted(() => {
114 white-space: pre; 114 white-space: pre;
115 } 115 }
116 116
117 + .checkbox-wrapper {
118 + border: 1px solid #eaeaea;
119 + border-radius: 0.25rem;
120 + padding: 0.25rem 0.5rem;
121 + margin-bottom: 0.25rem;
122 + }
117 .affix-input { 123 .affix-input {
118 border: 1px solid #eaeaea; 124 border: 1px solid #eaeaea;
119 border-radius: 0.25rem; 125 border-radius: 0.25rem;
120 padding: 0.25rem 0.5rem; 126 padding: 0.25rem 0.5rem;
127 + margin-top: 0.5rem;
121 margin-bottom: 0.25rem; 128 margin-bottom: 0.25rem;
122 } 129 }
123 } 130 }
124 131
125 :deep(.van-checkbox) { 132 :deep(.van-checkbox) {
126 - border: 1px solid #eaeaea; 133 + // border: 1px solid #eaeaea;
127 - border-radius: 0.25rem; 134 + // border-radius: 0.25rem;
128 - padding: 0.25rem 0.5rem; 135 + // padding: 0.25rem 0.5rem;
129 - // width: 100vw;
130 } 136 }
131 </style> 137 </style>
......
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: 2023-02-01 15:10:41 4 + * @LastEditTime: 2023-02-01 18:51:20
5 * @FilePath: /data-table/src/components/RadioField/index.vue 5 * @FilePath: /data-table/src/components/RadioField/index.vue
6 * @Description: 单项选择控件 6 * @Description: 单项选择控件
7 --> 7 -->
...@@ -17,13 +17,13 @@ ...@@ -17,13 +17,13 @@
17 <template #input> 17 <template #input>
18 <van-radio-group @change="onChange(item)" v-model="radio_value" :direction="item.component_props.direction" 18 <van-radio-group @change="onChange(item)" v-model="radio_value" :direction="item.component_props.direction"
19 style="width: 100%"> 19 style="width: 100%">
20 - <template v-for="x in item.component_props.options" :key="x.value"> 20 + <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper">
21 <van-radio :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor" 21 <van-radio :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
22 style="margin-bottom: 0.25rem">{{ x.title }}</van-radio> 22 style="margin-bottom: 0.25rem">{{ x.title }}</van-radio>
23 <van-field v-if="radio_value === x.value && x.is_input" @blur="onBlur(x)" v-model="x.affix" label="" 23 <van-field v-if="radio_value === x.value && x.is_input" @blur="onBlur(x)" v-model="x.affix" label=""
24 :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''" :required="x.input_required" 24 :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''" :required="x.input_required"
25 class="affix-input" /> 25 class="affix-input" />
26 - </template> 26 + </div>
27 </van-radio-group> 27 </van-radio-group>
28 </template> 28 </template>
29 </van-field> 29 </van-field>
...@@ -113,18 +113,24 @@ onMounted(() => { ...@@ -113,18 +113,24 @@ onMounted(() => {
113 white-space: pre; 113 white-space: pre;
114 } 114 }
115 115
116 + .radio-wrapper {
117 + border: 1px solid #eaeaea;
118 + border-radius: 0.25rem;
119 + padding: 0.25rem 0.5rem;
120 + margin-bottom: 0.25rem;
121 + }
116 .affix-input { 122 .affix-input {
117 border: 1px solid #eaeaea; 123 border: 1px solid #eaeaea;
118 border-radius: 0.25rem; 124 border-radius: 0.25rem;
119 padding: 0.25rem 0.5rem; 125 padding: 0.25rem 0.5rem;
126 + margin-top: 0.5rem;
120 margin-bottom: 0.25rem; 127 margin-bottom: 0.25rem;
121 } 128 }
122 } 129 }
123 130
124 :deep(.van-radio) { 131 :deep(.van-radio) {
125 - border: 1px solid #eaeaea; 132 + // border: 1px solid #eaeaea;
126 - border-radius: 0.25rem; 133 + // border-radius: 0.25rem;
127 - padding: 0.25rem 0.5rem; 134 + // padding: 0.25rem 0.5rem;
128 - // width: 100vw;
129 } 135 }
130 </style> 136 </style>
......