✨ feat(单选，多选，性别组件): 新增文字颜色和背景颜色

hookehuyr
Commit 6afa6db521103b297fea78ea1727750a4fab6df0 6afa6db5 1 parent 83ed0652
Showing 3 changed files with 33 additions and 13 deletions
src/components/CheckboxField/index.vue
src/components/GenderField/index.vue
src/components/RadioField/index.vue
--- a/src/components/CheckboxField/index.vue
View file @6afa6db
+++ b/src/components/CheckboxField/index.vue
View file @6afa6db
 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-23 15:44:01
+ * @LastEditTime: 2025-02-25 15:41:38
  * @FilePath: /data-table/src/components/CheckboxField/index.vue
  * @Description: 多项选择控件
 -->
@@ -20,15 +20,17 @@
       <template #input>
         <van-checkbox-group v-model="checkbox_value" :direction="item.component_props.direction"
           :max="item.component_props.max" style="width: 100%">
-          <div v-for="x in item.component_props.options" :key="x.title" class="checkbox-wrapper" :style="{ border: item.component_props.readonly ? 0 : ''}">
+          <div v-for="x in item.component_props.options" :key="x.title" class="checkbox-wrapper" :style="{ border: item.component_props.readonly ? 0 : '', backgroundColor: x.background_color || ''}">
             <!-- <div v-if="item.component_props.readonly">
               <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>
               <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>
             </div>
             <van-checkbox v-else @click="onClick(x)" :name="x.title" icon-size="1rem" shape="square"
               :checked-color="themeVars.radioColor" style="margin-bottom: 0.25rem">{{ x.title }}</van-checkbox> -->
+              <van-config-provider :theme-vars="{ checkboxLabelColor: x.color }">
                 <van-checkbox @click="onClick(x)" :name="x.title" icon-size="1rem" shape="square"
                 :checked-color="themeVars.radioColor" style="margin-bottom: 0.25rem">{{ x.title }}</van-checkbox>
+              </van-config-provider>
             <van-field v-if="checkbox_value.includes(x.value) && x.is_input" :name="'_' + item.key" @blur="onBlur(x)" v-model="x.affix"
               label=" " label-width="5px" :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''"
               :required="x.input_required" :readonly="item.component_props.readonly" class="affix-input" />
@@ -36,8 +38,8 @@
         </van-checkbox-group>
       </template>
     </van-field>
-    <div v-else style="padding: 0.5rem 1.3rem;">
+    <div v-else class="readonly-wrapper">
-      <span v-for="(item, index) in checkbox_value" :key="index" style="font-size: 0.9rem;">{{ item }}&nbsp;</span>
+      <span v-for="(item, index) in checkbox_value" :key="index" class="readonly-text">{{ item }}&nbsp;</span>
     </div>
   </div>
 </template>
@@ -210,5 +212,11 @@ onMounted(() => {
     margin-top: 0.5rem;
     margin-bottom: 0.25rem;
   }
+  .readonly-wrapper {
+    padding: 0.5rem 1.3rem;
+  }
+  .readonly-text {
+    font-size: 0.9rem;
+  }
 }
 </style>
--- a/src/components/GenderField/index.vue
View file @6afa6db
+++ b/src/components/GenderField/index.vue
View file @6afa6db
 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-23 15:43:52
+ * @LastEditTime: 2025-02-25 15:49:20
  * @FilePath: /data-table/src/components/GenderField/index.vue
  * @Description: 性别选择控件
 -->
@@ -22,15 +22,17 @@
     >
       <template #input>
         <van-radio-group @change="onChange(item)" v-model="gender_value" :direction="item.component_props.direction" style="width: 100%">
-          <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper">
+          <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper" :style="{ backgroundColor: x.background_color || '' }">
             <!-- <div v-if="item.component_props.readonly">
               <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>
               <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>
             </div>
             <van-radio v-else :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
             style="margin-bottom: 0.25rem">{{ x.title }}</van-radio> -->
+            <van-config-provider :theme-vars="{ radioLabelColor: x.color }">
               <van-radio :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
               style="margin-bottom: 0.25rem">{{ x.title }}</van-radio>
+            </van-config-provider>
           </div>
         </van-radio-group>
       </template>
--- a/src/components/RadioField/index.vue
View file @6afa6db
+++ b/src/components/RadioField/index.vue
View file @6afa6db
 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-23 15:44:07
+ * @LastEditTime: 2025-02-25 15:17:28
  * @FilePath: /data-table/src/components/RadioField/index.vue
  * @Description: 单项选择控件
 -->
@@ -17,19 +17,29 @@
       <template #input>
         <van-radio-group @change="onChange(item)" v-model="radio_value" :direction="item.component_props.direction"
           style="width: 100%">
-          <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper" :style="{ border: item.component_props.readonly ? 0 : ''}">
+          <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper" :style="{ border: item.component_props.readonly ? 0 : '', backgroundColor: x.background_color || ''}">
             <div v-if="item.component_props.readonly">
               <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>
               <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>
               <span v-if="default_value === x.value && default_affix_value">{{ default_affix_value }}</span>
             </div>
-            <van-radio v-else :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
+
-              style="margin-bottom: 0.25rem">{{ x.title }}</van-radio>
+            <van-config-provider v-else :theme-vars="{ radioLabelColor: x.color }">
-            <div v-if="x.desc_text" class="van-multi-ellipsis--l3 rule-desc-text">{{ x.desc_text }}</div>
+              <van-radio
-            <div v-if="x.desc_type === 'text'" class="rule-box" @click="showRule(x)">
+                :name="x.value"
+                icon-size="1rem"
+                :checked-color="themeVars.radioColor"
+                style="margin-bottom: 0.25rem"
+              >
+                {{ x.title }}
+              </van-radio>
+            </van-config-provider>
+
+            <div v-if="x.desc_text" class="van-multi-ellipsis--l3 rule-desc-text" :style="x.color ? { color: x.color } : {}">{{ x.desc_text }}</div>
+            <div v-if="x.desc_type === 'text'" class="rule-box" :style="x.color ? { color: x.color } : {}" @click="showRule(x)">
               {{ x.desc_btn_name }}&nbsp;>>
             </div>
-            <div v-if="x.desc_type === 'url'" class="rule-box" @click="showUrl(x)">
+            <div v-if="x.desc_type === 'url'" class="rule-box" :style="x.color ? { color: x.color } : {}" @click="showUrl(x)">
               {{ x.desc_btn_name }}&nbsp;<van-icon name="link-o" />
             </div>
             <van-field