H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】vue+TS锚点跳转

项目时vue+ts,导航栏是一个组件,其中有个多级子菜单点击要实现某个菜单锚点跳转,怎么搞?

网上都说可以这样

private jumpTo(path: ""): void {
    if (document.querySelector("#" + path))
    <HTMLElement>document.querySelector("#" + path).scrollIntoView(true);
  }

8029e4d75b0436773dd118520bc3cea.png

但获取dom这条语句错误!关于ts操作dom我也一直没弄明白,我该从哪里了解这方面知识呢?

回答:

document.querySelector 在 TS 看来可能返回值为 null,你需要加下非空断言操作符:

(<HTMLElement>document.querySelector("#" + path))!.scrollIntoView(true);

回答:

贴一下我最后跳转的实现,总感觉不优雅,有更好的方式还请各位不吝赐教

headerNav.vue


  private jumpTo(p: ""): void {
    if (this.$route.fullPath !== "/services") {
      this.$router.push({ name: "services" });
      setTimeout(() => {
        this.anchorJump(p);
      }, 0);
    } else {
      console.log(p);
      this.anchorJump(p);
    }
    // this.$router.push({ name: "services", params: { path: p } });
    // if (document.querySelector("#" + path))
    // console.log(document.querySelector("#" + p));
    // (<HTMLElement>document.querySelector("#" + p))!.scrollIntoView(true);
  }
  private anchorJump(anchor: string): void {
    if (anchor) {
      const href = document.createElement("a");
      href.setAttribute("href", "#" + anchor);
      console.log(document.getElementsByClassName("contact-us")[0]);
      document.getElementsByClassName("contact-us")[0].appendChild(href);
      href.click();
      setTimeout(() => {
        document.getElementsByClassName("contact-us")[0].removeChild(href);
      }, 0);
    }
  }
}

本文地址:H5W3 » 【前端问题精选】vue+TS锚点跳转

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址