vue实现商品卡片

Vue 实现商品卡片的方法

基本组件结构

创建一个名为 ProductCard.vue 的单文件组件，包含模板、脚本和样式部分。模板部分定义卡片的布局，脚本部分处理数据逻辑，样式部分定义卡片的外观。

<template>
  <div class="product-card">
    <img :src="product.image" :alt="product.name" class="product-image">
    <h3 class="product-name">{{ product.name }}</h3>
    <p class="product-price">{{ product.price }}</p>
    <button @click="addToCart" class="add-to-cart">加入购物车</button>
  </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 {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  max-width: 200px;
  margin: 10px;
}

.product-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

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

.product-price {
  color: #e63946;
  font-weight: bold;
}

.add-to-cart {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

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

使用动态数据

在父组件中传递商品数据到 ProductCard 组件，并处理购物车逻辑。

<template>
  <div class="product-list">
    <ProductCard 
      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: '商品1', price: '¥100', image: 'https://via.placeholder.com/150' },
        { id: 2, name: '商品2', price: '¥200', image: 'https://via.placeholder.com/150' }
      ]
    };
  },
  methods: {
    handleAddToCart(product) {
      console.log('加入购物车:', product);
    }
  }
};
</script>

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

添加动画效果

通过 Vue 的过渡效果为卡片添加悬停动画，增强用户体验。

<template>
  <div class="product-card" @mouseover="hover = true" @mouseleave="hover = false">
    <transition name="fade">
      <div v-if="hover" class="overlay">查看详情</div>
    </transition>
    <img :src="product.image" :alt="product.name" class="product-image">
    <h3 class="product-name">{{ product.name }}</h3>
    <p class="product-price">{{ product.price }}</p>
    <button @click="addToCart" class="add-to-cart">加入购物车</button>
  </div>
</template>

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

<style scoped>
.product-card {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  max-width: 200px;
  margin: 10px;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: scale(1.05);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

响应式设计

通过媒体查询确保卡片在不同屏幕尺寸下显示良好。

@media (max-width: 768px) {
  .product-card {
    max-width: 150px;
    padding: 10px;
  }

  .product-name {
    font-size: 14px;
  }

  .add-to-cart {
    padding: 6px 12px;
    font-size: 12px;
  }
}

集成 Vuex 管理状态

如果项目使用 Vuex 管理购物车状态，可以通过 Vuex 的 mutations 和 actions 处理购物车逻辑。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    addToCart(state, product) {
      state.cart.push(product);
    }
  },
  actions: {
    addToCart({ commit }, product) {
      commit('addToCart', product);
    }
  }
});

在组件中调用 Vuex 的 action：

<script>
import { mapActions } from 'vuex';

export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  },
  methods: {
    ...mapActions(['addToCart']),
    handleAddToCart() {
      this.addToCart(this.product);
    }
  }
};
</script>

通过以上方法，可以灵活实现一个功能完善且美观的商品卡片组件。