van-dropdown-menu 增加搜索框

要在 van-dropdown-menu 中添加搜索框，您可以按照以下步骤进行操作：

1. 在 van-dropdown-menu 组件中添加一个输入框，并设置输入框的位置和样式。

2. 监听输入框的变化事件，并将输入框的值传递给一个方法。

3. 在方法中根据输入框的值过滤下拉菜单中的选项，并将过滤后的选项重新渲染到下拉菜单中。

4. 当用户选择一个选项时，关闭下拉菜单并将选项的值传递给父组件。

下面是一个示例代码：

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

<script>
export default {
  data() {
    return {
      options: ['选项A', '选项B', '选项C', '选项D'],
      selectedOption: '',
      searchText: '',
    };
  },
  computed: {
    filteredOptions() {
      return this.options.filter((option) => {
        return option.toLowerCase().includes(this.searchText.toLowerCase());
      });
    },
  },
};
</script>

在这个示例中，我们使用了 van-dropdown-menu 和 van-dropdown-item 组件来创建下拉菜单。我们还在 van-dropdown-item 组件的标题中添加了一个输入框，并将其值绑定到了 searchText 变量上。

在 computed 属性中，我们创建了一个名为 filteredOptions 的计算属性，该属性根据 searchText 过滤 options 数组中的选项。我们在 van-dropdown-menu-item 组件中使用过滤后的选项来渲染下拉菜单中的选项。

最后，我们将选项的值绑定到了 selectedOption 变量上，以便将其传递给父组件。