vant 模糊搜索框 vue3

Vant是一个轻量级、模块化的Vue UI组件库，它提供了一套美观、易用且高度响应式的组件解决方案。其中的模糊搜索框（Vant Search）在 Vue3 中用于创建支持自动完成和搜索建议的功能。这个组件允许用户输入文本时实时过滤匹配的结果，并且通常配合下拉选项一起使用。

在使用 Vant 的 Search 组件时，首先需要安装依赖，然后在 Vue 组件模板中引入并设置它的基本属性，如 value（初始值）、debounce-time（延迟搜索的时间）等。例如：

<template>
  <van-search v-model="searchValue" placeholder="请输入搜索内容" @input="handleSearchChange"></van-search>
</template>

<script>
import { VanSearch } from "vant";

export default {
  components: {
    VanSearch,
  },
  data() {
    return {
      searchValue: "",
    };
  },
  methods: {
    handleSearchChange(value) {
      this.searchResults = this.filterData(value); // 根据搜索值过滤数据
    },
  },
};
</script>

在这个例子中，`filterData` 是自定义的一个函数，用于处理数据过滤逻辑。当用户输入变化时，会触发 `handleSearchChange` 方法更新搜索结果。