vue实现商品展开合起

实现商品展开与收起功能

在Vue中实现商品的展开与收起功能，可以通过动态控制CSS类或样式，结合Vue的响应式特性来完成。以下是几种常见实现方式：

基于v-show或v-if的切换 通过Vue的指令控制DOM元素的显示与隐藏：

<template>
  <div>
    <button @click="toggleExpand">点击{{ isExpanded ? '收起' : '展开' }}</button>
    <div v-show="isExpanded">
      <!-- 商品详情内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

使用CSS过渡动画 为展开收起添加平滑动画效果：

<template>
  <div>
    <button @click="isExpanded = !isExpanded">切换</button>
    <transition name="slide">
      <div v-show="isExpanded" class="content">
        <!-- 商品内容 -->
      </div>
    </transition>
  </div>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.5s ease;
  max-height: 500px;
}
.slide-enter, .slide-leave-to {
  max-height: 0;
  overflow: hidden;
}
</style>

动态类名绑定 通过class绑定实现样式切换：

<template>
  <div>
    <button @click="toggle">展开/收起</button>
    <div :class="['content', { 'expanded': isExpanded }]">
      <!-- 商品内容 -->
    </div>
  </div>
</template>

<style>
.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}
.content.expanded {
  max-height: 1000px;
}
</style>

列表项展开控制 对于商品列表中的单个项控制：

<template>
  <div v-for="(item, index) in products" :key="index">
    <div @click="toggleItem(index)">{{ item.name }}</div>
    <div v-show="expandedItems.includes(index)">
      {{ item.description }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [...],
      expandedItems: []
    }
  },
  methods: {
    toggleItem(index) {
      const i = this.expandedItems.indexOf(index)
      if (i > -1) {
        this.expandedItems.splice(i, 1)
      } else {
        this.expandedItems.push(index)
      }
    }
  }
}
</script>

实现注意事项

性能优化 对于长列表，建议使用v-show代替v-if，避免频繁的DOM创建销毁。考虑添加防抖处理快速连续点击。

无障碍访问 为按钮添加aria-expanded属性：

<button 
  @click="toggle"
  :aria-expanded="isExpanded.toString()"
>
  {{ isExpanded ? '收起' : '展开' }}
</button>

移动端适配 在移动设备上，考虑添加手势支持或调整动画时长。可以通过CSS媒体查询优化展开区域的最大高度。

以上方案可根据具体需求组合使用，实现更复杂的交互效果。根据项目实际情况选择最适合的实现方式。