<van-dropdown-menu> 增加搜索功能

`<van-dropdown-menu>` 是vant UI库中的一个组件，它通常用于创建下拉菜单，提供选项供用户选择。如果要在van-dropdown-menu上增加搜索功能，你可以考虑以下几个步骤：

1. **添加搜索框**: 首先，在下拉菜单上方添加一个输入框，让用户可以输入搜索关键词。这可以通过HTML和Vue模板语法实现，如 `<input v-model="searchKeyword" placeholder="搜索...">`。

2. **绑定搜索事件**: 绑定输入框的`@input`事件，当用户输入内容时，更新搜索条件。在你的Vue实例中，可以设置一个数据属性来存储搜索关键字，比如 `data() { return { searchKeyword: '' } }`。

3. **过滤选项**: 当搜索条件改变时，遍历dropdown menu的选项列表，并根据搜索关键字过滤出匹配的结果。你可以使用数组的`.filter()`方法实现这个功能。

4. **动态渲染**: 只显示过滤后的结果。在Vue中，可以通过`v-for`指令和一个计算属性来动态渲染选项，只展示那些搜索关键字匹配的项。

5. **关闭搜索**: 如果你希望在用户完成搜索或选择一个结果后关闭搜索框，可以在相应的事件处理函数里清除搜索关键字或隐藏搜索框。

<template>
  <div>
    <input v-model="searchKeyword" placeholder="搜索...">
    <van-dropdown-menu ref="dropdownMenu">
      <template v-for="(option, index) in filteredOptions" :key="index">
        <!-- 这里是下拉菜单项 -->
      </template>
    </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      options: [
        // 下拉菜单原始选项
      ]
    };
  },
  computed: {
    filteredOptions() {
      if (!this.searchKeyword) {
        return this.options;
      }
      return this.options.filter(option => option.label.includes(this.searchKeyword));
    }
  },
  methods: {
    handleSearch() {
      // 用户完成搜索后关闭搜索，例如清空关键词
      this.searchKeyword = '';
    },
    handleSelect(item) {
      // 用户选择一个结果时也关闭搜索
      this.searchKeyword = '';
      this.$refs.dropdownMenu.close();
    }
  }
};
</script>