fix(index-bar): fix the bug of overlap

varletjs · Sep 18, 2021 · 52c1d9b · 52c1d9b
1 parent 2d7393c
commit 52c1d9b
Show file tree

Hide file tree

Showing 9 changed files with 673 additions and 639 deletions.
diff --git a/packages/varlet-ui/src/index-anchor/IndexAnchor.vue b/packages/varlet-ui/src/index-anchor/IndexAnchor.vue
@@ -3,6 +3,8 @@
     :is="sticky ? 'var-sticky' : Transition"
     :offset-top="sticky ? stickyOffsetTop : null"
     :z-index="sticky ? zIndex : null"
+    :disabled="disabled && !cssMode"
+    :css-mode="cssMode"
     ref="anchorEl"
   >
     <div class="var-index-anchor" v-bind="$attrs">
@@ -30,6 +32,7 @@ export default defineComponent({
     const { index, indexBar, bindIndexBar } = useIndexBar()
 
     const ownTop: Ref<number> = ref(0)
+    const disabled: Ref<boolean> = ref(false)
     const name: ComputedRef<number | string | undefined> = computed(() => props.index)
     const anchorEl: Ref<HTMLDivElement | RendererNode | null> = ref(null)
 
@@ -38,20 +41,24 @@ export default defineComponent({
       return
     }
 
-    const { active, sticky, stickyOffsetTop, zIndex } = indexBar
-
+    const { active, sticky, cssMode, stickyOffsetTop, zIndex } = indexBar
     const setOwnTop = () => {
       if (!anchorEl.value) return
       ownTop.value = (anchorEl.value as RendererNode).$el
         ? (anchorEl.value as RendererNode).$el.offsetTop
         : (anchorEl.value as HTMLDivElement).offsetTop
     }
 
+    const setDisabled = (value: boolean) => {
+      disabled.value = value
+    }
+
     const indexAnchorProvider: IndexAnchorProvider = {
       index,
       name,
       ownTop,
       setOwnTop,
+      setDisabled,
     }
 
     bindIndexBar(indexAnchorProvider)
@@ -62,6 +69,8 @@ export default defineComponent({
       active,
       sticky,
       zIndex,
+      disabled,
+      cssMode,
       stickyOffsetTop,
       Transition,
     }

diff --git a/packages/varlet-ui/src/index-anchor/provide.ts b/packages/varlet-ui/src/index-anchor/provide.ts
@@ -11,6 +11,7 @@ export interface IndexAnchorProvider {
   name: ComputedRef<string | number | undefined>
   ownTop: Ref<number>
   setOwnTop: () => void
+  setDisabled: (value: boolean) => void
 }
 
 export function useIndexBar() {

diff --git a/packages/varlet-ui/src/index-bar/IndexBar.vue b/packages/varlet-ui/src/index-bar/IndexBar.vue
@@ -46,12 +46,14 @@ export default defineComponent({
     const active: Ref<number | string | undefined> = ref()
 
     const sticky: ComputedRef<boolean> = computed(() => props.sticky)
+    const cssMode: ComputedRef<boolean> = computed(() => props.cssMode)
     const stickyOffsetTop: ComputedRef<number> = computed(() => props.stickyOffsetTop)
     const zIndex: ComputedRef<number | string> = computed(() => props.zIndex)
 
     const indexBarProvider: IndexBarProvider = {
       active,
       sticky,
+      cssMode,
       stickyOffsetTop,
       zIndex,
     }
@@ -76,6 +78,11 @@ export default defineComponent({
           index === indexAnchors.length - 1 ? scrollHeight : indexAnchors[index + 1].ownTop.value - anchor.ownTop.value
 
         if (top >= 0 && top < distance && !clickedName.value) {
+          if (index && !props.cssMode) {
+            indexAnchors[index - 1].setDisabled(true)
+          }
+
+          anchor.setDisabled(false)
           emitEvent(anchor)
         }
       })