Vue.js 餐馆菜单卡片功能

应用场景

本代码适用于需要在网站或应用程序中展示餐馆菜单的场景。它提供了一种简洁、响应式的方式来呈现菜品信息，包括名称、描述、价格和图片。

基本功能

此代码的主要功能包括：

使用 Vue.js 响应式框架创建交互式菜单卡片
从 JavaScript 数据源动态加载菜品信息
响应式设计，可在各种设备上流畅显示

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

1. 创建 Vue.js 组件

首先，我们需要创建一个 Vue.js 组件来封装菜单卡片功能。在这个组件中，我们使用 ref 来管理数据，并在 setup 函数中初始化菜品数据。

<template>
  <div class="grid grid-cols-1 gap-4">
    <div v-for="item in data" :key="item.id">
      <MenuCard :item="item" />
    </div>
  </div>
</template>

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

const data = ref([
  {
    id: 1,
    name: 'Chicken Teriyaki',
    description: 'with steamed rice and vegetables',
    price: 12.99,
    image: 'https://source.unsplash.com/random/100x100'
  },
  // ...
])
</script>

2. 定义 MenuCard 组件

接下来，我们需要定义一个 MenuCard 组件来渲染单个菜品信息。在这个组件中，我们使用插槽来显示菜品名称、描述和价格。

<template>
  <div class="flex items-center justify-between p-4 border border-gray-200 rounded-md">
    <div class="flex items-center space-x-4">
      <img :src="item.image" alt="" class="w-12 h-12 rounded-full" />
      <div class="flex flex-col space-y-1">
        <h2 class="text-sm font-semibold text-gray-700">
          <slot name="name">{{ item.name }}</slot>
        </h2>
        <span class="text-xs text-gray-500">
          <slot name="description">{{ item.description }}</slot>
        </span>
      </div>
    </div>
    <div class="text-sm font-semibold text-gray-700">
      <slot name="price">{{ item.price }}</slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item']
}
</script>

3. 使用插槽显示动态内容

在父组件中，我们可以使用插槽向 MenuCard 组件传递动态内容。例如，我们可以使用 v-slot 指令在 MenuCard 组件中显示菜品名称：

<MenuCard :item="item">
  <template #name>{{ item.name }}</template>
</MenuCard>

4. 响应式设计

为了使菜单卡片在各种设备上流畅显示，我们使用 CSS 的 flexbox 和 grid 布局来创建响应式设计。这确保了菜品信息在不同屏幕尺寸下自动调整大小和重新排列。

.grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}