自定义指令 v-resize
<template>
<div class="table__body" v-resize="monResize">
................................
</div>
</template>
export default {
directives:{
resize: { // 指令的名称
bind(el, binding) { // el为绑定的元素,binding为绑定给指令的对象
let width = '', height = '';
function isReize() {
const style = document.defaultView.getComputedStyle(el);//document.defaultView 在浏览器中,该属性返回当前 document 对象所关联的 window 对象,如果没有,会返回 null。
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, 500);
},
unbind(el) {
// console.log(el,"解绑");
clearInterval(el.__vueSetInterval__);
}
}
},
methods:{
monResize(data){
let {width,height} = data;//这里就是当前dom的宽高,根据当前宽高,改变其他dom的宽高
// this.option.height = parseInt(height.substring(0, height.indexOf("px"))) - 50;
// 做其他业务逻辑......
},
}
}