通过vue自定义指令(directives) 实现dom元素随指定dom元素高度变化而变化

249 阅读1分钟
触发元素
<div class="a_result_name" :data-key="element.task_result_id" v-resize></div>
响应元素
<div :class="`${element.task_result_id}`"></div>
// js
directives: {
    resize: { // 指令的名称
      bind (el, binding) { // el为绑定的元素,binding为绑定给指令的对象
        let height = ''
        function isReize () {
          const style = document.defaultView.getComputedStyle(el)
          if (height !== style.height) {
            height = style.height
            let classkey = el.getAttribute('data-key')
            let doms = document.getElementsByClassName(classkey)
            for (let i = 0; i < doms.length; i++) {
              doms[i].style.height = height
            }
          }
        }
        el.__vueSetInterval__ = setInterval(isReize, 300)
      },
      unbind (el) {
        clearInterval(el.__vueSetInterval__)
      }
    }
  },