feat: ✨ picker和selectPicker添加clearable属性

Author: RJQingHuan

docs/component/picker.md

@@ -14,6 +14,7 @@
         <wd-picker label="before-confirm" :columns="columns0" v-model="value7" :before-confirm="beforeConfirm" />
         <wd-picker label="错误" v-model="value10" error :columns="columns0" />
         <wd-picker label="必填" v-model="value11" :columns="columns0" required />
+        <wd-picker label="可清空" :clearable="true" v-model="value15" :columns="columns5" :column-change="onChangeDistrict" />
       </wd-cell-group>
     </demo-block>
     <demo-block title="label 不传" transparent>
@@ -105,6 +106,7 @@ const columns4 = ref([
 ])
 
 const value5 = ref(['110000', '110100', '110102'])
+const value15 = ref(['110000', '110100', '110102'])
 const columns5 = ref([district[0], district[district[0][0].value], district[district[district[0][0].value][0].value]])
 
 const value6 = ref(['中南大学', '软件工程'])

docs/component/select-picker.md

@@ -14,10 +14,19 @@
         <wd-select-picker label="before-confirm" v-model="value9" :columns="columns1" @confirm="handleConfirm9" :before-confirm="beforeConfirm" />
         <wd-select-picker label="标题" v-model="value10" title="多选" :columns="columns1" @confirm="handleConfirm10" />
         <wd-select-picker label="错误" error v-model="value11" :columns="columns1" @confirm="handleConfirm11" />
-        <wd-select-picker label="必填" required v-model="value12" :columns="columns1" @confirm="handleConfirm12" />
+        <wd-select-picker clearable label="必填" required v-model="value12" :columns="columns1" @confirm="handleConfirm12" />
         <wd-select-picker label="可搜索" filterable v-model="value13" :columns="columns1" @confirm="handleConfirm13" />
         <wd-select-picker label="单选可搜索" filterable v-model="value18" type="radio" :columns="columns1" @confirm="handleConfirm13" />
         <wd-select-picker label="自动完成" type="radio" :show-confirm="false" v-model="value19" :columns="columns1" @confirm="handleConfirm2" />
+        <wd-select-picker
+          label="可清空"
+          clearable
+          type="radio"
+          :show-confirm="false"
+          v-model="value20"
+          :columns="columns1"
+          @confirm="handleConfirm2"
+        />
       </wd-cell-group>
     </view>
     <demo-block title="label不传" transparent>
@@ -128,6 +137,7 @@ const value16 = ref<string[]>(['103'])
 const value17 = ref<string[]>(['102'])
 const value18 = ref<string>('102')
 const value19 = ref<string>('101')
+const value20 = ref<string>('101')
 
 const customShow = ref<string>('奢侈品')
 

src/pages/picker/Index.vue

@@ -25,7 +25,8 @@
       color: $-dark-color-gray;
     }
 
