Question

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

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

由于卡片将包含各种内容（尺寸），因此为卡片制作固定尺寸将无法正常工作。

如何在显示按钮前后显示相同尺寸的卡片？

Answer 1

快速修复：您必须先了解按钮高度。然后将其嵌套到使用min-height属性实现的相同高度的元素：

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

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

我认为，此示例演示了您的问题：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我认为这是最优雅的，真正的Vue方式＆＃34;解。此外，使用此解决方案，您无需在...之前知道按钮高度。

＆＃13;

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)
  }
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

2 个答案: