基于 vue3使用vant下拉菜单实现搜索

可以使用vant的下拉菜单组件`DropdownMenu`以及`DropdownItem`来实现搜索功能。

具体实现步骤如下：

1. 在入口文件中导入`vant`插件并注册相关组件

import { createApp } from 'vue'
import { DropdownMenu, DropdownItem } from 'vant'
import App from './App.vue'

const app = createApp(App)
app.use(DropdownMenu)
app.use(DropdownItem)
app.mount('#app')

2. 在需要使用下拉菜单的组件中声明数据和方法

import { ref } from 'vue'

export default {
  name: 'MyComponent',
  setup() {
    const value = ref('') // 搜索相关的文本输入框的值
    const options = ref([]) // 下拉菜单选项的列表
    const search = () => {
      // 执行搜索操作，并设置options的值
    }
    return {
      value,
      options,
      search
    }
  }
}

3. 在模板中使用`DropdownMenu`和`DropdownItem`组件

<template>
  <div>
    <!-- 搜索相关的文本输入框 -->
    <van-cell-group>
      <van-field v-model="value" label="搜索" placeholder="请输入关键词" />
    </van-cell-group>
    <!-- 下拉菜单组件 -->
    <van-dropdown-menu>
      <template #title>
        <van-cell title="下拉菜单" />
      </template>
      <!-- 下拉菜单选项 -->
      <van-dropdown-item v-for="(option, index) in options" :key="index">{{ option }}</van-dropdown-item>
      <!-- 加载更多 -->
      <van-dropdown-item loading>加载更多...</van-dropdown-item>
      <!-- 搜索按钮 -->
      <van-dropdown-item v-if="value" @click="search">搜索：'{{ value }}'</van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

在模板中，使用`van-field`组件来实现文本输入框，并使用`v-model`指令双向绑定`value`变量。使用`van-dropdown-menu`和`van-dropdown-item`组件来构建下拉菜单结构。`#title`插槽用于渲染组件的标题，`v-for`指令用于循环展示选项列表，`loading`属性用于展示加载更多项，`v-if`指令用于展示搜索按钮并绑定`search`方法。

4. 在`search`方法中，执行搜索操作并设置`options`变量的值

const search = async () => {
  const data = await axios.get('url', { params: { keyword: value.value } })
  const results = data.results
  options.value = results.map(item => item.name)
}

在`search`方法中，使用`axios`发送请求获取搜索结果，格式化返回的数据并设置`options`变量的值。此处仅作示例，实际操作中需要根据具体情况进行调整。