Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3f692681 1 parent f99124b5

✨ feat(多选组件): 只读状态显示样式修改

Inline Side-by-side
Showing 1 changed file with 10 additions and 5 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: 2024-11-22 10:33:52 4 + * @LastEditTime: 2024-12-23 15:12:47
5 * @FilePath: /data-table/src/components/CheckboxField/index.vue 5 * @FilePath: /data-table/src/components/CheckboxField/index.vue
6 * @Description: 多项选择控件 6 * @Description: 多项选择控件
7 --> 7 -->
...@@ -16,16 +16,18 @@ ...@@ -16,16 +16,18 @@
16 </span> 16 </span>
17 </div> 17 </div>
18 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" /> 18 <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
19 - <van-field :rules="item.rules" :border="false"> 19 + <van-field v-if="!item.component_props.readonly" :rules="item.rules" :border="false">
20 <template #input> 20 <template #input>
21 <van-checkbox-group v-model="checkbox_value" :direction="item.component_props.direction" 21 <van-checkbox-group v-model="checkbox_value" :direction="item.component_props.direction"
22 :max="item.component_props.max" style="width: 100%"> 22 :max="item.component_props.max" style="width: 100%">
23 <div v-for="x in item.component_props.options" :key="x.title" class="checkbox-wrapper" :style="{ border: item.component_props.readonly ? 0 : ''}"> 23 <div v-for="x in item.component_props.options" :key="x.title" class="checkbox-wrapper" :style="{ border: item.component_props.readonly ? 0 : ''}">
24 - <div v-if="item.component_props.readonly"> 24 + <!-- <div v-if="item.component_props.readonly">
25 - <div v-if="checkbox_value.includes(x.value)" role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="true" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: rgb(194, 145, 95); background-color: rgb(194, 145, 95);"><!----><!----><!----></i></div><span class="van-checkbox__label">{{ x.title }}</span></div> 25 + <div v-if="checkbox_value.includes(x.value)" role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="true" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: rgb(194, 145, 95); background-color: rgb(194, 145, 95);"></i></div><span class="van-checkbox__label">{{ x.title }}</span></div>
26 - <div v-else role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="false" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style=""><!----><!----><!----></i></div><span class="van-checkbox__label">{{ x.title }}</span></div> 26 + <div v-else role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="false" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style=""></i></div><span class="van-checkbox__label">{{ x.title }}</span></div>
27 </div> 27 </div>
28 <van-checkbox v-else @click="onClick(x)" :name="x.title" icon-size="1rem" shape="square" 28 <van-checkbox v-else @click="onClick(x)" :name="x.title" icon-size="1rem" shape="square"
29 + :checked-color="themeVars.radioColor" style="margin-bottom: 0.25rem">{{ x.title }}</van-checkbox> -->
30 + <van-checkbox @click="onClick(x)" :name="x.title" icon-size="1rem" shape="square"
29 :checked-color="themeVars.radioColor" style="margin-bottom: 0.25rem">{{ x.title }}</van-checkbox> 31 :checked-color="themeVars.radioColor" style="margin-bottom: 0.25rem">{{ x.title }}</van-checkbox>
30 <van-field v-if="checkbox_value.includes(x.value) && x.is_input" :name="'_' + item.key" @blur="onBlur(x)" v-model="x.affix" 32 <van-field v-if="checkbox_value.includes(x.value) && x.is_input" :name="'_' + item.key" @blur="onBlur(x)" v-model="x.affix"
31 label=" " label-width="5px" :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''" 33 label=" " label-width="5px" :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''"
...@@ -34,6 +36,9 @@ ...@@ -34,6 +36,9 @@
34 </van-checkbox-group> 36 </van-checkbox-group>
35 </template> 37 </template>
36 </van-field> 38 </van-field>
39 + <div v-else style="padding: 0.5rem 1rem;">
40 + <span v-for="(item, index) in checkbox_value" :key="index" style="font-size: 0.9rem;">{{ item }}&nbsp;</span>
41 + </div>
37 </div> 42 </div>
38 </template> 43 </template>
39 44
......