当前位置：首页 > VUE

vue实现商品橱窗

2026-02-20 09:50:10VUE

Vue实现商品橱窗的方法

使用Vue实现商品橱窗可以结合组件化开发和状态管理，提升代码的可维护性和复用性。以下是一个完整的实现方案。

数据准备

商品数据通常以数组形式存储，每个商品包含名称、价格、图片等信息。示例数据结构如下：

products: [
  {
    id: 1,
    name: '商品A',
    price: 99,
    image: 'product-a.jpg',
    description: '商品描述...'
  },
  // 更多商品...
]

组件结构

创建商品卡片组件ProductCard.vue，用于展示单个商品信息：

vue实现商品橱窗

<template>
  <div class="product-card">
    <img :src="product.image" :alt="product.name">
    <h3>{{ product.name }}</h3>
    <p>价格: ¥{{ product.price }}</p>
    <button @click="addToCart">加入购物车</button>
  </div>
</template>

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

主页面布局

在主页组件中引入商品卡片并循环展示：

<template>
  <div class="product-gallery">
    <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: [] // 初始为空，可通过API获取
    }
  },
  created() {
    this.fetchProducts()
  },
  methods: {
    fetchProducts() {
      // API调用获取商品数据
      axios.get('/api/products').then(response => {
        this.products = response.data
      })
    },
    handleAddToCart(product) {
      // 处理加入购物车逻辑
    }
  }
}
</script>

样式设计

使用CSS Grid或Flexbox实现响应式布局：

vue实现商品橱窗

.product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.product-card {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

功能扩展

筛选功能：添加计算属性实现价格或分类筛选

computed: {
filteredProducts() {
 return this.products.filter(product => 
   product.price >= this.minPrice && 
   product.price <= this.maxPrice
 )
}
}

分页加载：结合v-infinite-scroll插件实现无限滚动

<div 
v-infinite-scroll="loadMore" 
infinite-scroll-disabled="busy" 
infinite-scroll-distance="10"
>
<!-- 商品列表 -->
</div>

状态管理：对于复杂场景可使用Vuex管理商品和购物车状态

// store.js
export default new Vuex.Store({
state: {
 products: [],
 cart: []
},
mutations: {
 ADD_TO_CART(state, product) {
   state.cart.push(product)
 }
}
})