vue使用自定义指令监听组件宽高变化

自定义指令代码

 directives: { // 使用局部注册指令的方式
    resize: { // 指令的名称
      bind (el, binding) { // el为绑定的元素，binding为绑定给指令的对象
        let width = ''
        let height = ''
        function isReize () {
          const style = document.defaultView.getComputedStyle(el)
          if (width !== style.width || height !== style.height) {
            binding.value() // 关键
          }
          width = style.width
          height = style.height
        }
        el.__vueSetInterval__ = setInterval(isReize, 300)
      },
      unbind (el) {
        clearInterval(el.__vueSetInterval__)
      }
    }

标签上使用：div
<div :class="[$options.name]" ref="databaseCon" v-resize="resize"></div>
在method中定义方法，通过原生window中的getComputedStyle获取元素的css样式属性：

window.getComputedStyle(el, null)[attribute]