优化

components/searchPicker/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <uv-popup ref="popup" mode="bottom" custom-style="height: 580rpx;">
+    <view class="pickerTitle">
+      <view @tap="pickerCancel" style="color: #888;padding: 0 30rpx;">取消</view>
+      <!--  @change="handleSearch" -->
+      <uv-search placeholder="请输入搜索内容" v-model="keyword" :showAction="false" @search="handleSearch" @clickIcon="handleSearch" />
+      <view @tap="pickerConfirm" style="color: #007aff;padding: 0 30rpx;">确定</view>
+    </view>
+    <picker-view :value="pickerIndex" @change="onPickerChange">
+      <picker-view-column>
+        <view v-for="(item, index) in filteredOptions" :key="index" class="picker-item">
+          {{ item[props.nodeKey] }}
+        </view>
+      </picker-view-column>
+    </picker-view>
+  </uv-popup>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+const props = defineProps({
+  // 带默认值的数字
+  nodeKey: {
+    type: String,
+    default: "label",        // 默认值
+  },
+  // 自定义验证函数
+  options: {
+    type: Array,
+    default: () => {
+      return []
+    },
+  },
+});
+
+const filteredOptions = computed(() => {
+  if (!keyword.value.trim()) {
+    return [...props.options];
+  }
+  
+  return props.options.filter(item => 
+    item[props.nodeKey].includes(keyword.value)
+  );
+  // console.log('options 变化:', props.options);
+  // return [...props.options]; // 可以添加过滤逻辑
+});
+const emits = defineEmits(['confirm']);
+
+// 打开弹窗
+const popup = ref(null)
+const open = () => {
+  popup.value.open()
+}
+
+const pickerIndex = ref([0]);
+const keyword = ref("")
+
+// 选择器值变化
+const onPickerChange = (e) => {
+  
+  pickerIndex.value = e.detail.value;
+};
+// 处理搜索
+const handleSearch = () => {
+  // if (!keyword.value) {
+  //   filteredOptions.value = [...props.options];
+  //   return;
+  // }
+  // filteredOptions.value = props.options.filter(item =>
+  //   item[props.nodeKey].includes(keyword.value)
+  // );
+};
+// 关闭弹窗
+const pickerCancel = () => {
+  popup.value.close()
+}
+// 确定弹窗
+const pickerConfirm = () => {
+  const selectedIndex = pickerIndex.value[0];
+  emits('confirm', filteredOptions.value[selectedIndex]);
+  popup.value.close()
+}
+
+// 显式暴露方法给父组件
+defineExpose({
+  open,
+});
+
+
+
+</script>
+
+<style scoped>
+.pickerTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 90rpx;
+  border-bottom: 1rpx solid #e5e5e5;
+
+  view {
+    padding: 0 28rpx;
+    font-size: 34rpx;
+  }
+}
+
+picker-view {
+  height: 100%;
+  /* 让 picker-view 填充父容器 */
+}
+
+.picker-item {
+  line-height: var(--picker-view-column-indicator-height);
+  text-align: center;
+}
+</style>