Vue.js 中实现喜好选择器卡片

应用场景

在很多应用程序中，用户需要从一组选项中选择自己的喜好。例如，在购物网站上，用户可以根据自己的喜好过滤产品列表。使用喜好选择器卡片，可以为用户提供一种简单直观的方式来选择他们的喜好。

基本功能

这个 Vue.js 组件提供了一个喜好选择器卡片，允许用户从一组选项中选择他们的喜好。它具有以下功能：

• 显示一组选项，每个选项包含一个图标和一个名称。
• 允许用户通过单击选项来选择和取消选择喜好。
• 提供一个数组，其中包含用户选择的喜好 ID。

功能实现

1. 组件模板

<template>
  <div class="bg-gray-900 h-screen flex flex-col items-center justify-center">
    <div class="bg-white rounded-lg shadow-lg w-11/12 md:w-1/2 lg:w-1/3">
      <div
        class="flex justify-between items-center p-4 border-b border-gray-200"
      >
        <h1 class="text-xl font-semibold">What do you like?</h1>
        <div class="flex items-center space-x-2">
          <button class="text-sm font-medium text-gray-500">PREV</button>
          <button class="text-sm font-medium text-indigo-500">NEXT</button>
        </div>
      </div>
      <div class="p-4 space-y-4">
        <!-- 选项列表 -->
        <div v-for="like in likeList" :key="like.id" class="flex items-center space-x-4">
          <div class="flex-shrink-0">
            <img
              class="w-10 h-10 rounded-full"
              :src="`https://source.unsplash.com/random/100x100?${like.icon}`"
              :alt="like.name"
            />
          </div>
          <div class="flex-1">
            <h3 class="text-lg font-medium">{{ like.name }}</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

2. 组件脚本

<script lang="tsx" setup>
import { ref } from 'vue'

const likeList = [
  // 选项数据
]

const selectedLikes = ref([])

const handleSelectLike = (like) => {
  // 处理喜好选择
}
</script>

3. 关键代码分析

• likeList：这是一个数组，其中包含所有可供用户选择的选项。每个选项是一个对象，包含一个 ID、一个名称和一个图标名称。
• selectedLikes：这是一个响应式数组，用于跟踪用户选择的喜好 ID。
• handleSelectLike：这是一个函数，当用户单击选项时调用。它检查选项是否已选择，并相应地更新 selectedLikes 数组。

总结与展望

开发这段代码的过程让我深入了解了 Vue.js 中响应式状态管理和事件处理。它还让我对如何创建可重用且可定制的组件有了更深入的理解。

未来，该卡片功能可以进一步扩展和优化，例如：

• 添加搜索功能，以便用户可以轻松找到所需的选项。
• 允许用户对选项进行排序和过滤。
• 提供更多自定义选项，例如更改图标和字体大小。