vue中for循环出来的dom元素如何监听各自的宽高变化

前言

一：基于vue.js，简化场景为在v-for循环出来的动态表格或者其他dom元素，需要监听其高度（宽度变化同理）变化以执行对应操作。
二：做过一些尝试，最终选用了vue自定义指令来完成相关需求，这里引用官网对自定义指令的描述：

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0
中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

---

官网自定义指令链接：https://cn.vuejs.org/v2/guide/custom-directive.html#ad

一、最终效果预览

v-for循环出来的一些左右具有对应关系的元素，右边实际为表格，图中左右模块其实外侧都各自还有很多元素，他们没有共同的父级元素，因此没办法直接继承高度变化。每一个item的右侧更改，左侧的模块需要同步高度变化，但不影响其他item的高度。
如下录制的gif图所示

二、解决问题的过程

1.添加vue自定义指令(注意与mounted同级)

代码如下（示例）：

  directives: {
    resize: {
      // 指令的名称
      bind (el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        console.log(el, '绑定', binding)
        let height = ''
        let  targetId=''
        function isReize () {
          const style = document.defaultView.getComputedStyle(el)
          if (height !== style.height) {
            binding.value({ height: style.height,targetId:el.id }) 
          height = style.height
        }
        el.__vueSetInterval__ = setInterval(isReize, 300)
      },
      unbind (el) {
        console.log(el, '解绑')
        clearInterval(el.__vueSetInterval__)
      }
    }
  },

1、由于没有共同的父级，高度无法自动继承。
2、由于是动态的组，且单页面存在多个v-for循环出来的数据。不能混淆操作。

2.在方法里执行高度动态变化对应的操作

代码如下：

     DomResize (data) {
      console.log('height:', data.height, '   需要监听的dom高度改变')
      console.log('targetId:', data.targetId, '   domid对应关系')
      let leftDom = document.getElementById(`radius_item${data.targetId}`)
      leftDom.style.height = data.height
    },

这里使用了动态id, 其实使用动态ref也是一样的，看个人习惯。

3.需要被监听的dom元素和需要执行对应操作的dom元素里绑定动态id

    <div class="item" v-for="(item, index) in 4" :key="item + index">
      <div class="left" :id="'radius_item' + item + '' + index"></div>
      <div class="right" v-resize="DomResize" :id="item + '' + index">
        <el-button size="mini" type="primary" @click="add(item + '' + index)"
          >增加高度</el-button
        >
        <el-button size="mini" type="primary" @click="reduce(item + '' + index)"
          >减少高度</el-button
        >
      </div>
    </div>

这里为了演示方便，尽量简化了场景，真实从后台拿来的数据，尽量使用具有唯一性的id和下标等累加匹配，保证要监听的动态变化高度或者宽度的dom元素的id一定要是唯一的，同理，需要对应执行一些相关操作的dom也需要保证绑定的动态id具有唯一性

总结

1，虽然vue项目的数据响应式更新非常好用，但是依然不可避免的要进行一些dom操作。像使用etchrs在一些不同分辨率宽高适配变化的时候，图表的一些比例变化等情况，页面布局稍复杂后，一个区域的高度动态变化，另一个与此没有共同父级，无法继承高度的区域也需要对应更改的时候，都需要对dom宽高进行监听。
2.本文的场景更适合v-for循环出来的动态dom元素的宽高变化等监听，如果页面就只显示一个表单或者需要监听的dom元素，也可以使用elment-ui的一个插件来实现，npm i element-resize-detector(相关文章很多，这里不再多做介绍)。
3.解决方案有很多，包括div的resize事件，定时轮询等等，感兴趣的可以自行查阅使用，各有优劣，大家可以查阅后根据自己的实际需求场景来选用。
4：发文更多是为了记录解决问题的思路和实现过程，加深印象。如有错误可指出更正。
最后，附上完整demo代码

<template>
  <div class="demo">
    <div class="item" v-for="(item, index) in 4" :key="item + index">
      <div class="left" :id="'radius_item' + item + '' + index"></div>
      <div class="right" v-resize="DomResize" :id="item + '' + index">
        <el-button size="mini" type="primary" @click="add(item + '' + index)"
          >增加高度</el-button
        >
        <el-button size="mini" type="primary" @click="reduce(item + '' + index)"
          >减少高度</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      search: '',
      desc: ''
    }
  },
  directives: {
    resize: {
      // 指令的名称
      bind (el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        console.log(el, '绑定', binding)
        let height = ''
        let targetId = ''
        function isReize () {
          const style = document.defaultView.getComputedStyle(el)
          if (height !== style.height) {
            binding.value({ height: style.height, targetId: el.id })
          }
          height = style.height
        }
        el.__vueSetInterval__ = setInterval(isReize, 300)
      },
      unbind (el) {
        console.log(el, '解绑')
        clearInterval(el.__vueSetInterval__)
      }
    }
  },

  methods: {
    DomResize (data) {
      console.log('height:', data.height, '   需要监听的dom高度改变')
      console.log('targetId:', data.targetId, '   domid对应关系')
      let leftDom = document.getElementById(`radius_item${data.targetId}`)
      leftDom.style.height = data.height
    },
    add (val) {
      let item = document.getElementById(val)
      item.style.height = 110 + 'px'
    },
    reduce (val) {
      let item = document.getElementById(val)
      item.style.height = 90 + 'px'
    }
  }
}
</script>

<style lang="less" scoped>
.demo {
  width: 100%;
  height: 100%;
  .item {
    width: 1000px;
    margin: 20px auto;
    display: flex;

    .left {
      flex: 1;
      height: 100px;
      // background-color: #ccc;
      border: 1px solid #ccc;
    }
    .right {
      flex: 2;
      height: 100px;
      margin-left: 20px;
      // background-color: pink;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>