javascript - 在使用 vue.js 有条件地在其中显示按钮之前和之后保持父元素的大小相同

Question

使用 vue.js（和quasar 框架），我有一个卡片组件。触发事件时，会显示卡片底部的按钮。当按钮出现时，卡片的大小会由于添加的按钮的高度而增加。我觉得这很难看，并且希望卡片的大小在有按钮之前和之后是相同的。

我在添加按钮之前尝试了一些<br>以补偿高度差，但这很笨拙并且当我使用淡入为按钮的外观设置动画时无法正常工作，例如

由于卡片将包含各种内容（大小），因此为卡片制作固定大小并不会真正起作用。

如何在显示按钮之前和之后获得相同大小的卡片？

Answer 1

快速修复：您之前必须知道按钮高度。然后将其嵌套到与min-height属性相同高度的元素：

<div id="button-container" style="min-height: /* your button height */">
  <button>Hidden yet</button>
</div>

这不是很优雅的方式。正如@musicformellons 在评论中所建议的那样，仅当您无法使用visibility: hiddenon 按钮而不是时才使用它。display: none

我认为，这个例子说明了你的问题：

new Vue({
  el: '#app',
  data: {
    canShow: false
  },
  methods: {
    toggleButton () {
      this.canShow = !this.canShow
    }
  },
  created () {
    setInterval(function () {
      this.toggleButton()
    }.bind(this), 500)
  }
})

.bordered {
  position: absolute;
  border: 2px solid black;
}

<div id="app">
  <div class="bordered">
    <p>Lorem Ipsum, bla, bla, bla...</p>
    <button v-if="canShow">I am just troublemaker</button>
  </div>
</div>

<script src="https://unpkg.com/vue"></script>

而且我认为这是最优雅、“真正的 Vue 方式”的解决方案。此外，使用此解决方案，您之前不需要知道按钮高度......

new Vue({
  el: '#app',
  data: {
    visibility: false
  },
  methods: {
    toggleButton () {
      this.visibility = !this.visibility
    },
    logIt () {
      console.log('button clicked')
    }
  },
  created () {
    setInterval(function () {
      this.toggleButton()
    }.bind(this), 1000)
  }
})

.bordered {
  position: absolute;
  border: 2px solid black;
}
.animate-me {
  transition: all .4s;
}
.is-hidden {
  opacity: 0;
}

<div id="app">
  <div class="bordered">
    <p>Lorem Ipsum, bla, bla, bla...</p>
    <!-- Render it always, but change visibility as needed instead --> 
    <button
      class="animate-me"
      :class="{'is-hidden': visibility}"
      @click="logIt"
      :disabled="visibility"
    >
      I am just troublemaker
    </button>
  </div>
</div>

<script src="https://unpkg.com/vue"></script>

Answer 2

你可以给按钮position: absolute和卡片的css position: relative，然后摆弄bottom; left; top; right;按钮的位置设置。