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

Question

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

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

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

如何让显示按钮前后的卡片大小相同？

Answer 1

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

Answer 2

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

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

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

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

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>

我认为这是最优雅的 "true Vue way" 解决方案。此外，使用此解决方案，您之前无需知道按钮高度...

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>

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

Keep a parent element the same size before and after conditionally showing a button in it with vue.js

javascript

html

css

vue.js

quasar-framework