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

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

用vue的directive要怎么来写?

回答:

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

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

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

回答:

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

回答:

不清楚是不是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 () {}
    })

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注