自定义resize指令

前言:

有的时候我们需要监控一个元素尺寸的变化,一个元素的尺寸变化了之后我们要做一些对应`的事情。

比如: 大屏展示项目中,屏幕尺寸变化了那么echarts中展示的信息就要做相对应得增加,我们就可以将resize封装成一个指令

步骤:

1,新建一个index.js

     //创建一个map  map\会造成内存泄露 建议使用WeakMap
// const map =new Map()
const map = new WeakMap();

// 创建一个观察者
const ob = new ResizeOBserver((entries) => {
  for (const enter of entries) {
    // 调用指令传过来的函数
    const handler = map.get(enter.targer);
    if (handler) {
     //在这里进行dom尺寸变化后的操作

      handler();
    }
  }
});

export default {
  mounted(el, binding) {
    //监控尺寸变化

    //对dom进行监听
    ob.observe(el);

    map.set(el, binding.value);
  },

  unmounted(el) {
    //取消监听
    ob.unobserve(el);
  },
};

2,将自定义指令进行全局注册

3,在vue文件中进行使用