当前位置：首页 > VUE

vue实现商品卡片

2026-01-18 13:45:37VUE

Vue 实现商品卡片

在 Vue 中实现商品卡片可以通过组件化的方式完成，以下是一个完整的实现方案：

商品卡片组件

<template>
  <div class="product-card">
    <div class="product-image">
      <img :src="product.image" :alt="product.name" />
      <span v-if="product.discount" class="discount-tag">
        {{ product.discount }}% OFF
      </span>
    </div>
    <div class="product-info">
      <h3 class="product-name">{{ product.name }}</h3>
      <div class="price-section">
        <span class="current-price">${{ product.price }}</span>
        <span v-if="product.originalPrice" class="original-price">
          ${{ product.originalPrice }}
        </span>
      </div>
      <div class="rating">
        <span v-for="star in 5" :key="star">
          <i :class="star <= product.rating ? 'fas fa-star' : 'far fa-star'"></i>
        </span>
      </div>
      <button class="add-to-cart" @click="addToCart">Add to Cart</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  },
  methods: {
    addToCart() {
      this.$emit('add-to-cart', this.product)
    }
  }
}
</script>

<style scoped>
.product-card {
  width: 250px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  margin: 10px;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discount-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff5722;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.product-info {
  padding: 15px;
}

.product-name {
  margin: 0 0 10px;
  font-size: 16px;
  color: #333;
}

.price-section {
  margin-bottom: 10px;
}

.current-price {
  font-size: 18px;
  font-weight: bold;
  color: #ff5722;
}

.original-price {
  font-size: 14px;
  text-decoration: line-through;
  color: #999;
  margin-left: 8px;
}

.rating {
  color: #ffc107;
  margin-bottom: 15px;
}

.add-to-cart {
  width: 100%;
  padding: 8px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-to-cart:hover {
  background-color: #45a049;
}
</style>

使用商品卡片组件

<template>
  <div class="product-list">
    <product-card 
      v-for="product in products" 
      :key="product.id" 
      :product="product"
      @add-to-cart="handleAddToCart"
    />
  </div>
</template>

<script>
import ProductCard from './ProductCard.vue'

export default {
  components: {
    ProductCard
  },
  data() {
    return {
      products: [
        {
          id: 1,
          name: 'Wireless Headphones',
          price: 99.99,
          originalPrice: 129.99,
          image: 'https://example.com/headphones.jpg',
          rating: 4,
          discount: 20
        },
        {
          id: 2,
          name: 'Smart Watch',
          price: 199.99,
          image: 'https://example.com/watch.jpg',
          rating: 5
        }
      ]
    }
  },
  methods: {
    handleAddToCart(product) {
      console.log('Added to cart:', product)
      // 这里可以添加购物车逻辑
    }
  }
}
</script>

<style>
.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
</style>