refactor: ♻️ SelectPicker增加show-confirm属性支持自动完成

docs/component/select-picker.md

@@ -229,6 +229,14 @@ const beforeConfirm = (value, resolve) => {
 <wd-select-picker label="可搜索" v-model="value" :columns="columns" filterable></wd-select-picker>
 ```
 
+## 自动完成
+
+`radio`类型，设置 `show-confirm` 属性支持控制确认按钮的显示，设置为`false`可自动完成。
+
+```html
+<wd-select-picker label="自动完成" type="radio" :show-confirm="false" v-model="value19" :columns="columns" />
+```
+
 ## 自定义选择器
 
 如果默认的 cell 类型的展示格式不满足需求，可以通过默认插槽进行自定义选择器样式。
@@ -341,14 +349,14 @@ function handleConfirm({ value, selectedItems }) {
 | filter-placeholder     | 搜索框占位符                                                                                             | string                            | -                | 搜索     | -        |
 | ellipsis               | 是否超出隐藏                                                                                             | boolean                           | -                | false    | -        |
 | scroll-into-view       | 重新打开是否滚动到选中项                                                                                 | boolean                           | -                | true     | 0.1.34   |
-| show-confirm-btn | 确认按钮是否显示（单选生效） | boolean |  | true | 1.2.7 |
+| show-confirm           | 是否显示确认按钮（仅`radio`类型生效）                                                                             | boolean                           |                  | true     | 1.2.8    |
 | prop                   | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的                                        | string                            | -                | -        | -        |
 | rules                  | 表单验证规则，结合`wd-form`组件使用                                                                      | `FormItemRule []`                 | -                | `[]`     | -        |
 
 ### FormItemRule 数据结构
 
 | 键名      | 说明                                                    | 类型                                  |
-| --- | --- | --- |
+| --------- | ------------------------------------------------------- | ------------------------------------- |
 | required  | 是否为必选字段                                          | `boolean`                             |
 | message   | 错误提示文案                                            | `string`                              |
 | validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` |
@@ -365,7 +373,7 @@ function handleConfirm({ value, selectedItems }) {
 ## Events
 
 | 事件名称 | 说明                       | 参数                                                                                                       | 最低版本 |
-| ------------ | -------------------------- | ---------------------------------------------------------------------------------------------------------- | -------- |
+| -------- | -------------------------- | ---------------------------------------------------------------------------------------------------------- | -------- |
 | confirm  | 点击确认时触发             | event.detail = { value, selectedItems }, checkbox 类型时 value 和 selectedItems 为数组，radio 类型为非数组 | -        |
 | change   | picker 内选项更改时触发    | `{ value }`, checkbox 类型时 value 为数组，radio 类型为非数组                                              | -        |
 | cancel   | 点击关闭按钮或者蒙层时触发 | -                                                                                                          | -        |

src/pages/selectPicker/Index.vue

@@ -17,14 +17,7 @@
         <wd-select-picker 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-btn="false"
-          v-model="value19"
-          :columns="columns1"
-          @confirm="handleConfirm2"
-        />
+        <wd-select-picker label="自动完成" type="radio" :show-confirm="false" v-model="value19" :columns="columns1" @confirm="handleConfirm2" />
       </wd-cell-group>
     </view>
     <demo-block title="label不传" transparent>

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

@@ -82,8 +82,8 @@ export const selectPickerProps = {
   customLabelClass: makeStringProp(''),
   /** 自定义值样式类 */
   customValueClass: makeStringProp(''),
-  /** 确认按钮是否显示（单选才生效） */
-  showConfirmBtn: makeBooleanProp(true)
+  /** 是否显示确认按钮（radio类型生效），默认值为：true */
+  showConfirm: makeBooleanProp(true)
 }
 export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps>
 

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

@@ -97,7 +97,7 @@
         </view>
       </scroll-view>
       <!-- 确认按钮 -->
-      <view v-if="showConfirmBtn" class="wd-select-picker__footer">
+      <view v-if="showConfirm" class="wd-select-picker__footer">
         <wd-button block size="large" @click="onConfirm" :disabled="loading">{{ confirmButtonText || translate('confirm') }}</wd-button>
       </view>
     </wd-action-sheet>
@@ -319,7 +319,7 @@ function valueFormat(value: string | number | boolean | (string | number | boole
 function handleChange({ value }: { value: string | number | boolean | (string | number | boolean)[] }) {
   selectList.value = value
   emit('change', { value })
-  if (props.type === 'radio' && !props.showConfirmBtn) {
+  if (props.type === 'radio' && !props.showConfirm) {
     onConfirm()
   }
 }
@@ -415,8 +415,8 @@ function formatFilterColumns(columns: Record<string, any>[], filterVal: string)
   })
 }
 
-const showConfirmBtn = computed(() => {
-  return (props.type === 'radio' && props.showConfirmBtn) || props.type === 'checkbox'
+const showConfirm = computed(() => {
+  return (props.type === 'radio' && props.showConfirm) || props.type === 'checkbox'
 })
 
 defineExpose<SelectPickerExpose>({