Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8b11ab3f 1 parent c5b3367c

fix 样式调整

Inline Side-by-side
Showing 2 changed files with 35 additions and 51 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: 2023-02-01 10:32:38 4 + * @LastEditTime: 2023-02-01 15:10:11
5 * @FilePath: /data-table/src/components/CheckboxField/index.vue 5 * @FilePath: /data-table/src/components/CheckboxField/index.vue
6 * @Description: 多项选择控件 6 * @Description: 多项选择控件
7 --> 7 -->
...@@ -17,32 +17,14 @@ ...@@ -17,32 +17,14 @@
17 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> 17 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
18 <van-field :rules="item.rules" :border="false"> 18 <van-field :rules="item.rules" :border="false">
19 <template #input> 19 <template #input>
20 - <van-checkbox-group 20 + <van-checkbox-group v-model="checkbox_value" :direction="item.component_props.direction"
21 - v-model="checkbox_value" 21 + :max="item.component_props.max" style="width: 100%">
22 - :direction="item.component_props.direction"
23 - :max="item.component_props.max"
24 - style="width: 100%"
25 - >
26 <template v-for="x in item.component_props.options" :key="x.title"> 22 <template v-for="x in item.component_props.options" :key="x.title">
27 - <van-checkbox 23 + <van-checkbox @click="onClick(x)" :name="x.title" icon-size="1rem" shape="square"
28 - @click="onClick(x)" 24 + :checked-color="themeVars.radioColor" style="margin-bottom: 0.25rem">{{ x.title }}</van-checkbox>
29 - :name="x.title" 25 + <van-field v-if="checkbox_value.includes(x.value) && x.is_input" @blur="onBlur(x)" v-model="x.affix"
30 - icon-size="1rem" 26 + label="" :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''"
31 - shape="square" 27 + :required="x.input_required" class="affix-input" />
32 - :checked-color="themeVars.radioColor"
33 - style="margin-bottom: 0.25rem"
34 - >{{ x.title }}</van-checkbox
35 - >
36 - <van-field
37 - v-if="checkbox_value.includes(x.value) && x.is_input"
38 - @blur="onBlur(x)"
39 - v-model="x.affix"
40 - label=""
41 - :placeholder="x.input_placeholder"
42 - :rules="x.input_required ? rules : ''"
43 - :required="x.input_required"
44 - style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-bottom: 0.25rem;"
45 - />
46 </template> 28 </template>
47 </van-checkbox-group> 29 </van-checkbox-group>
48 </template> 30 </template>
...@@ -123,6 +105,7 @@ onMounted(() => { ...@@ -123,6 +105,7 @@ onMounted(() => {
123 font-size: 0.9rem; 105 font-size: 0.9rem;
124 font-weight: bold; 106 font-weight: bold;
125 } 107 }
108 +
126 .note { 109 .note {
127 font-size: 0.9rem; 110 font-size: 0.9rem;
128 margin-left: 1rem; 111 margin-left: 1rem;
...@@ -130,6 +113,13 @@ onMounted(() => { ...@@ -130,6 +113,13 @@ onMounted(() => {
130 padding-bottom: 0.5rem; 113 padding-bottom: 0.5rem;
131 white-space: pre; 114 white-space: pre;
132 } 115 }
116 +
117 + .affix-input {
118 + border: 1px solid #eaeaea;
119 + border-radius: 0.25rem;
120 + padding: 0.25rem 0.5rem;
121 + margin-bottom: 0.25rem;
122 + }
133 } 123 }
134 124
135 :deep(.van-checkbox) { 125 :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: 2023-02-01 14:59:25 4 + * @LastEditTime: 2023-02-01 15:10:41
5 * @FilePath: /data-table/src/components/RadioField/index.vue 5 * @FilePath: /data-table/src/components/RadioField/index.vue
6 * @Description: 单项选择控件 6 * @Description: 单项选择控件
7 --> 7 -->
8 <template> 8 <template>
9 <div v-if="HideShow" class="radio-field-page"> 9 <div v-if="HideShow" class="radio-field-page">
10 <div class="label"> 10 <div class="label">
11 - {{ item.component_props.label 11 + {{
12 + item.component_props.label
12 }}<span v-if="item.component_props.required">&nbsp;*</span> 13 }}<span v-if="item.component_props.required">&nbsp;*</span>
13 </div> 14 </div>
14 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> 15 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
15 <van-field :rules="item.rules"> 16 <van-field :rules="item.rules">
16 <template #input> 17 <template #input>
17 - <van-radio-group 18 + <van-radio-group @change="onChange(item)" v-model="radio_value" :direction="item.component_props.direction"
18 - @change="onChange(item)" 19 + style="width: 100%">
19 - v-model="radio_value"
20 - :direction="item.component_props.direction"
21 - style="width: 100%"
22 - >
23 <template v-for="x in item.component_props.options" :key="x.value"> 20 <template v-for="x in item.component_props.options" :key="x.value">
24 - <van-radio 21 + <van-radio :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
25 - :name="x.value" 22 + style="margin-bottom: 0.25rem">{{ x.title }}</van-radio>
26 - icon-size="1rem" 23 + <van-field v-if="radio_value === x.value && x.is_input" @blur="onBlur(x)" v-model="x.affix" label=""
27 - :checked-color="themeVars.radioColor" 24 + :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''" :required="x.input_required"
28 - style="margin-bottom: 0.25rem" 25 + class="affix-input" />
29 - >{{ x.title }}</van-radio
30 - >
31 - <van-field
32 - v-if="radio_value === x.value && x.is_input"
33 - @blur="onBlur(x)"
34 - v-model="x.affix"
35 - label=""
36 - :placeholder="x.input_placeholder"
37 - :rules="x.input_required ? rules : ''"
38 - :required="x.input_required"
39 - style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-bottom: 0.25rem;"
40 - />
41 </template> 26 </template>
42 </van-radio-group> 27 </van-radio-group>
43 </template> 28 </template>
...@@ -114,10 +99,12 @@ onMounted(() => { ...@@ -114,10 +99,12 @@ onMounted(() => {
114 padding: 1rem 1rem 0 1rem; 99 padding: 1rem 1rem 0 1rem;
115 font-size: 0.9rem; 100 font-size: 0.9rem;
116 font-weight: bold; 101 font-weight: bold;
102 +
117 span { 103 span {
118 color: red; 104 color: red;
119 } 105 }
120 } 106 }
107 +
121 .note { 108 .note {
122 font-size: 0.9rem; 109 font-size: 0.9rem;
123 margin-left: 1rem; 110 margin-left: 1rem;
...@@ -125,6 +112,13 @@ onMounted(() => { ...@@ -125,6 +112,13 @@ onMounted(() => {
125 padding-bottom: 0.5rem; 112 padding-bottom: 0.5rem;
126 white-space: pre; 113 white-space: pre;
127 } 114 }
115 +
116 + .affix-input {
117 + border: 1px solid #eaeaea;
118 + border-radius: 0.25rem;
119 + padding: 0.25rem 0.5rem;
120 + margin-bottom: 0.25rem;
121 + }
128 } 122 }
129 123
130 :deep(.van-radio) { 124 :deep(.van-radio) {
......