hookehuyr

✨ feat(性别组件): 只读模式下显示样式修改

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-21 13:15:05 4 + * @LastEditTime: 2024-12-23 14:51:02
5 * @FilePath: /data-table/src/components/GenderField/index.vue 5 * @FilePath: /data-table/src/components/GenderField/index.vue
6 * @Description: 性别选择控件 6 * @Description: 性别选择控件
7 --> 7 -->
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
14 </div> 14 </div>
15 <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" />
16 <van-field 16 <van-field
17 + v-if="!item.component_props.readonly"
17 :name="item.name" 18 :name="item.name"
18 :rules="item.rules" 19 :rules="item.rules"
19 :required="item.component_props.required" 20 :required="item.component_props.required"
...@@ -22,16 +23,19 @@ ...@@ -22,16 +23,19 @@
22 <template #input> 23 <template #input>
23 <van-radio-group @change="onChange(item)" v-model="gender_value" :direction="item.component_props.direction" style="width: 100%"> 24 <van-radio-group @change="onChange(item)" v-model="gender_value" :direction="item.component_props.direction" style="width: 100%">
24 <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper"> 25 <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper">
25 - <div v-if="item.component_props.readonly"> 26 + <!-- <div v-if="item.component_props.readonly">
26 - <div v-if="item.component_props.default === x.value" role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="true" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round van-radio__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-radio__label">{{ x.title }}</span></div> 27 + <div v-if="item.component_props.default === x.value" role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="true" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round van-radio__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-radio__label">{{ x.title }}</span></div>
27 - <div v-else role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="false" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success"><!----><!----><!----></i></div><span class="van-radio__label">{{ x.title }}</span></div> 28 + <div v-else role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="false" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success"></i></div><span class="van-radio__label">{{ x.title }}</span></div>
28 </div> 29 </div>
29 <van-radio v-else :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor" 30 <van-radio v-else :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
31 + style="margin-bottom: 0.25rem">{{ x.title }}</van-radio> -->
32 + <van-radio :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
30 style="margin-bottom: 0.25rem">{{ x.title }}</van-radio> 33 style="margin-bottom: 0.25rem">{{ x.title }}</van-radio>
31 </div> 34 </div>
32 </van-radio-group> 35 </van-radio-group>
33 </template> 36 </template>
34 </van-field> 37 </van-field>
38 + <div v-else style="padding: 0.5rem 1rem; font-size: 0.9rem;">{{ item.component_props.default }}</div>
35 </div> 39 </div>
36 </template> 40 </template>
37 41
......