feat: ✨ picker和selectPicker添加clearable属性

docs/component/picker.md

@@ -4,7 +4,6 @@
 
 Picker 组件为 popup 和 pickerView 的组合。
 
-
 ## 基本用法
 
 `columns` 设置选项数据源，选项可以为字符串，也可以为对象，如果为对象则默认取 `label` 属性为选项内容进行渲染。`label` 设置左侧文本内容，`v-model` 设置选中项的值。label 可以不传。可以通过 `label-width` 设置标题宽度，默认为 '33%'，监听 `confirm` 事件，获取选中值，传出一个 evnet 对象， `event = { value, selectedItems }`，value 为绑定值，selectedItems 为选中选项的对象。
@@ -25,7 +24,7 @@ function handleConfirm({ value }) {
 当 `columns` 选项为对象时，其数据结构为：
 
 | 参数     | 类型                      | 说明                                                     | 最低版本 |
-|-----|-----|------|---------|
+| -------- | ------------------------- | -------------------------------------------------------- | -------- |
 | value    | string / number / boolean | 选项值，如果 value 属性不存在，则使用 label 作为选项的值 | -        |
 | label    | string                    | 选项文本内容                                             | -        |
 | disabled | boolean                   | 选项是否禁用                                             | -        |
@@ -37,6 +36,7 @@ function handleConfirm({ value }) {
 ```html
 <wd-picker :columns="columns" label="禁用" v-model="value" disabled />
 ```
+
 ```typescript
 const value = ref('选项3')
 
@@ -52,6 +52,14 @@ const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选
 <wd-picker :columns="columns" label="只读" v-model="value" readonly />
 ```
 
+## 清空按钮
+
+设置 `clearable` 属性。
+
+```html
+<wd-picker :columns="columns" label="清空" v-model="value" clearable />
+```
+
 ## 文案标题
 
 设置 `title` 属性。
@@ -59,6 +67,7 @@ const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选
 ```html
 <wd-picker label="标题" :columns="columns" title="文案标题"/>
 ```
+
 ## 加载中
 
 设置 `loading` 属性。
@@ -74,6 +83,7 @@ const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选
 ```html
 <wd-picker :columns="columns" label="多列" v-model="value" />
 ```
+
 ```typescript
 const value = ref(['中南大学', '软件工程'])
 
@@ -231,8 +241,8 @@ function handleConfirm({ value }) {
 ## Attributes
 
 | 参数                   | 说明                                                                                                                                                                  | 类型                              | 可选值 | 默认值  | 最低版本         |
-|-----|------|-----|-------|-------|---------|
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------ | ------- | ---------------- |
-| v-model	 | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - |
+| v-model                | 选中项，如果为多列选择器，则其类型应为数组                                                                                                                            | string / number / boolean / array | -      | -       | -                |
 | columns                | 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器                                                                                        | array                             | -      | -       | -                |
 | loading                | 加载中                                                                                                                                                                | boolean                           | -      | false   | -                |
 | loading-color          | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写                                                                                                                | string                            | -      | #4D80F0 | -                |
@@ -263,11 +273,12 @@ function handleConfirm({ value }) {
 | prop                   | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的                                                                                                     | string                            | -      | -       | -                |
 | rules                  | 表单验证规则，结合`wd-form`组件使用                                                                                                                                   | `FormItemRule []`                 | -      | `[]`    | -                |
 | immediate-change       | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。                   | boolean                           | -      | false   | 1.2.25           |
+| clearable              | 显示清空按钮                                                                                                                                                          | boolean                           | -      | false   | $LOWEST_VERSION$ |
 
 ### FormItemRule 数据结构
 
 | 键名      | 说明                                                    | 类型                                  |
-| --- | --- | --- |
+| --------- | ------------------------------------------------------- | ------------------------------------- |
 | required  | 是否为必选字段                                          | `boolean`                             |
 | message   | 错误提示文案                                            | `string`                              |
 | validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` |
@@ -276,7 +287,7 @@ function handleConfirm({ value }) {
 ## Events
 
 | 事件名称 | 说明                   | 参数                                                                                                        | 最低版本 |
-|--------|------|-----|---------|
+| -------- | ---------------------- | ----------------------------------------------------------------------------------------------------------- | -------- |
 | confirm  | 点击右侧按钮触发       | event.detail = { value, selectedItems }， value 为选中值(多列则为数组)，selectedItems为选中项(多列则为数组) | -        |
 | cancel   | 点击左侧按钮触发       | -                                                                                                           | -        |
 | open     | 打开选择器弹出层时触发 | -                                                                                                           | -        |
@@ -284,21 +295,21 @@ function handleConfirm({ value }) {
 ## Methods
 
 | 方法名称 | 说明           | 参数 | 最低版本 |
-|--------|------|-----|---------|
+| -------- | -------------- | ---- | -------- |
 | open     | 打开picker弹框 | -    | -        |
 | close    | 关闭picker弹框 | -    | -        |
 
 ## Slot
 
 | name    | 说明         | 最低版本 |
-|------|-----|---------|
+| ------- | ------------ | -------- |
 | default | 使用默认插槽 | -        |
 | label   | 左侧标题插槽 | -        |
 
 ## 外部样式类
 
 | 类名               | 说明                      | 最低版本 |
-|-----|------|--------|
+| ------------------ | ------------------------- | -------- |
 | custom-class       | 根节点样式                | -        |
 | custom-view-class  | pickerView 外部自定义样式 | -        |
 | custom-label-class | label 外部自定义样式      | -        |

docs/component/select-picker.md

@@ -80,6 +80,14 @@ const value = ref<string[]>(['101'])
 <wd-select-picker label="只读" v-model="value" :columns="columns" readonly></wd-select-picker>
 ```
 
+## 清空
+
+设置 `clearable` 属性
+
+```html
+<wd-select-picker label="清空" v-model="value" :columns="columns" clearable></wd-select-picker>
+```
+
 ## 禁用选项
 
 `columns` 每个选项支持 `disabled` 属性。
@@ -315,7 +323,7 @@ function handleConfirm({ value, selectedItems }) {
 ## Attributes
 
 | 参数                   | 说明                                                                                                     | 类型                              | 可选值           | 默认值   | 最低版本         |
-| ---------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------- | ---------------- | -------- | -------- |
+| ---------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------- | ---------------- | -------- | ---------------- |
 | v-model                | 选中项，`type`类型为`checkbox`时，类型为 array；`type`为`radio` 时 ，类型为 number / boolean / string    | array / number / boolean / string | -                | -        | -                |
 | columns                | 选择器数据，一维数组                                                                                     | array                             | -                | -        | -                |
 | type                   | 单复选选择器类型                                                                                         | string                            | checkbox / radio | checkbox | -                |
@@ -352,6 +360,7 @@ function handleConfirm({ value, selectedItems }) {
 | show-confirm           | 是否显示确认按钮（仅`radio`类型生效）                                                                    | boolean                           |                  | true     | 1.2.8            |
 | prop                   | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的                                        | string                            | -                | -        | -                |
 | rules                  | 表单验证规则，结合`wd-form`组件使用                                                                      | `FormItemRule []`                 | -                | `[]`     | -                |
+| clearable              | 显示清空按钮                                                                                             | boolean                           | -                | false    | $LOWEST_VERSION$ |
 
 ### FormItemRule 数据结构
 

src/pages/picker/Index.vue

@@ -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(['中南大学', '软件工程'])

src/pages/selectPicker/Index.vue

@@ -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/uni_modules/wot-design-uni/components/wd-picker/index.scss

@@ -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/uni_modules/wot-design-uni/components/wd-picker/types.ts

@@ -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/wd-picker.vue

@@ -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-select-picker/index.scss

@@ -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-select-picker/types.ts

@@ -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/wd-select-picker.vue

@@ -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