Question

我正在使用VueJS在“砖石”布局中渲染高度可变的动态组件，但是当高度不能完全对齐时，这通常会产生难看的空间。我希望使用一个库来处理此问题，但是不幸的是，选项卡组件的宽度也是可变的，这意味着它们都无法正常工作。

我有：

Vue 2.5
Bootstrap 3（已锁定，无法升级到4）

示例代码（JSFiddle）：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app" class="container">
    <button v-on:click="currentWidth += 50">Increase Parent Width</button>
    <button v-on:click="currentWidth -= 50">Decrease Parent Width</button>
    <div class="parent pt1" v-bind:style="{width: currentWidth + 'px'}">
        <ul class="nav nav-tabs" role="tablist">
            <li v-for="(tab, tabIndex) in tabs" role="presentation" v-bind:class="{active: tabIndex == selectedTab}">
                <a v-bind:href="tab.name" role="tab" data-toggle="tab" v-on:click="selectedTab = tabIndex">{{tab.name}}</a>
            </li>
        </ul>
        <div class="tab-content">
            <div v-for="(tab, tabIndex) in tabs" role="tabpanel" v-bind:id="tab.name" class="tab-pane p1" v-bind:class="{active: tabIndex == selectedTab}">
                <div class="row">
                    <div v-for="dataPoint in tab.data" class="col-xs-6 blue">
                        <div class="green b1 vc text-center" v-bind:style="{height: randomHeight()}">
                            <h1>{{dataPoint}}</h1>
                        </div>
                        <br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: function() {
      return {
        selectedTab: 0,
        currentWidth: 500,
        tabs: [{
          name: 'tab1',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
        }, {
          name: 'tab2',
          data: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
        }]
      }
    },
    methods: {
      randomHeight: function() {
        return ((Math.random() * 200) + 75) + 'px'
      }
    }
  })
</script>

<style>
  .p1{
    padding: 1em;
  }
  .pt1{
    padding-top: 1em;
  }
  .b1{
    border: 1px solid black;
  }
  .vc{
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }
  .blue{
    background-color: lightblue;
  }
  .green{
    color: black;
    background-color: lightgreen;
  }
</style>

我尝试了多个不同的砌体库，但没有成功：

Masonry（jQuery）-无效
Vue-Masonry（适用于VueJS的jQuery Masonry）-在加载时有效，但是当制表符组件的宽度改变时会中断
Salvattore（JS）-无效
Vue-Masonry-CSS（VueJS）-不起作用（JSFiddle）

我真的不知道还有什么其他好的解决方案可以解决这种尴尬的格式设置。还有其他方法可以使我的元素在网格中很好地对齐吗？

Answer 1

我最终通过切换到两个固定的Bootstrap列解决了这个问题，这意味着我可以在每一列中准确地填充一半的元素。由于这些柱子没有堆叠在一起，所以一切都很好。

这是一个如何将元素数组拆分为两个显示的示例：

splitItems: function(itemCategory) {
  let itemArray = Object.keys(this.items[itemCategory])
  let split = [[], []]
  let alternator = 0
  itemArray.forEach(item => {
    if (this.items[itemCategory][item] !== false) {
      split[alternator].push(item)
      alternator = Math.abs(alternator - 1)
    }
  })
  return split
}

然后，您只需运行嵌套的v-for即可分别渲染每一列。

甚至可以使用VueJS和Bootstrap Tabs进行响应式砌筑吗？

1 个答案: