VueJS（元素 UI）-> v-for 上相对 div 中的绝对定位 div答案

【问题标题】：VueJS (Element UI) -> absolute positioned div in relative div on v-forVueJS（元素 UI）-> v-for 上相对 div 中的绝对定位 div
【发布时间】：2018-09-25 13:48:17
【问题描述】：

我尝试呈现一个<el-card> 项目列表，我对其应用了transition-group。我有一个前后 <el-card> 在单击按钮时会翻转。

为了让翻转过渡看起来不错，我需要卡片具有这种样式：position: absolute; top: 0; left: 0 但问题是所有卡片都堆叠在一起。

如果我删除此样式，所有卡片会并排显示，但翻转效果会出现不良行为：back 项目在 front 项目下可见。

你可以找到一个例子here。

我正在寻求帮助来解决这个问题。

谢谢。

迈克尔

【问题讨论】：

我不明白look good 是什么意思。如果您将所有卡片设置为0,0，它们将位于0,0。你想完成什么？
实际上，过渡对我来说看起来不错（只是翻牌）。我的问题是我不希望我的卡片堆叠。您可能没有看到，但示例中有 3 张堆叠的卡片，我希望它们并排
您将它们绝对定位，所以它们当然会被堆叠起来。包装父级没有position: relative，因此它们都将绝对相对于<body> 元素定位。

标签： css vue.js element-ui

【解决方案1】：

这是因为卡片的所有前后元素都相对于<body> 元素绝对定位。没有一个父母有position: relative，所以他们当然都会出现在页面的坐标（0,0）处。

您想要的是在父元素上实际使用position: relative，最好是在每张卡片级别上。给父类一个类，方便选择：

<div class="card" v-for="card in cards" v-bind:key="card">

然后你为父级分配一个固定的宽度和高度（这是180px，因为你已经为卡的正面/背面定义了相同的），并为它分配position: relative：

.card {
  position: relative;
  width: 180px;
  height: 180px;
}

概念验证修复：https://codesandbox.io/s/xjq08j5n1p

旁注：您仍然会意识到您的示例仍然存在问题，因为翻转卡片将翻转所有卡片。这是因为您将翻转状态存储在父应用程序实例上，而不是单个卡片级别。我建议您为每张卡片创建一个子组件，以便您可以单独存储它们的翻转状态。

【讨论】：

【解决方案2】：

Terry's answer 非常准确。我只想添加工作功能的完整示例。

由于您已经声明了 .flipper 类，我用它来添加 position:relative 块：

.flipper {
  position: relative;
  width: 180px;
  height: 180px;
}

请记住，要使position:relative 起作用，必须设置大小。否则，由于.flipper 内部没有流入元素，其大小将为0。

另外，设置孩子的适当宽度

.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
}

我们需要100%，因为我们已经在父级上设置了宽度。

我将flipCards 转换为布尔数组，并修改了flipCardSwitch 函数。

flipCardSwitch: function(index) {
  // needed because of https://vuejs.org/v2/guide/list.html#Caveats
  this.$set(this.flipCard, index, !this.flipCard[index]);
}

当然，你需要更新on-click。

@click="flipCardSwitch(i)"

工作代码： https://codesandbox.io/s/71512v9qvx

【讨论】：