van-dropdown-menu 增加搜索框

要在 van-dropdown-menu 中添加搜索框，您可以使用以下步骤：

1. 在 van-dropdown-menu 中添加一个输入框，用于搜索。您可以使用 van-search 组件来实现它。

2. 将输入框放置在 van-dropdown-menu 中的合适位置。您可以使用 slot 来自定义下拉菜单的内容，在 slot 中添加输入框。

3. 添加一个事件监听器，以便在输入框中输入内容时更新下拉菜单的内容。您可以在输入框中添加一个 v-model 指令来监听输入框的值，并使用 watch 监听输入框的值变化，当输入框的值变化时，更新下拉菜单的内容。

以下是示例代码：

<van-dropdown-menu>
  <template #title>
    <van-search v-model="searchText" placeholder="搜索"></van-search>
  </template>
  <van-dropdown-item v-for="item in filteredOptions" :key="item.value" :value="item.value">
    {{ item.label }}
  </van-dropdown-item>
</van-dropdown-menu>

<script>
export default {
  data() {
    return {
      options: [
        { label: '选项一', value: '1' },
        { label: '选项二', value: '2' },
        { label: '选项三', value: '3' },
        { label: '选项四', value: '4' },
      ],
      searchText: '',
    };
  },
  computed: {
    filteredOptions() {
      return this.options.filter((option) =>
        option.label.toLowerCase().includes(this.searchText.toLowerCase())
      );
    },
  },
};
</script>

在这个示例中，我们在 van-dropdown-menu 的标题 slot 中添加了一个 van-search 组件，用于搜索。然后，我们使用 computed 属性计算出过滤后的选项列表，并在 van-dropdown-item 中使用 v-for 循环渲染过滤后的选项列表。最后，在输入框的值变化时，我们使用 watch 监听输入框的值变化，并更新过滤后的选项列表。