使用 Vue 构建一个带有尺寸选择器的产品详情页面

应用场景介绍

本代码示例展示了如何使用 Vue 构建一个交互式产品详情页面，其中包含一个用于选择产品尺寸的下拉菜单。此页面可以集成到电子商务网站中，为用户提供有关产品详细信息和可供选择的尺寸的信息。

代码基本功能介绍

此代码实现了一个带有以下功能的产品详情页面：

• 产品图片展示
• 产品标题、描述和价格信息
• 用于选择产品尺寸的下拉菜单
• 添加到购物袋按钮

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

1. HTML 模板

<template>
  <div class="product-detail-page">
    <div class="product-detail-page__main-image">
      <img :src="product.image" alt="Product image" />
    </div>
    <div class="product-detail-page__content">
      <h1 class="product-detail-page__title">{{ product.name }}</h1>
      <p class="product-detail-page__description">{{ product.description }}</p>
      <p class="product-detail-page__price">{{ product.price }}</p>
      <div class="product-detail-page__size">
        <label for="size">Size</label>
        <select v-model="size" @change="updateSize">
          <option v-for="size in product.sizes" :key="size" :value="size">{{ size }}</option>
        </select>
      </div>
      <button class="product-detail-page__add-to-bag" @click="addToCart">Add to bag</button>
    </div>
  </div>
</template>

HTML 模板定义了页面结构，包括产品图片、内容和尺寸选择器。

2. Vue 脚本

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

const product = {
  image: 'https://source.unsplash.com/random/300x400',
  name: 'Ultraboost Shoes',
  description: 'The Ultraboost shoes are the perfect running shoes for any runner looking for a comfortable and stylish shoe. With their unique cushioning system, these shoes will help you run longer and faster.',
  price: '$180.00',
  sizes: [7, 8, 9, 10, 11, 12]
}

const size = ref(7)

const updateSize = (e) => {
  size.value = e.target.value
}

const addToCart = () => {
  // Add the product to the shopping cart using a service or API
}
</script>

Vue 脚本提供了产品的详细信息、尺寸选项以及用于更新所选尺寸和将产品添加到购物袋的函数。

3. CSS 样式

<style>
.product-detail-page {
  /* Styling for the product detail page */
}

.product-detail-page__main-image {
  /* Styling for the product image */
}

.product-detail-page__title {
  /* Styling for the product title */
}

.product-detail-page__description {
  /* Styling for the product description */
}

.product-detail-page__price {
  /* Styling for the product price */
}

.product-detail-page__size {
  /* Styling for the product size selector */
}

.product-detail-page__add-to-bag {
  /* Styling for the add to bag button */
}
</style>

CSS 样式提供了页面元素的样式，包括布局、字体和颜色。

总结与展望

开发这段代码过程中的经验与收获

• 了解了如何使用 Vue 构建交互式 Web 页面。
• 学会了如何使用 ref 管理组件状态。
• 掌握了 Vue 事件处理的最佳实践。

未来该卡片功能的拓展与优化

• 集成产品评论和评分系统。
• 添加产品图片轮播。
• 优化移动设备上的响应式设计。