前言

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>

总结

记录总没错