如何用vue的directive操作dom获取两个div的高度？

Question

有这样的需求。
有2个div
div A
div B
要获取两个div的高度。
取最大的高度。
然后把最大的高度设置给这2个div。

用vue的directive要怎么来写？

Answer 1

我觉得一个指令控制两个div这个思路可能实现起来有点难度（我目前还不清楚怎么去做）

我的思路是，提供一个指令就行，这个执行接收回调函数，返回本元素的高度。

然后你通过回调函数拿到两个高度之后取最高的，设置到data，这两两个div的高度就都是最高值

Answer 2

如果只是需求让两盒子高度相同（盒子内元素不固定），高度自动的情况下，css就能解决，直接flex布局就行了

Answer 3

不清楚是不是X-Y PROBLEM问题。
如果仅仅是解决同辈元素相同高度的话，flex的确就能解决：
JsBin

.flex{
  display: flex;
}
.flex>div{
  border: 1px solid #ccc;
}
<div class="flex">
    <div>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
    </div>
    <div>2</div>
  </div>

硬要vue指令去做的话，可以传一个参数进去（class,id）
jsbin

<div v-height="height">3</div>
<div class="height"  style="height: 100px;border:1px solid #ccc;">1</div>
<div class="height"  style="height: 200px;border:1px solid #ccc;">2</div>
Vue.directive('height', {
      inserted: function (el, binding, vnnode) {
        let className = binding.expression
        let doms = Array.from(document.getElementsByClassName(className));
        let maxHeight = doms.reduce(function(height, dom) {
          return height > dom.clientHeight ? height : dom.clientHeight
        },el.clientHeight)
        doms.concat(el).forEach(function(dom) {
          dom.style.height = maxHeight + 'px'
        })
        
      },
      componentUpdated: function () {},
      update: function () {},
      bind: function () {},
      unbind: function () {}
    })