VueJS (элемент пользовательского интерфейса) → div с абсолютным позиционированием в относительном div на v-for

Я пытаюсь отобразить список элементов <el-card>, к которым я применяю transition-group. У меня есть задняя и передняя <el-card>, которые переворачиваются при нажатии кнопки.

Чтобы переход с переворотом выглядел хорошо, мне нужно, чтобы карты были в таком стиле: position: absolute; top: 0; left: 0 но проблема в том, что все карты сложены.

Если я удалю этот стиль, все карты будут отображаться рядом, но эффект переворота будет иметь нежелательное поведение: элемент back будет виден под элементом front.

Пример можно найти здесь.

Я ищу помощь, чтобы решить эту проблему.

Спасибо.

Майкл


vue.js css element-ui
person Michael Arbib    schedule 15.04.2018    source источник
comment
Я не понимаю, что значит look good. Если вы установите все карты на 0,0, они будут на 0,0. Что вы пытаетесь достичь?   -  person Jorjon    schedule 16.04.2018
comment
На самом деле переход мне кажется удачным (просто переворачивание карты). Моя проблема в том, что я хочу, чтобы мои карты не складывались. Возможно, вы не видели, но в примере есть 3 сложенные карты, и я хочу, чтобы они были рядом.   -  person Michael Arbib    schedule 16.04.2018
comment
Вы позиционируете их абсолютно, поэтому, конечно, они будут сложены. Родитель-оболочка не имеет position: relative, поэтому все они будут позиционированы абсолютно относительно элемента <body>.   -  person Terry    schedule 16.04.2018

Ответы (2)


arrow_upward
3
arrow_downward

Это связано с тем, что все передние и задние элементы карты расположены абсолютно относительно элемента <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.

Дополнительное примечание: вы все равно поймете, что ваш пример остается неверным, в том смысле, что переворачивание карты перевернет все карты. Это связано с тем, что вы сохраняете состояние переворачивания в экземпляре родительского приложения, а не на отдельных уровнях карты. Я предлагаю вам создать дочерний компонент для каждой карты, чтобы вы могли сохранять их перевернутые состояния по отдельности.

person Terry    schedule 16.04.2018

arrow_upward
0
arrow_downward

Ответ Терри был точным. Я просто хочу добавить полный пример для рабочей функциональности.

Поскольку у вас уже был объявлен класс .flipper, я использовал его для добавления блока position:relative:

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

Помните, что для работы position:relative необходимо задать размер. В противном случае, поскольку внутри .flipper нет элемента in-flow, его размер будет равен 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

person Jorjon    schedule 17.04.2018