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-22 10:31:54 4 + * @LastEditTime: 2024-12-23 15:27:33
5 * @FilePath: /data-table/src/components/RadioField/index.vue 5 * @FilePath: /data-table/src/components/RadioField/index.vue
6 * @Description: 单项选择控件 6 * @Description: 单项选择控件
7 --> 7 -->
...@@ -13,14 +13,14 @@ ...@@ -13,14 +13,14 @@
13 <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> 13 <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
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 :rules="item.rules"> 16 + <van-field v-if="!item.component_props.readonly" :rules="item.rules">
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 <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper" :style="{ border: item.component_props.readonly ? 0 : ''}"> 20 <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper" :style="{ border: item.component_props.readonly ? 0 : ''}">
21 <div v-if="item.component_props.readonly"> 21 <div v-if="item.component_props.readonly">
22 - <div v-if="default_value === 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> 22 + <div v-if="default_value === 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>
23 - <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> 23 + <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>
24 <span v-if="default_value === x.value && default_affix_value">{{ default_affix_value }}</span> 24 <span v-if="default_value === x.value && default_affix_value">{{ default_affix_value }}</span>
25 </div> 25 </div>
26 <van-radio v-else :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor" 26 <van-radio v-else :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
...@@ -43,6 +43,10 @@ ...@@ -43,6 +43,10 @@
43 </van-radio-group> 43 </van-radio-group>
44 </template> 44 </template>
45 </van-field> 45 </van-field>
46 + <div v-else style="padding: 0.5rem 1rem; font-size: 0.9rem;">
47 + <span>{{ default_value }}</span>
48 + <span>{{ default_affix_value }}</span>
49 + </div>
46 </div> 50 </div>
47 51
48 <van-overlay :show="show" :lock-scroll="false"> 52 <van-overlay :show="show" :lock-scroll="false">
......