vue中监听元素的高度和宽度变化(自定义指令)

vue中监听元素的高度和宽度变化(自定义指令)

想根据浏览器变化动态的设置表格的高度达到响应式布局，刚开始是为窗口添加大小监听事件，但是发现在进行浏览器的比例缩放或放大时（ctr+鼠标中建滚动）并不能触发事件，所以想监听页面中某一元素的大小变化来达到效果，但是vue中又没有元素的高度和宽度监听事件。网上收缩了一下发现有vue插件vue-resize-directive-1.2.0，但是开发环境限制不能下插件，所以就使用vue的自定义指令vue自定义指令官方文档写了一个简易版的js插件

js文件如下：

//将该代码定义为一个js文件
let resize = {
    bind(el,binding) {
        let width = '', height = '';
        function isResize() {
            const style = document.defaultView.getComputedStyle(el);
            if (width !== style.width || height !== style.height) {
                binding.value();
            }
            width = style.width;
            height = style.height;
        }
        el._vueSetInterval_ = setInterval(isResize,100);
    },
    unbind(el) {
        clearInterval(el._vueSetInterval_);
    }
}
export default resize;

//在需要使用的vue页面导入js文件
import resize from "../../utils/myresize";

//在vue自定义指令中添加该指令
directives: {
    resize
}
//然后在标签中使用该指令,绑定大小变化时要调用的方法
<div ref = "itemContent" v-resize = "resetTableHeight">...</div>

//定义方法，做自己想要的操作
resetTableHeight() {
    this.tableHeight = this.$refs.itemContent.offsetHeight-30;
}

最后测试，无论是浏览器比例缩放还是窗口缩放都能执行绑定的函数。js原理是添加定时任务获取绑定元素的style的宽度和高度，并和记录的值比较，如果不同就执行绑定的函数，定时任务会消耗一部分性能，对于页面加载有要求的慎用，或者调大定时任务的时间间隔。