vue 封装监听dom尺寸的自定义指令

最新推荐文章于 2024-04-11 10:52:18 发布

robbie.yang

最新推荐文章于 2024-04-11 10:52:18 发布

阅读量521

点赞数

分类专栏： Web前端 Vue篇文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u013243347/article/details/125338811

版权

Web前端同时被 2 个专栏收录

99 篇文章 7 订阅

订阅专栏

Vue篇

9 篇文章 0 订阅

订阅专栏

该博客介绍了如何在Vue中创建一个自定义指令`v-resize`，用于监听元素的尺寸变化，并在尺寸变化时调用传入的方法。通过设置定时器检查元素的宽高，当尺寸改变时，更新绑定的值。在组件模板中，该指令被用来触发`onResize`方法，从而实现对元素尺寸变化的响应式处理。

摘要由CSDN通过智能技术生成

指令源码


function addEventListner(el, binding) {
  // el为绑定的元素，binding为绑定给指令的对象
  let width = '';
  let height = '';

  function isReize() {
    const rect = el.getBoundingClientRect();

    if (width !== rect.width || height !== rect.height) {
      // 关键(这传入的是函数,所以执行此函数)
      binding.value(rect);
    }
    width = rect.width;
    height = rect.height;
  }
  // eslint-disable-next-line no-underscore-dangle
  el.__vueSetInterval__ = setInterval(isReize, 300);
}
export default {
  install(Vue) {
    Vue.directive('resize', {
      bind(el, binding, a) {
        if (!el) return;
        console.log('注册 resize 事件', el, binding, a);
        addEventListner(el, binding);
      },
      unbind(el) {
        if (!el) return;
        console.log(el, '解绑 resize 事件');
        // eslint-disable-next-line no-underscore-dangle
        clearInterval(el.__vueSetInterval__);
      }
    });
  }
};

注册自定义指令

import resize from '@/directives/resize';

Vue.use(resize);

使用自定义指令

<template>
  <div
    class="game-tools"
    v-resize="onResize"
  ></div>
 </template>
<script>
...,
	methods: {
		onResize({height, width}) {
			console.log('尺寸发生变化')
		}
	}
</script>