如何有条件地显示一个元素，保持其占用空间？

Posted 2023-02-22

【中文标题】如何有条件地显示一个元素，保持其占用空间？

【英文标题】：How to conditionally show an element, keeping its occupied space?

【发布时间】：2018-10-03 21:03:57

【问题描述】：

Vue.js 有两个条件关键字：v-if and v-show，它允许基于条件的元素可见或不可见。区别是

不同之处在于v-show 的元素总是 渲染并保留在 DOM 中； v-show 只切换显示 CSS 元素的属性。

我认为它会对不可见元素占用的空间产生影响，但在任何这些情况下，当条件为 false 时，元素占用的空间是无的。

这意味着，例如，在三个元素的跨度中，占据屏幕宽度的 100%，不可见的位置被下一个占据，就像在这个 CSS Grid 示例中一样：

new Vue(
  el: "#app",
  data: 
    visible: true
  ,
  mounted() 
    setInterval(() => this.visible = !this.visible, 1000)
  
)

#app 
  display: grid;
  grid-template-columns: auto auto auto;


#app div 
  border-style: solid;
  border-width: 1;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>one</div>
  <div v-if="visible">two</div>
  <div>three</div>
</div>

是否有一种简单的方法可以隐藏元素的内容（使其不可见），但保留其空间？ （在上面的例子中，中心元素出现和消失 - 但其他两个没有移动）

【问题讨论】：

你可能需要在内部元素上设置一个固定的宽度，或者使用 display: flex 和 justify 之间的内容。

【参考方案1】：

见MDN - CSS visibility，

visibility CSS 属性可以在不影响文档布局的情况下显示或隐藏元素（即，无论元素是否可见，都会为元素创建空间）

所以，使用Vue's dynamic style 将您的表达式绑定到 CSS 可见性。

new Vue(
  el: "#app",
  data: 
    visible: true
  ,
  mounted() 
    setInterval(() => this.visible = !this.visible, 1000)
  
)

#app 
  display: grid;
  grid-template-columns: auto auto auto;


#app div 
  border-style: solid;
  border-width: 1;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>one</div>
  <div :style="visibility: visible ? 'visible' : 'hidden'">two</div>
  <div>three</div>
  visible
</div>

【参考方案2】：

看看这个：https://forum.vuejs.org/t/vue-style-visibility-hidden-on-v-show-how/58293

您可以使用自定义指令来实现它：

Vue.directive('visible', function(el, binding) 
    el.style.visibility = !!binding.value ? 'visible' : 'hidden';
);

然后使用

<div v-visible="your_condition" ... >

【参考方案3】：

使用 opacity = 0 或 1 绑定样式。

new Vue(
  el: "#app",
  data: 
    visible: true
  ,
  mounted() 
    setInterval(() => this.visible = !this.visible, 1000)
  
)

.layout 
  display: grid;
  grid-template-columns: auto auto auto;


.your-column 
  border-style: solid;
  border-width: 1;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div class="layout">
    <div class="your-column">one</div>
    <div class="your-column" :style="'opacity':visible?1:0">two</div>
    <div class="your-column">three</div>
  </div>
</div>

【参考方案4】：

new Vue(
  el: "#app",
  data: 
    visible: true
  ,
  mounted() 
    setInterval(() => this.visible = !this.visible, 1000)
  
)

#app 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;


#app div 
  border-style: solid;
  border-width: 1;


#app div:last-child
  grid-column:3;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>one</div>
  <div v-if="visible">two</div>
  <div>three</div>
</div>