vue实现商品切换

Vue 实现商品切换功能

商品切换功能通常涉及商品列表的展示、当前选中商品的切换以及相关交互逻辑。以下是实现商品切换的几种常见方法：

使用 v-for 和 v-model 实现基础切换

通过 v-for 渲染商品列表，使用 v-model 或 v-bind:class 来管理当前选中状态。

<template>
  <div class="product-switcher">
    <div 
      v-for="(product, index) in products" 
      :key="index"
      @click="selectProduct(index)"
      :class="{ 'active': currentIndex === index }"
    >
      {{ product.name }}
    </div>
    <div class="product-detail">
      <h3>{{ currentProduct.name }}</h3>
      <p>价格: {{ currentProduct.price }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: '商品A', price: 100 },
        { name: '商品B', price: 200 },
        { name: '商品C', price: 300 }
      ],
      currentIndex: 0
    }
  },
  computed: {
    currentProduct() {
      return this.products[this.currentIndex]
    }
  },
  methods: {
    selectProduct(index) {
      this.currentIndex = index
    }
  }
}
</script>

<style>
.active {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>

使用组件实现更复杂的切换

对于更复杂的商品切换场景，可以将商品拆分为单独组件，通过动态组件或路由实现切换。

<template>
  <div>
    <button @click="showComponent = 'ProductA'">商品A</button>
    <button @click="showComponent = 'ProductB'">商品B</button>

    <component :is="showComponent" />
  </div>
</template>

<script>
import ProductA from './ProductA.vue'
import ProductB from './ProductB.vue'

export default {
  components: {
    ProductA,
    ProductB
  },
  data() {
    return {
      showComponent: 'ProductA'
    }
  }
}
</script>

使用 Vue Router 实现页面级切换

对于需要URL变化的商品切换，可以使用Vue Router。

// router.js
const routes = [
  { path: '/product/:id', component: ProductDetail }
]

<!-- 商品列表 -->
<router-link 
  v-for="product in products"
  :to="'/product/' + product.id"
>
  {{ product.name }}
</router-link>

添加过渡动画效果

为商品切换添加平滑的过渡效果。

<template>
  <transition name="fade" mode="out-in">
    <div :key="currentProduct.id">
      <h3>{{ currentProduct.name }}</h3>
    </div>
  </transition>
</template>

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

使用第三方库实现高级切换

对于更复杂的需求，可以考虑使用如Vue Carousel等第三方库实现带有效果的商品切换。

import { Carousel, Slide } from 'vue-carousel'

export default {
  components: {
    Carousel,
    Slide
  },
  data() {
    return {
      products: [...] // 商品数据
    }
  }
}

<carousel :per-page="3">
  <slide v-for="product in products" :key="product.id">
    <img :src="product.image" />
    <h4>{{ product.name }}</h4>
  </slide>
</carousel>

以上方法可以根据实际项目需求选择使用或组合使用，实现从简单到复杂的各种商品切换场景。