Vue中实现卡片堆叠点击展开手风琴效果的实现方案咨询

你之前的实现存在两个基础问题：

1. CSS里border-radius: 0.5rem后漏写分号，导致后续margin-bottom规则直接被浏览器忽略
2. 同时给relative定位的卡片设置top偏移，会和负margin效果叠加，堆叠逻辑混乱

具体实现方案 #

1. 调整JS逻辑，新增激活态控制 #

export default{
  data() {
    return { 
      activeCardIdx: -1, // 记录当前展开的卡片索引，默认-1为全部收起
      copiedUsers:[
        {id: 1, copied_user_email: "testuser@mail.com"},
        {id: 2, copied_user_email: "testuser2@mail.com"},
        {id: 3, copied_user_email: "testuser3@mail.com"}
      ]
    }
  },
  methods: {
    // 点击卡片切换展开/收起状态
    toggleCard(idx) {
      this.activeCardIdx = this.activeCardIdx === idx ? -1 : idx
    }
  }
}

2. 重写CSS，改用绝对定位控制堆叠 #

用绝对定位脱离文档流，避免margin和定位冲突，加过渡动画实现丝滑切换：

/* 外层容器给相对定位，作为卡片定位的参照 */
.card-container {
  position: relative;
  min-height: 400px; /* 高度需要覆盖展开后所有卡片的总高度 */
}
.card {
  position: absolute;
  width: 100%;
  height: 200px; /* 固定卡片高度，20%露出区域就是40px */
  display: flex;
  flex-direction: column;
  padding: 1rem;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  box-sizing: border-box;
}

3. 修改HTML模板，绑定动态样式和点击事件 #

通过索引判断计算每个卡片的top偏移，实现堆叠+手风琴效果：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

<div id='app'>
  <div class="card-container">
    <div 
      v-for="(copy, idx) in copiedUsers" 
      :key="copy.id"
      class="card" 
      @click="toggleCard(idx)"
      :style="{ 
        zIndex: idx + 1, // 索引越大的卡片层级越高，视觉上后面的压前面的
        top: (
          idx <= activeCardIdx 
          ? idx * 40 // 激活卡片及上方的卡片保持40px间隔，仅露顶部
          : 200 + activeCardIdx * 40 + (idx - activeCardIdx - 1) * 40 // 激活卡片下方的卡片下移，露出激活卡片完整内容
        ) + 'px',
        left: idx * 6 + 'px' // 保留你原来的横向偏移，做出错落的堆叠感
      }"
    >
      <p>{{ copy.copied_user_email }}</p>
      <!-- 其余卡片内容写在这里 -->
    </div>
  </div>
</div>

这个方案不需要依赖第三方组件，纯Vue动态样式+CSS过渡就能实现你要的效果，点击任意卡片都会展开完整内容，其余卡片保持堆叠露出顶部的状态。

内容的提问来源于stack exchange，提问作者Geoff_S