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的宽度和高度,并和记录的值比较,如果不同就执行绑定的函数,定时任务会消耗一部分性能,对于页面加载有要求的慎用,或者调大定时任务的时间间隔。