fix: 🐛 修复Picker和SelectPicker清空按钮颜色与Input不统一的问题 (#700)

Author: Moonofweisheng

src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss

@@ -209,6 +209,7 @@ $-cell-value-fs: var(--wot-cell-value-fs, 14px) !default; // 右侧内容字号
 $-cell-value-color: var(--wot-cell-value-color, rgba(0, 0, 0, 0.85)) !default; // 右侧内容文字颜色
 $-cell-arrow-size: var(--wot-cell-arrow-size, 18px) !default; // 右箭头大小
 $-cell-arrow-color: var(--wot-cell-arrow-color, rgba(0, 0, 0, 0.25)) !default; // 右箭头颜色
+$-cell-clear-color: var(--wot-cell-clear-color, #585858) !default; // 清空按钮颜色
 $-cell-tap-bg: var(--wot-cell-tap-bg, rgba(0, 0, 0, 0.06)) !default; // 点击态背景色
 
 $-cell-title-fs-large: var(--wot-cell-title-fs-large, 16px) !default; // 大尺寸标题字号

src/uni_modules/wot-design-uni/components/wd-picker/index.scss

@@ -86,8 +86,7 @@
   }
   @include when(error) {
     .wd-picker__value,
-    :deep(.wd-picker__arrow),
-    :deep(.wd-picker__clear) {
+    :deep(.wd-picker__arrow) {
       color: $-input-error-color;
     }
   }
@@ -180,6 +179,10 @@
     line-height: $-cell-line-height;
   }
 
+  @include edeep(clear){
+    color: $-cell-clear-color;
+  }
+
   @include e(wraper) {
     padding-bottom: var(--window-bottom);
   }

src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue

@@ -22,7 +22,9 @@
               {{ showValue ? showValue : placeholder || translate('placeholder') }}
             </view>
             <wd-icon v-if="showArrow" custom-class="wd-picker__arrow" name="arrow-right" />
-            <wd-icon v-else-if="showClear" custom-class="wd-picker__clear" name="error-fill" @click.stop="handleClear" />
+            <view v-else-if="showClear" @click.stop="handleClear">
+              <wd-icon custom-class="wd-picker__clear" name="error-fill" />
+            </view>
           </view>
           <view v-if="errorMessage" class="wd-picker__error-message">{{ errorMessage }}</view>
         </view>

src/uni_modules/wot-design-uni/components/wd-select-picker/index.scss

@@ -72,8 +72,7 @@
       .wd-select-picker__value {
         color: $-input-error-color;
       }
-      :deep(.wd-select-picker__arrow),
-      :deep(.wd-select-picker__clear) {
+      :deep(.wd-select-picker__arrow) {
         color: $-input-error-color;
       }
     }
@@ -138,6 +137,10 @@
     color: $-cell-arrow-color;
     line-height: $-cell-line-height;
   }
+
+  @include edeep(clear) {
+    color: $-cell-clear-color;
+  }
 
   @include e(loading) {
     position: absolute;

src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue

@@ -26,7 +26,9 @@
               {{ showValue || placeholder || translate('placeholder') }}
             </view>
             <wd-icon v-if="showArrow" custom-class="wd-select-picker__arrow" name="arrow-right" />
-            <wd-icon v-else-if="showClear" custom-class="wd-select-picker__clear" name="error-fill" @click.stop="handleClear" />
+            <view v-else-if="showClear" @click.stop="handleClear">
+              <wd-icon custom-class="wd-select-picker__clear" name="error-fill" />
+            </view>
           </view>
 
           <view v-if="errorMessage" class="wd-select-picker__error-message">{{ errorMessage }}</view>