基于 Vue 3 的筛选卡片组件开发

应用场景介绍

在用户界面设计中，筛选组件是必不可少的元素，它允许用户根据特定的标准过滤和整理信息。在本文中，我们将介绍如何使用 Vue 3 构建一个功能强大的筛选卡片组件，该组件可用于各种应用场景，例如产品目录、博客文章或任务列表。

代码基本功能介绍

我们的筛选卡片组件提供以下基本功能：

• 根据多个标准对数据进行筛选
• 提供复选框和单选按钮等多种输入控件
• 支持动态添加和删除筛选条件
• 提供一个清晰且易于使用的界面

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

1. 组件模板

组件模板定义了组件的布局和结构。我们在一个容器中放置了三个筛选面板，分别用于区域、活动和强度。每个面板都包含一个标题、一个“全部”按钮和一个网格，用于放置筛选选项。

<template>
  <div class="bg-purple-600 h-screen">
    <div class="container mx-auto px-5 py-12">
      <div class="flex items-center justify-between">
        <h2 class="text-white text-2xl font-bold">Choose a Workout</h2>
        <div class="flex items-center space-x-2">
          <van-icon name="filter" class="text-white text-lg" />
          <van-icon name="list" class="text-white text-lg" />
        </div>
      </div>
      <div class="mt-10 grid grid-cols-2 gap-4">
        <!-- 筛选面板 -->
      </div>
    </div>
  </div>
</template>

2. 组件逻辑

在组件逻辑中，我们使用 Vue 3 的 ref 和 reactive 来管理组件状态。我们定义了三个可变状态，分别用于存储区域、活动和强度筛选条件。

const areaOfFocus = ref([])
const activity = ref([])
const intensity = ref([])

我们还定义了一个 options 数组，其中包含区域筛选选项的标签和值。

const options = [
  {
    label: 'Arms',
    value: 'arms'
  },
  // ...
]

3. 筛选条件处理

我们使用 v-model 绑定来监听用户输入，并更新相应的可变状态。例如，当用户单击“手臂”复选框时，我们会将“手臂”添加到 areaOfFocus 数组中。

<van-button round block v-model="areaOfFocus">Arms</van-button>

4. 筛选结果展示

组件不负责展示筛选结果。相反，它通过 emit 事件将筛选条件传递给父组件，由父组件负责处理和展示结果。

emit('update:filters', {
  areaOfFocus: areaOfFocus.value,
  activity: activity.value,
  intensity: intensity.value
})

总结与展望

开发这个筛选卡片组件的过程是一次有益的学习体验。我们了解了如何使用 Vue 3 的响应式系统管理组件状态，如何处理用户输入，以及如何与父组件进行通信。

未来，我们可以考虑以下优化和扩展：

• 添加对嵌套筛选条件的支持
• 提供一个搜索输入，以便用户可以快速查找特定的筛选选项
• 实现拖放功能，允许用户重新排列筛选条件的顺序