uni-app 下拉多选(支持搜索和自己输入值) - 1***@qq.com 下拉框方向的选择

在uni-app中实现一个支持下拉多选、搜索以及自定义输入值的组件，可以使用uni-ui库中的uni-picker组件进行扩展，或者通过自定义组件的方式来实现。以下是一个简单的自定义组件实现示例，演示如何实现这些功能。

1. 创建自定义组件

首先，在项目的components目录下创建一个名为MultiSelectWithSearch.vue的文件。

<template>
  <view class="container">
    <input 
      type="text" 
      placeholder="搜索或输入..." 
      v-model="searchQuery" 
      @input="onSearchInput" 
      @focus="showPicker=true" 
      @blur="hidePickerIfEmpty"
    />
    <view v-if="showPicker" class="picker-overlay" @click.stop="hidePicker">
      <view class="picker-content" @click.stop>
        <view 
          v-for="(item, index) in filteredOptions" 
          :key="index" 
          class="picker-item" 
          @click="toggleSelection(item)"
        >
          <checkbox :checked="isSelected(item)" :disabled="false"></checkbox>
          {{ item }}
        </view>
        <view class="add-new-item" @click="addNewItem">+ 添加新项</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      showPicker: false,
      options: ['选项1', '选项2', '选项3'],
      selectedOptions: [],
      customInputs: []
    };
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option => 
        option.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  methods: {
    toggleSelection(item) {
      const index = this.selectedOptions.indexOf(item);
      if (index > -1) {
        this.selectedOptions.splice(index, 1);
      } else {
        this.selectedOptions.push(item);
      }
    },
    isSelected(item) {
      return this.selectedOptions.includes(item);
    },
    onSearchInput() {
      this.customInputs = []; // Clear custom inputs when searching
    },
    addNewItem() {
      if (this.searchQuery.trim()) {
        this.options.push(this.searchQuery);
        this.selectedOptions.push(this.searchQuery);
        this.searchQuery = '';
        this.showPicker = false;
      }
    },
    hidePickerIfEmpty() {
      if (!this.searchQuery.trim()) {
        this.showPicker = false;
      }
    },
    hidePicker() {
      this.showPicker = false;
    }
  }
};
</script>

<style>
/* 样式部分省略，根据实际需求添加 */
</style>

2. 使用组件

在你的页面文件中引入并使用这个组件：

<template>
  <view>
    <MultiSelectWithSearch />
  </view>
</template>

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

export default {
  components: {
    MultiSelectWithSearch
  }
};
</script>

总结

上述代码实现了一个简单的自定义下拉多选组件，支持搜索和自定义输入值。注意，这只是一个基础示例，你可以根据实际需求进一步扩展和优化，比如添加更多的样式、处理更多的事件以及优化性能等。