uni-app 有没有类似原生select下拉框的插件 不是picker的那种

在 uni-app 中，虽然内置的 picker 组件常用于实现下拉选择功能，但如果你需要类似原生 select 下拉框的效果，可以借助第三方组件库或者自己封装一个组件来实现。以下是一个基于 uni-app 的自定义下拉选择框组件的简化示例，不依赖 picker。

自定义下拉选择框组件示例

1. 创建组件 CustomSelect.vue

<template>
  <view class="custom-select">
    <view class="select-box" @click="toggle">
      <text>{{selectedLabel}}</text>
      <view v-if="isOpen" class="dropdown-menu">
        <view 
          v-for="(item, index) in options" 
          :key="index" 
          class="menu-item" 
          @click="select(item)"
        >
          {{item.label}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      isOpen: false,
      selectedLabel: ''
    };
  },
  watch: {
    value(newVal) {
      this.updateSelectedLabel(newVal);
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    },
    select(item) {
      this.$emit('input', item.value);
      this.isOpen = false;
    },
    updateSelectedLabel(value) {
      const selected = this.options.find(option => option.value === value);
      this.selectedLabel = selected ? selected.label : '';
    }
  },
  mounted() {
    this.updateSelectedLabel(this.value);
  }
};
</script>

<style scoped>
.custom-select {
  position: relative;
  width: 100%;
}
.select-box {
  padding: 10px;
  border: 1px solid #ddd;
  cursor: pointer;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  background: #fff;
  z-index: 1000;
}
.menu-item {
  padding: 10px;
  cursor: pointer;
}
.menu-item:hover {
  background: #f0f0f0;
}
</style>

1. 使用组件

<template>
  <view>
    <custom-select 
      :options="options" 
      v-model="selectedValue"
    />
  </view>
</template>

<script>
import CustomSelect from '@/components/CustomSelect.vue';

export default {
  components: {
    CustomSelect
  },
  data() {
    return {
      selectedValue: '',
      options: [
        { label: 'Option 1', value: '1' },
        { label: 'Option 2', value: '2' },
        { label: 'Option 3', value: '3' }
      ]
    };
  }
};
</script>

这个自定义组件 CustomSelect 提供了类似原生 select 的功能，并且可以通过 v-model 进行双向绑定。你可以根据需要进一步美化样式或添加功能。