Ant Design Vue 搜索卡片功能实现

应用场景

本代码实现了使用 Ant Design Vue 库构建的搜索卡片功能。此功能可用于构建具有搜索框、下拉菜单和列表的交互式搜索界面。

基本功能

该代码的基本功能包括：

提供一个搜索框，用户可以在其中输入搜索查询。
当用户输入搜索查询时，触发搜索操作，并在列表中显示搜索结果。
提供一个下拉菜单，允许用户从预定义选项中进行选择。
允许用户在列表中滚动浏览搜索结果。

功能实现步骤及关键代码分析

1. 引入依赖项

首先，在 Vue 组件中引入必要的 Ant Design Vue 组件和图标：

import { SearchOutlined, DownOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";

2. 定义数据状态

使用 Vue 的 ref() 钩子定义搜索查询和搜索结果列表的数据状态：

const searchValue = ref("");
const listData = ref([
  "Large T-shirts",
  "Women's Sportswears Shoes",
  "Travel Luggages",
  "Men's Stylish Handbag",
  "Jeans & Jaggings",
]);

3. 渲染搜索框

使用 a-input-search 组件渲染搜索框：

<a-input-search
  v-model="searchValue"
  placeholder="What are you looking for?"
  style="width: 200px"
/>

4. 渲染下拉菜单

使用 a-dropdown 和 a-menu 组件渲染下拉菜单：

<a-dropdown>
  <template #overlay>
    <a-menu>
      <a-menu-item>Option 1</a-menu-item>
      <a-menu-item>Option 2</a-menu-item>
      <a-menu-item>Option 3</a-menu-item>
    </a-menu>
  </template>
  <a-button>
    More <a-icon :icon="DownOutlined" />
  </a-button>
</a-dropdown>

5. 渲染搜索结果列表

使用 a-list 组件渲染搜索结果列表：

<a-list
  :dataSource="listData"
  header="Recent Searches"
  renderItem="item"
>
  <template #item="{ item }">
    <a-list-item>
      {item}
    </a-list-item>
  </template>
</a-list>