vue项目中自定义自定义指令监听元素宽高变化，监听元素距离窗口距离变化

﹏ヽ暗。殇╰゛Y 2022-11-12 02:44 337阅读 0赞

使用局部注册指令的方式

directives: {
        // 使用局部注册指令的方式
        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, 300);
          },
          unbind(el) {
            clearInterval(el.__vueSetInterval__);
          },
        },
        changexy:{
           // 指令的名称
          bind(el, binding) {
            // el为绑定的元素，binding为绑定给指令的对象
            let top = "",
              left = "";
            function changeXY() {
              // const style = document.defaultView.getComputedStyle(el);
              let c_top = document.getElementById("hkWebVideo").getBoundingClientRect().top
              let c_left = document.getElementById("hkWebVideo").getBoundingClientRect().left
              if (top !== c_top || left !== c_left) {
                binding.value(); // 关键
              }
              top = c_top;
              left = c_left;
            }
            el.__vueSetInterval__ = setInterval(changeXY, 300);
          },
          unbind(el) {
            clearInterval(el.__vueSetInterval__);
          },
        }
      },