【vue使用自定义指令directives监听元素宽度和高度的变化】

前言

vue使用自定义指令directives监听元素宽度和高度的变化

---

一、自定指令是什么？directives？

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

二、最简单的自定义指令

1.input框自动聚焦

只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。
代码如下：
和methods()放在同一层。

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

<input type="text" v-focus>

2.编写自动获取宽高的指令v-resize

代码如下：

directives:{
    resize: { // 指令的名称
      bind(el, binding) { // 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) {
        clearInterval(el.__vueSetInterval__);
      }
    }
 },
 methods: {
 	monResize(data){    
      let {width, height} = data;
   }
 }

<div v-resize="monResize"></div>

---

总结

记录总没错