imzbf / md-editor-v3

Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
https://imzbf.github.io/md-editor-v3
MIT License
1.51k stars 145 forks source link

在vuetify中MdPreview跳转锚点smooth失效 #624

Closed bintheext closed 1 month ago

bintheext commented 1 month ago

描述这个Bug

我使用vuetify构建的项目,将MdPreview放在容器内部后,点击锚点,能成功跳转,但是跳转过程的smooth过渡效果失效

版本号

"md-editor-v3": "4.18.0","vuetify": "3.6.14"

问题重现链接

https://github.com/user-attachments/assets/d9405c14-9869-4d82-9388-dca3c35cfcea

https://zhijian.eleduck.site/article/preview?id=10001

bintheext commented 1 month ago

经过我重写锚点的点击事件,现在可以正常使用了,

onMounted(() => {
  const previewEditor = document.getElementById(props.editorId)
  if (previewEditor) {
    previewEditor.addEventListener('click', (event) => {
      event.preventDefault(); // 阻止默认行为
      const target = event.target as HTMLElement
      if (target) {
        if (target.tagName.toLowerCase() === 'a') {
          const headingId = target.getAttribute('href').replace('#', '')
          if (headingId) {
            const targetHeadDom = document.getElementById(headingId);
            const mainContainer = document.getElementById(props.mainContainerName);
            if (targetHeadDom && mainContainer) {
              history.replaceState({}, '', `${location.pathname}${location.search}#${headingId}`)
              const scrollLength = getRootOffset(targetHeadDom).offsetTop - 10;
              mainContainer.scrollTo({
                top: scrollLength,
                behavior: 'smooth'
              });
            }
          }
        }
      }
    })
  }

})