时间戳

首页 > 解决方案 > 在 vue 中将卡片堆叠在一起

javascript - 在 vue 中将卡片堆叠在一起

问题描述

我有一个小的 vue 片段（片段有我原来的 v-for 和 v-if 条件，但我无法让它读取数组，所以它现在只是硬编码）

无论如何，它会产生 3 张卡片，一张在另一张之上。我试图弄清楚 vue 中是否有任何内置的东西，我可以让它们像甲板一样堆叠在一起，你只能看到每张卡片顶部的大约 20%，然后单击一个展开它们，像手风琴一样。

我尝试在底部设置负边距，但没有生效。有没有更好的方法来解决这个问题？

export default{
  data() {
    return { 
      copiedUsers:[
        {copied_user_email: "testuser@mail.com"},
        {copied_user_email: "testuser2@mail.com"},
        {copied_user_email: "testuser3@mail.com"}
      ]
      
    }
  }
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid #dee2e6;
border-radius: 0.5rem
margin-bottom:-80px;
}
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

<div id='app'>
 <div v-for="(copy, idx) in copiedUsers" :key="copy.id">
   <div 
 class="card" 
 :style="{ 
   top: idx * 10 + 'px', // <-- dynamic top
   left: idx * 6 + 'px' // <-- dynamic left
}">
   </div>
 </div>
</div>

标签： javascripthtmlcssvue.js

解决方案

您可以使用样式绑定按照自己的方式工作，:style并根据索引添加特定范围。

这是一个了解这个想法的例子：

new Vue({
  el: '#app',
  data: {
  copiedUsers:[
    {copied_user_email: "testuser@mail.com"},
    {copied_user_email: "testuser2@mail.com"},
    {copied_user_email: "testuser3@mail.com"}
   ]
  }
})
.card {
 position: absolute;
 width: 40px;
 height: 65px;
 background-color: #777;
 border: 1px solid #333;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

<div id='app'>
 <div v-for="(copy, idx) in copiedUsers" :key="copy.id">
   <div 
     class="card" 
     :style="{ 
       top: idx * 10 + 'px', // <-- dynamic top
       left: idx * 6 + 'px' // <-- dynamic left
    }">
   </div>
 </div>
</div>

您还可以使用动态margins或paddings. 为了使其易于理解和模板干净，您可以创建一个计算属性。

推荐阅读