vue 监听页面 元素宽度和高度 变化 可以传参 自定义指令（局部）

vue 监听页面 元素宽度和高度(我值监听了宽度) 变化

插件安装 element-resize-detector

    npm install element-resize-detector

引入插件

要是有用饿了么UI框架的话，这个都不用引入
<script>
import elementResizeDetectorMaker from "element-resize-detector";
</script>

注册局部自定义指令

 ![](https://img2020.cnblogs.com/blog/1830100/202107/1830100-20210722191920382-1343319426.png)


 directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding, vnode) {
        // el为绑定的元素，binding为绑定给指令的对象
        let width = "";
        // let height = "";  这就是监听高度了
        let that = vnode.context;
        function isReize() {
          const style = document.defaultView.getComputedStyle(el);
          // if (width !== style.width||height !== style.height) {  这就是监听宽度和高度了
          if (width !== style.width) {
            // binding.value();  // 关键
            let pxNumber = style.width.split("px")[0];
            that[binding.arg](binding.value, pxNumber);
          }
          width = style.width;
          // height = style.height;  这就是监听宽度和高度了
        }
        el.__vueSetInterval__ = setInterval(isReize, 300);
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__);
      },
    },
  },

行间绑定 （绑定要监听的元素）

<div   v-resize:resize="{
              className: index + 'titleContent',
            }"></div>

事件操作 （元素宽度改变时执行的事件）

 /**
     * @description: 监听宽度的改变事件   自定义指令 CDMB0000212titleContent
     * @param {*} value
     * @param {*} width
     * @return {*}
     */
    resize(value, width) {
      //value 这个是传进来的参数的对象  //{className:"0000titleContent"}   上面的变量index值是0000
       // width是宽度的值 
      if (value && value.className) {
        if (width < 800) {
          //$("." + value.className).hide();
        } else {
          //$("." + value.className).show();
        }
      }
    }