vue.js：使用自定义指令监听元素尺寸变化（宽度 高度）

vue 自定义指令 文档: /v2/guide/custom-directive.html

定义指令

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__);}});

使用

// src/main.js// 引入指令import '@/directives/resize.js';

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

handleResize({width, height }) {console.log('handleResize', width, height);}

参考

vue使用自定义指令监听元素宽、高变化