wujie icon indicating copy to clipboard operation
wujie copied to clipboard

poper.js在v2有定位问题,在v3里没有

Open dun-er opened this issue 1 year ago • 0 comments

          我用的是官方实例,然后加了一个固定顶部的导航,用的方法五,向下滚动后popper计算定位会出现向下偏差,方法六是都变成固定的了(并且方法六的element ui组件样式会丢失),用的是element ui,子应用版本是"element-ui": "2.15.6", 主应用"wujie": "workspace:^1.0.22",
	// 方法五5
    // {
    //       jsLoader: (code) => {
    //         // 替换popper.js内计算偏左侧偏移量
    //         var codes = code.replace(
    //           "left: elementRect.left - parentRect.left",
    //           "left: fixed ? elementRect.left : elementRect.left - parentRect.left"
    //         );
    //         // 替换popper.js内右侧偏移量
    //         return codes.replace("popper.right > data.boundaries.right", "false");
    //       },
    //     },
    // 方法6
    {
      jsLoader(code) {
        // 解决element-ui,popper.js计算问题
        let newCode = code
          .replace("var root = window;", "var root = window.parent")
          .replace(
            "document.body.appendChild(this.popperElm);",
            "window.parent.document.body.appendChild(this.popperElm);"
          )
          .replace(
            "var css = root.getComputedStyle(element, null);",
            "if (window.__POWERED_BY_WUJIE__ && element.nodeType === 9) return 'static';var css = root.getComputedStyle(element, null);"
          );
        return newCode;
      },
    },

方案五

初始点击都是正常,非固定的也是正常, image-20240719134646357

但是导航部分向下滚动后 image-20240719134753207

方法六的效果

popper组件样式会丢失 image-20240719134413864

滚动后的方法六 里的popper会出现固定了 image-20240719134523570

Originally posted by @dun-er in https://github.com/Tencent/wujie/issues/682#issuecomment-2238271293

dun-er avatar Aug 05 '24 02:08 dun-er