我有一个小的 vue 片段(该片段有我原来的 v-for 和 v-if 条件,但我无法让它读取数组,所以现在只是硬编码)
无论如何,它会产生 3 张牌,一张叠一张。我试图弄清楚 vue 中是否有任何内置功能可以让我将它们堆叠在一起,就像一副牌一样,你只能看到每张卡片顶部的大约 20%,然后单击一个以展开它们,就像手风琴一样。
我尝试在底部设置负边距,但没有生效。在 vue 中有没有更好的方法来解决这个问题?
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>
答案 0 :(得分:1)
您可以使用样式绑定 :style
并根据 indeces 添加特定范围。
这里有一个例子来了解这个想法:
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
。为了使其易于理解和模板干净,您可以创建一个计算属性。