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

在Vue3中，我们可以利用Vant UI库中的`van-cell-group`组件来创建一个下拉式的搜索框。Vant的`van-cell-group`组件可以模拟类似表格头部的筛选功能，包括下拉菜单。下面是简单的步骤：

首先，确保已经安装了Vant UI库，如果没有，可以在项目中运行 `npm install vant` 或者 `yarn add vant`。

1. 引入需要的组件：

<script setup>
import { createApp } from 'vue';
import { VanCellGroup } from 'vant';
</script>

2. 在模板中添加下拉菜单搜索框：

<template>
  <div>
    <van-cell-group v-model="searchKeyword">
      <van-cell title="搜索" type="title" />
      <van-cell slot="dropdown" slot-scope="{ item }">
        <!-- 下拉选项 -->
        <van-cell :value="item.label" @click="onSelect(item.value)" v-for="(option, index) in options" :key="index" />
      </van-cell>
    </van-cell-group>
  </div>
</template>

3. 初始化数据和方法：

<script setup>
const searchKeyword = ref('');
const options = [
  // 根据需求填充搜索选项，例如：['全部', '标题', '内容']
  ['全部', '标题', '内容'],
];

// 点击下拉项选择事件处理函数
function onSelect(value) {
  searchKeyword.value = value;
}
</script>

4. 如果需要在外部监听搜索关键字的变化，可以在setup里使用`watch`：

<script setup>
// 监听搜索关键字变化
watch(searchKeyword, (newValue) => {
  console.log('搜索关键字更新:', newValue);
});
</script>