自定义resize指令,实现绑定的元素随浏览器窗口大小改变而改变,里面添加了定时器,避免变化太过频繁。
const resize = {
bind(el, binding){ // 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;
}
el.__vueSetInterval__ = setInterval(isReize, 500);
},
unbind(el) {
clearInterval(el.__vueSetInterval__);
}
}
export default resize
使用方法:
1、引入resize自定义方法到directives里;
2、为需要绑定该方法的元素添加上v-resize。