feat: ✨ SelectPicker单选模式支持自动完成 (#207)

✅ Closes: #206

Author: BeginnerDone

docs/component/select-picker.md

@@ -341,6 +341,7 @@ 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 |
 | prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
 | rules | 表单验证规则，结合`wd-form`组件使用	 | `FormItemRule []`	 | - | `[]` | - |
 

src/pages/selectPicker/Index.vue

@@ -17,6 +17,14 @@
         <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-cell-group>
     </view>
     <demo-block title="label不传" transparent>
@@ -126,6 +134,7 @@ const value15 = ref<string[]>(['101'])
 const value16 = ref<string[]>(['103'])
 const value17 = ref<string[]>(['102'])
 const value18 = ref<string>('102')
+const value19 = ref<string>('101')
 
 const customShow = ref<string>('奢侈品')
 

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

@@ -81,7 +81,9 @@ export const selectPickerProps = {
   /** 自定义标签样式类 */
   customLabelClass: makeStringProp(''),
   /** 自定义值样式类 */
-  customValueClass: makeStringProp('')
+  customValueClass: makeStringProp(''),
+  /** 确认按钮是否显示（单选才生效） */
+  showConfirmBtn: 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 class="wd-select-picker__footer">
+      <view v-if="showConfirmBtn" class="wd-select-picker__footer">
         <wd-button block size="large" @click="onConfirm" :disabled="loading">{{ confirmButtonText || translate('confirm') }}</wd-button>
       </view>
     </wd-action-sheet>
@@ -319,6 +319,9 @@ 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) {
+    onConfirm()
+  }
 }
 
 function close() {
@@ -412,6 +415,10 @@ function formatFilterColumns(columns: Record<string, any>[], filterVal: string)
   })
 }
 
+const showConfirmBtn = computed(() => {
+  return (props.type === 'radio' && props.showConfirmBtn) || props.type === 'checkbox'
+})
+
 defineExpose<SelectPickerExpose>({
   close,
   open