Vue 3 组件开发指南：构建一个高级搜索和结果页面

应用场景

本代码用于构建一个高级搜索和结果页面，用户可以在其中根据多种标准（如大陆、特色、价格范围）搜索信息，并查看搜索结果。

代码基本功能

此代码提供了以下基本功能：

• **高级搜索表单：**允许用户根据大陆、特色和价格范围筛选结果。
• **搜索结果列表：**显示满足搜索条件的结果。
• **结果分页：**当结果过多时，提供分页功能。
• **底部导航栏：**提供主页、搜索、地图和个人资料四个选项卡。

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

1. 构建搜索表单

<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
  <div class="flex justify-between">
    <div class="font-bold text-xl">Search</div>
    <div>
      <van-icon name="magnifying-glass" class="text-gray-600" />
    </div>
  </div>
  <div class="mt-4">
    <van-field
      v-model="search"
      placeholder="Search for a place"
      clearable
    />
  </div>
  <div class="mt-4">
    <van-tabs v-model="activeTab">
      <van-tab title="Continent">
        <div class="flex flex-wrap">
          <van-button
            v-for="continent in continents"
            :key="continent"
            :type="continent === 'Europe' ? 'primary' : 'default'"
            >{{ continent }}</van-button
          >
        </div>
      </van-tab>
      <van-tab title="Features">
        <div class="flex flex-wrap">
          <van-button
            v-for="feature in features"
            :key="feature"
            :type="feature === 'Sea' ? 'primary' : 'default'"
            >{{ feature }}</van-button
          >
        </div>
      </van-tab>
    </van-tabs>
  </div>
  <div class="mt-4">
    <van-slider v-model="priceRange" :min="0" :max="1000" />
  </div>
  <div class="mt-4">
    <van-button type="primary" block>Search</van-button>
  </div>
</div>

• 使用 van-field 组件创建搜索框。
• 使用 van-tabs 和 van-button 组件创建大陆和特色选项卡。
• 使用 van-slider 组件创建价格范围选择器。
• 使用 van-button 组件创建搜索按钮。

2. 构建搜索结果列表

<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
  <div class="flex justify-between">
    <div class="font-bold text-xl">Results</div>
    <div>
      <van-icon name="filter" class="text-gray-600" />
    </div>
  </div>
  <div class="mt-4">
    <van-list
      v-model="results"
      :finished="finished"
      :loading="loading"
      @load="onLoad"
    >
      <template #default="{ item }">
        <van-cell :title="item.name" :value="item.address" />
      </template>
    </van-list>
  </div>
</div>

• 使用 van-list 组件创建搜索结果列表。
• 使用 v-model 将结果绑定到 results 响应式数据。
• 使用 :finished 和 :loading 属性控制列表的加载状态。
• 使用 @load 事件处理分页加载。

3. 处理搜索和结果加载

<script lang="tsx" setup>
import { ref, onMounted } from "vue";

const continents = ref(["Europe", "Asia", "America", "Middle East"]);
const features = ref(["Sea", "City", "Culture", "Mountain"]);
const search = ref("");
const activeTab = ref("Continent");
const priceRange = ref([0, 1000]);
const results = ref([]);
const finished = ref(false);
const loading = ref(false);

const onLoad = () => {
  setTimeout(() => {
    results.value = [
      { name: "Result 1", address: "Address 1" },
      { name: "Result 2", address: "Address 2" },
      { name: "Result 3", address: "Address 3" },
    ];
    finished.value = true;
    loading.value = false;
  }, 1000);
};

onMounted(() => {
  onLoad();
});
</script>

• 使用 ref 创建响应式数据，存储搜索条件和结果。
• 使用 onMounted 钩子在组件挂载时加载初始结果。
• 使用 onLoad 方法处理分页加载。

总结与展望

开发这段代码让我学到了 Vue 3 的基本概念和组件开发实践。

经验与收获：

• 使用响应式数据管理组件状态。
• 使用事件处理用户交互。
• 使用第三方组件库（如 Vant）简化开发过程。

未来拓展与优化：

• 集成后端 API 进行实际搜索。
• 添加排序和过滤功能。
• 优化结果列表的性能，支持大量结果的加载。
• 响应式设计，适配不同屏幕尺寸。