vue使用自定义指令监听DOM元素变化
注册指令:directives:{resize: { // 指令的名称bind(el, binding) { // el为绑定的元素,binding为绑定给指令的对象console.log(el,"绑定",binding);let width = '', height = '';function isReize() {const style = document.defaultV
·
注册指令:
这个和methods、mounted等同级
directives:{
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__);
}
}
},
页面内绑定函数:
<div v-resize="DomResize"></div>
在函数中输出DOM变化:
DomResize(data) {
let {width,height} = data;
console.log("width:",width,"height:",height," dom尺寸方式改变");
}
更多推荐
已为社区贡献2条内容
所有评论(0)