这是一个Vue.js等高插件，它提供了一种快速简便的方法来将元素高度设置为相同。

您可以提供一个将按顺序计算的选择器数组，以及一个不应运行插件的大小数组。

安装和下载：

# NPM
$ npm install vue-match-heights --save

使用

向您的应用程序添加vue-match-heights就像其他任何插件一样简单：

import Vue from 'vue';

import VueMatchHeights from 'vue-match-heights';

Vue.use(VueMatchHeights, {
  disabled: [768], // 可选:禁用的默认视图宽度调整大小。每次使用都可以重写吗
});

new Vue({
  el: '#app',
});

该v-match-heights指令现在可用于您的应用程序。此指令应在要设置其高度的元素周围的包装元素上使用。

<div
  class="row"
  v-match-heights="{
    el: ['h3', '.content', '.caption'],  // 要修复的选择器数组
    disabled: [ // 高度数组，其中插件不会设置高度
      767, // 如果提供了一个字符串，它将被用作最大值
      [920, 1200], // 如果提供了一个数组，它将按照这个顺序作为最小-最大界限使用
    ]
  }"
>
  <div class="col-sm-6">
    <div class="thumbnail">
      <img src="http://lorempixel.com/600/400/?1">
      <div class="caption">
        <div class="title">
          <h3>...</h3>
        </div>
        <div class="content">
          ...
        </div>
      </div>
      <div class="buttons">
        ...
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="thumbnail">
      <img src="http://lorempixel.com/600/400/?2">
      <div class="caption">
        <div class="title">
          <h3>...</h3>
        </div>
        <div class="content">
          ...
        </div>
      </div>
      <div class="buttons">
        ...
      </div>
    </div>
  </div>
</div>