-    :deep(.wd-picker__arrow){
+    :deep(.wd-picker__arrow),
+    :deep(.wd-picker__clear) {
       color: $-dark-color;
     }
 
@@ -78,13 +79,15 @@
     .wd-picker__cell {
       font-size: $-cell-title-fs-large;
     }
-    :deep(.wd-picker__arrow) {
+    :deep(.wd-picker__arrow),
+    :deep(.wd-picker__clear) {
       font-size: $-cell-icon-size-large;
     }
   }
   @include when(error) {
     .wd-picker__value,
-    :deep(.wd-picker__arrow) {
+    :deep(.wd-picker__arrow),
+    :deep(.wd-picker__clear) {
       color: $-input-error-color;
     }
   }
@@ -170,7 +173,7 @@
     color: $-input-placeholder-color;
   }
 
-  @include edeep(arrow) {
+  @include edeep(arrow,clear) {
     display: block;
     font-size: $-cell-icon-size;
     color: $-cell-arrow-color;

src/pages/selectPicker/Index.vue

@@ -147,7 +147,11 @@ export const pickerProps = {
   /**
    * 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
    */
-  immediateChange: makeBooleanProp(false)
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 显示清空按钮
+   */
+  clearable: makeBooleanProp(false)
 }
 
 export type PickerProps = ExtractPropTypes<typeof pickerProps>

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

@@ -21,7 +21,8 @@
             <view :class="`wd-picker__value ${ellipsis && 'is-ellipsis'} ${customValueClass} ${showValue ? '' : 'wd-picker__placeholder'}`">
               {{ showValue ? showValue : placeholder || translate('placeholder') }}
             </view>
-            <wd-icon v-if="!disabled && !readonly" custom-class="wd-picker__arrow" name="arrow-right" />
+            <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>
           <view v-if="errorMessage" class="wd-picker__error-message">{{ errorMessage }}</view>
         </view>
@@ -384,6 +385,21 @@ function setLoading(loading: boolean) {
   innerLoading.value = loading
 }
 
+// 是否展示清除按钮
+const showClear = computed(() => {
+  return props.clearable && !props.disabled && !props.readonly && showValue.value.length
+})
+
+function handleClear() {
+  const clearValue = isArray(pickerValue.value) ? [] : ''
+  emit('update:modelValue', clearValue)
+}
+
+// 是否展示箭头
+const showArrow = computed(() => {
+  return !props.disabled && !props.readonly && !showClear.value
+})
+
 defineExpose<PickerExpose>({
   close,
   open,

src/uni_modules/wot-design-uni/components/wd-picker/types.ts

@@ -30,7 +30,8 @@
     }
 
     :deep(.wd-select-picker__arrow),
-    :deep(.wd-select-picker__close) {
+    :deep(.wd-select-picker__close),
+    :deep(.wd-select-picker__clear) {
       color: $-dark-color;
     }
 
@@ -71,14 +72,16 @@
       .wd-select-picker__value {
         color: $-input-error-color;
       }
-      :deep(.wd-select-picker__arrow) {
+      :deep(.wd-select-picker__arrow),
+      :deep(.wd-select-picker__clear) {
         color: $-input-error-color;
       }
     }
     @include when(large) {
       font-size: $-cell-title-fs-large;
 
-      :deep(.wd-select-picker__arrow ){
+      :deep(.wd-select-picker__arrow),
+      :deep(.wd-select-picker__clear) {
         font-size: $-cell-icon-size-large;
       }
     }
@@ -129,7 +132,7 @@
   @include e(body) {
     flex: 1;
   }
-  @include edeep(arrow) {
+  @include edeep(arrow, clear) {
     display: block;
     font-size: $-cell-icon-size;
     color: $-cell-arrow-color;

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

@@ -83,7 +83,11 @@ export const selectPickerProps = {
   /** 自定义值样式类 */
   customValueClass: makeStringProp(''),
   /** 是否显示确认按钮（radio类型生效），默认值为：true */
-  showConfirm: makeBooleanProp(true)
+  showConfirm: makeBooleanProp(true),
+  /**
+   * 显示清空按钮
+   */
+  clearable: makeBooleanProp(false)
 }
 export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps>
 

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

@@ -25,7 +25,8 @@
             >
               {{ showValue || placeholder || translate('placeholder') }}
             </view>
-            <wd-icon v-if="!disabled && !readonly" custom-class="wd-select-picker__arrow" name="arrow-right" />
+            <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>
 
           <view v-if="errorMessage" class="wd-select-picker__error-message">{{ errorMessage }}</view>
@@ -430,6 +431,20 @@ const showConfirm = computed(() => {
   return (props.type === 'radio' && props.showConfirm) || props.type === 'checkbox'
 })
 
+// 是否展示清除按钮
+const showClear = computed(() => {
+  return props.clearable && !props.disabled && !props.readonly && showValue.value.length
+})
+
+function handleClear() {
+  emit('update:modelValue', props.type === 'checkbox' ? [] : '')
+}
+
+// 是否展示箭头
+const showArrow = computed(() => {
+  return !props.disabled && !props.readonly && !showClear.value
+})
+
 defineExpose<SelectPickerExpose>({
   close,
   open