vue.js:使用自定义指令监听元素尺寸变化(宽度、高度)
vue 自定义指令 文档: https://cn.vuejs.org/v2/guide/custom-directive.html定义指令使用
·
vue 自定义指令 文档: https://cn.vuejs.org/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);
}
更多推荐
已为社区贡献51条内容
所有评论(0)