我正在构建一个简单的纸牌游戏,并且在纸牌的底部有这样的一行:
当我单击卡时,它与卡的编号匹配,卡消失了,这是预期的行为。问题是,当它消失时,它不会留下一个空白空间,它只会占用下一张卡片的空白空间,如下所示:
**我正在以这种方式制作组件:**
<template>
<div class="towerLine-wrapper">
<div class="towerLine">
<img
:style="{'left': index * 83 + 'px'}"
v-for="(line, index) in towerLine"
@click="removeCard(line, index)"
:key="line.number"
class="towerLine__image"
:src="line.src"
alt="">
</div>
<tri-pack :deckCards="deckCards" />
</div>
</template>
<script>
import triPack from '../triPack/triPack.vue'
export default {
data () {
return {
currentCard: {}
}
},
props: {
towerLine: {
type: Array,
required: true
},
deckCards: {
type: Array,
required: true
}
},
methods: {
removeCard (line, index) {
this.getCurrentCard()
const firstCardCheck = this.currentCard.type === 1 && line.type === 13
const lastCardCheck = this.currentCard.type === 13 && this.currentCard.type === 1
const otherCardCheck = (line.type + 1 === this.currentCard.type) || (line.type - 1 === this.currentCard.type)
if ((firstCardCheck || lastCardCheck) || otherCardCheck) {
this.towerLine.splice(index, 1)
this.$store.commit('setCurrentCard', line)
}
},
getCurrentCard () {
this.currentCard = this.$store.getters.getCurrentCard
}
},
components: {
triPack
}
}
</script>
<style lang="scss">
.towerLine {
display: flex;
position: relative;
top: -90px;
left: -40px;
&__image {
width: 80px;
height: 100px;
&:not(:first-child) {
position: absolute;
}
}
}
</style>
我知道这是行不通的,因为当我移出一张卡时,索引的变化和它乘以索引时,它会占据相同的位置来占据空白空间,但是我该如何解决这个问题?
有帮助吗?