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

1. 安装vant组件库：在项目中执行npm install vant@next安装vant组件，next是关键字，表示安装最新的vant组件。

2. 引入vant：在Vue组件中引入vant，以按钮为例

  <template>
     <van-button type='default' round icon='search' size='medium' @click='show'>
        搜索
     </van-button>
     <van-dropdown-menu
        :visible.sync='visible'
        >
        <van-dropdown-item>
          <van-field label='sousuo' placeholder='请输入搜索内容'></van-field>
          </van-dropdown-item>
        </van-dropdown-menu>
   </template>

  <script>
   import {ref} from 'vue'
   import {VanDropdownMenu, VanDropdownItem, VanField, VanButton} from 'vant'
   export default{
      name: 'DropdownDemo',
      components: {
        VanDropdownMenu,
        VanDropdownItem,
        VanField,
        VanButton
      },
      setup(){
        const visible = ref(false);
        const show = ()=>{
           visible.value = !visible.value;
        }
        return {
          visible,
          show
        }
      }
   }
   </script>

3. 样式调整：后面还可以加上一些样式调整，例如边框色、背景色、菜单宽度等。示例如下：

   <style>
    .van-dropdown-menu__dropdown {
      background-color: #fff;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
      border: 1px solid #cfcfcf;
      border-radius: 4px;
      width: 80vw;
      max-width: 600px;
    }
    .van-dropdown-menu__title {
      border: 1px solid #cfcfcf;
      background-color: #fff;
      color: #666;
      border-radius: 4px;
    }
    .van-field {
      background-color: #fafafa;
      border-color: #dcdfe6;
      border-radius: 1.2rem;
      font-family: sans-serif;
      font-size: 0.6rem;
      color: #000;
      height: 1.6rem;
      line-height: 1.6rem;
      padding: 0 0.5rem;
      margin: 0 2vw;
    }
   </style>

这样就可以实现基于vue3使用vant下拉菜单实现搜索了。