自定义指令实现动态获取DOM 的宽高

一、自定义指令文件位置 src/directives/resize.js

import Vue from 'vue'

// 自动注册到全局
Vue.directive('resize', {
  bind(el, binding) {
    // el为绑定的元素，binding为绑定给指令的对象
    console.log(el, '绑定', binding)
    let width = '',
      height = ''

    function isReize() {
      const style = document.defaultView.getComputedStyle(el)
      if (width !== style.width || height !== style.height) {
        // 关键(这传入的是函数,所以执行此函数)
        binding.value({ width: style.width, height: style.height })
      }
      width = style.width
      height = style.height
    }

    el.__vueSetInterval__ = setInterval(isReize, 300)
  },

  unbind(el) {
    console.log(el, '解绑')
    clearInterval(el.__vueSetInterval__)
  }
})

二、然后在main.js中引入注册

import '@/directives/resize';
Vue.use(ElementUI)

三、具体使用如下v-resize="handleResize"

<template>
  <div v-resize="handleResize" class="box">
    dignissimos officiis dignissimos officiis, sed laborum fugidignissimos officiis, sed laboru, sed laborum
    fugidignissimos officiis, sed laborum fugiat, a odio rerum modi praesentium quis dignissimos officiis, sed laborum
    fugidignissidignissimos officiis dignissimos officiis, sed laborum fugidignissimos officiis, sed laboru, sed laborum
    fugidignissimos officiis, sed laborum fugiat, a odio rerum modi praesentium quis dignissimos officiis, sed laborum
    fugidignissi
    fugidignissidignissimos officiis dignissimos officiis, sed laborum fugidignissimos officiis, sed laboru, sed laborum
    fugidignissimos officiis, sed laborum fugiat, a odio rerum modi praesentium quis dignissimos officiis, sed laborum
    fugidignissi
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      height: 0
    }
  },
  methods: {
    handleResize({ width, height }) {
      let heights = height.split('.')[0]
      console.log('height', heights.split('p')[0]);
      this.height = heights
    }
  },
}
</script>
<style>
.box {
  width: 200px;
  /* min-height: 100px; */
  max-height: 260px;
  background-color: yellowgreen;
  overflow-y: scroll;
}
  /*美化滚动条*/
::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101F1C, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, .5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  transition: background-color .3s;
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, .3);
}
</style>