feat: prop scrollElementOffsetTop for MdCatalog(#191)

imzbf · Dec 4, 2022 · 4e9593c · 4e9593c
1 parent 9a7cdef
commit 4e9593c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/MdEditor/extensions/MdCatalog/CatalogLink.tsx b/MdEditor/extensions/MdCatalog/CatalogLink.tsx
@@ -20,6 +20,10 @@ const catalogLinkProps = () => ({
   onClick: {
     type: Function as PropType<(e: MouseEvent, t: TocItem) => void>,
     default: () => () => {}
+  },
+  scrollElementOffsetTop: {
+    type: Number as PropType<number>,
+    default: 0
   }
 });
 
@@ -31,7 +35,8 @@ const CatalogLink = defineComponent({
   props: catalogLinkProps(),
   setup(props: CatalogLinkProps) {
     return () => {
-      const { tocItem, markedHeadingId, scrollElement, onClick } = props;
+      const { tocItem, markedHeadingId, scrollElement, onClick, scrollElementOffsetTop } =
+        props;
 
       return (
         <div
@@ -60,7 +65,7 @@ const CatalogLink = defineComponent({
               }
 
               scrollContainer?.scrollTo({
-                top: offsetTop,
+                top: offsetTop - scrollElementOffsetTop,
                 behavior: 'smooth'
               });
             }
@@ -76,6 +81,7 @@ const CatalogLink = defineComponent({
                   tocItem={item}
                   scrollElement={scrollElement}
                   onClick={onClick}
+                  scrollElementOffsetTop={scrollElementOffsetTop}
                 />
               ))}
           </div>

diff --git a/MdEditor/extensions/MdCatalog/index.tsx b/MdEditor/extensions/MdCatalog/index.tsx
@@ -23,6 +23,9 @@ export interface TocItem {
 }
 
 const mdCatalogProps = () => ({
+  /**
+   * 编辑器的Id，务必与需要绑定的编辑器Id相同
+   */
   editorId: {
     type: String as PropType<string>
   },
@@ -34,19 +37,36 @@ const mdCatalogProps = () => ({
     type: Function as PropType<MarkedHeadingId>,
     default: (text: string) => text
   },
-  // 指定滚动的容器，选择器需带上对应的符号，默认预览框
-  // 元素必须定位！！！！！！
+  /**
+   * 指定滚动的容器，选择器需带上对应的符号，默认预览框
+   * 元素必须定位！！！！！！
+   *
+   * 默认：#md-editor-preview-wrapper
+   */
   scrollElement: {
     type: [String, Object] as PropType<string | HTMLElement>
   },
   theme: {
     type: String as PropType<Themes>,
     default: 'light'
   },
-  // 偏移量，默认20像素
+  /**
+   * 高亮标题相对滚动容器顶部偏移量，即距离该值时，高亮当前目录菜单项
+   *
+   * 默认：20px
+   */
   offsetTop: {
     type: Number as PropType<number>,
     default: 20
+  },
+  /**
+   * 滚动区域的固定顶部高度
+   *
+   * 默认：0
+   */
+  scrollElementOffsetTop: {
+    type: Number as PropType<number>,
+    default: 0
   }
 });
 
@@ -212,6 +232,7 @@ const MdCatalog = defineComponent({
               onClick={(e: MouseEvent, t: TocItem) => {
                 ctx.emit('onClick', e, t);
               }}
+              scrollElementOffsetTop={props.scrollElementOffsetTop}
             />
           );
         })}