antdV中Anchor 锚点总结

   <div :class="$style.title">
          <a-anchor
            :get-container="getContainerBox"
            :affix="false"
            :target-offset="targetOffset"
            :class="$style.anchor"
            @click="handleAnchorClick"
          >
            <a-anchor-link
              v-for="item in anchorList"
              :key="item.id"
              :href="`#${item.anchor}`"
              :class="$style.topMenuItem"
              :title="item.name"
            />
          </a-anchor>
          <span>
            <a-icon :class="$style.close" type="close" @click="onClose" />
          </span>
        </div>

注意点一

getContainerBox 绑定滚动范围容器

   getContainerBox() {
      return this.$refs.containerBox
    },

注意点二

1. 容器样式

    .body {
      flex: 1;
      box-sizing: border-box;
      height: calc(100vh - 50px);
      margin: 5px 0;
      padding: 0 15px;
      overflow: auto;

      :global {
        .ant-form .ant-form-item {
          margin-bottom: 10px;
        }
      }
    }

2. 选中的锚点样式

 .ant-anchor {
      display: flex !important;
    }

    .ant-anchor-ink::before {
      background-color: transparent;
    }

    .ant-anchor-link {
      margin: 10px 34px 10px 0;
      padding: 3px 6px;
    }

    .ant-anchor-link-active {
      font-weight: 600;
      border-bottom: 3px solid RGB(0, 179, 167);
    }

注意点三

1.阻止浏览器默认事件

 handleAnchorClick(e, link) {
      // 阻止 a 标签默认事件
      e.preventDefault()
      if (link.href) {
        // 找到锚点对应得的节点
        let element = document.getElementById(link.href)
        // 如果对应id的锚点存在，就跳滚动到锚点顶部
        element && element.scrollIntoView({ block: 'end', behavior: 'smooth', alignToTop: 'false' })
      }
    },

注意点四

可能你定义的锚点位置与你真正想要的位置有点偏差 可以设置 targetOffset传一个offset值