基于 Vue.js 的导航侧边栏卡片组件

应用场景

本组件适用于需要在 Web 应用中实现可伸缩导航侧边栏的场景，例如管理后台、内容管理系统或电子商务网站。

基本功能

该组件提供了一个可伸缩的侧边栏，其中包含用户头像、姓名、导航链接、热门项目和日本料理等内容。用户可以点击导航链接或热门项目图像来访问相应页面。

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

1. 创建模板 首先，在 Vue.js 模板中创建侧边栏组件的模板结构：

<template>
  <div class="flex flex-col h-screen bg-gray-100">
    <div class="flex items-center justify-between px-4 py-6 bg-white border-b border-gray-200">
      <!-- 用户信息 -->
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://source.unsplash.com/random/40x40" alt="" />
        <div class="font-semibold text-gray-900">Florence Bean</div>
      </div>
      <!-- 退出按钮 -->
      <div>
        <button class="px-4 py-2 text-sm font-semibold text-white bg-yellow-500 rounded-md">Log out</button>
      </div>
    </div>
    <div class="flex-1 overflow-y-auto">
      <!-- 导航链接 -->
      <div class="px-4 py-6">
        <div class="flex items-center justify-between">
          <h2 class="text-xl font-semibold text-gray-900">Navigation</h2>
          <a href="#" class="text-sm font-medium text-yellow-500">See all</a>
        </div>
        <div class="mt-4 grid grid-cols-4 gap-4">
          <!-- 导航链接项目 -->
          <div class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-md">
            <img class="w-10 h-10 mb-2" src="https://source.unsplash.com/random/40x40" alt="" />
            <span class="text-sm font-medium text-gray-900">Home</span>
          </div>
          <!-- ...其他导航链接项目 -->
        </div>
      </div>
      <!-- 热门项目 -->
      <div class="px-4 py-6">
        <div class="flex items-center justify-between">
          <h2 class="text-xl font-semibold text-gray-900">Popular Items</h2>
          <a href="#" class="text-sm font-medium text-yellow-500">See all</a>
        </div>
        <div class="mt-4 grid grid-cols-2 gap-4">
          <!-- 热门项目项目 -->
          <div class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-md">
            <img class="w-20 h-20 mb-2" src="https://source.unsplash.com/random/80x80" alt="" />
            <div class="text-sm font-medium text-gray-900">Nasi Goreng</div>
            <div class="text-sm font-medium text-gray-500">Rp. 100.000</div>
          </div>
          <!-- ...其他热门项目项目 -->
        </div>
      </div>
      <!-- 日本料理 -->
      <div class="px-4 py-6">
        <div class="flex items-center justify-between">
          <h2 class="text-xl font-semibold text-gray-900">Japanese Food</h2>
          <a href="#" class="text-sm font-medium text-yellow-500">See all</a>
        </div>
        <div class="mt-4 grid grid-cols-2 gap-4">
          <!-- 日本料理项目 -->
          <div class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-md">
            <img class="w-20 h-20 mb-2" src="https://source.unsplash.com/random/80x80" alt="" />
            <div class="text-sm font-medium text-gray-900">Sushi</div>
            <div class="text-sm font-medium text-gray-500">Rp. 100.000</div>
          </div>
          <!-- ...其他日本料理项目 -->
        </div>
      </div>
    </div>
  </div>
</template>

2. 编写脚本 在组件的脚本部分，使用 Vue.js 的 ref API 来管理动态数据，例如热门项目和日本料理数据：

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

const popularItems = ref([
  {
    name: "Nasi Goreng",
    price: "Rp. 100.000",
    image: "https://source.unsplash.com/random/80x80",
  },
  // ...其他热门项目数据
]);

const japaneseFood = ref([
  {
    name: "Sushi",
    price: "Rp. 100.000",
    image: "https://source.unsplash.com/random/80x80",
  },
  // ...其他日本料理数据
]);
</script>

3. 样式 在样式部分，使用 CSS 来定义组件的样式，包括颜色、字体和布局：

<style>
.bg-yellow-500 {
  @apply bg-yellow-500;
}
</style>

总结与展望

经验与收获 通过开发这个组件，我学到了如何使用 Vue.js 的 ref API 来管理动态数据，并通过模板和样式来创建可复用的组件。

未来拓展与优化 未来可以考虑添加以下功能来拓展和优化此组件：

• 添加搜索功能，允许用户搜索导航链接、热门项目和日本料理。
• 允许用户自定义导航链接和热门项目。
• 集成外部 API 来获取实时数据，例如天气或新闻。
• 使用响应式设计，使组件能够适应不同的屏幕尺寸。