From 52c1d9be10f9ece2f70fd613a24fac6457d016a6 Mon Sep 17 00:00:00 2001 From: BeADre Date: Sat, 18 Sep 2021 22:09:05 +0800 Subject: [PATCH] fix(index-bar): fix the bug of overlap --- .../src/index-anchor/IndexAnchor.vue | 13 +- .../varlet-ui/src/index-anchor/provide.ts | 1 + packages/varlet-ui/src/index-bar/IndexBar.vue | 7 + .../__snapshots__/index.spec.js.snap | 1254 +++++++++-------- .../src/index-bar/__tests__/index.spec.js | 6 +- .../varlet-ui/src/index-bar/example/index.vue | 24 +- packages/varlet-ui/src/index-bar/props.ts | 4 + packages/varlet-ui/src/index-bar/provide.ts | 1 + packages/varlet-ui/src/sticky/sticky.less | 2 + 9 files changed, 673 insertions(+), 639 deletions(-) diff --git a/packages/varlet-ui/src/index-anchor/IndexAnchor.vue b/packages/varlet-ui/src/index-anchor/IndexAnchor.vue index 4989d3b79f3..bcf23f634c3 100644 --- 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" >
@@ -30,6 +32,7 @@ export default defineComponent({ const { index, indexBar, bindIndexBar } = useIndexBar() const ownTop: Ref = ref(0) + const disabled: Ref = ref(false) const name: ComputedRef = computed(() => props.index) const anchorEl: Ref = ref(null) @@ -38,8 +41,7 @@ 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 @@ -47,11 +49,16 @@ export default defineComponent({ : (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 index 95da3ebddad..2d170cb0c1d 100644 --- 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 ownTop: Ref 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 index 6b179a03b0f..76917dfc4eb 100644 --- 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 = ref() const sticky: ComputedRef = computed(() => props.sticky) + const cssMode: ComputedRef = computed(() => props.cssMode) const stickyOffsetTop: ComputedRef = computed(() => props.stickyOffsetTop) const zIndex: ComputedRef = 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) } }) diff --git a/packages/varlet-ui/src/index-bar/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/index-bar/__tests__/__snapshots__/index.spec.js.snap index 0faaf4128eb..da6169c632c 100644 --- a/packages/varlet-ui/src/index-bar/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/varlet-ui/src/index-bar/__tests__/__snapshots__/index.spec.js.snap @@ -60,840 +60,842 @@ exports[`test click anchor to trigger change event 1`] = ` `; exports[`test indexBar example 1`] = ` -"
-
-
-
-
标题 A
+"
+
+
+
+
+
标题 A
+
-
-
- -
-
A 文本
+
+ +
+
A 文本
+ +
- -
-
- -
-
A 文本
+
+ +
+
A 文本
+ +
- -
-
- -
-
A 文本
+
+ +
+
A 文本
+ +
-
-
-
-
-
-
标题 B
+
+
+
+
标题 B
+
-
-
- -
-
B 文本
+
+ +
+
B 文本
+ +
- -
-
- -
-
B 文本
+
+ +
+
B 文本
+ +
- -
-
- -
-
B 文本
+
+ +
+
B 文本
+ +
-
-
-
-
-
-
标题 C
+
+
+
+
标题 C
+
-
-
- -
-
C 文本
+
+ +
+
C 文本
+ +
- -
-
- -
-
C 文本
+
+ +
+
C 文本
+ +
- -
-
- -
-
C 文本
+
+ +
+
C 文本
+ +
-
-
-
-
-
-
标题 D
+
+
+
+
标题 D
+
-
-
- -
-
D 文本
+
+ +
+
D 文本
+ +
- -
-
- -
-
D 文本
+
+ +
+
D 文本
+ +
- -
-
- -
-
D 文本
+
+ +
+
D 文本
+ +
-
-
-
-
-
-
标题 E
+
+
+
+
标题 E
+
-
-
- -
-
E 文本
+
+ +
+
E 文本
+ +
- -
-
- -
-
E 文本
+
+ +
+
E 文本
+ +
- -
-
- -
-
E 文本
+
+ +
+
E 文本
+ +
-
-
-
-
-
-
标题 F
+
+
+
+
标题 F
+
-
-
- -
-
F 文本
+
+ +
+
F 文本
+ +
- -
-
- -
-
F 文本
+
+ +
+
F 文本
+ +
- -
-
- -
-
F 文本
+
+ +
+
F 文本
+ +
-
-
-
-
-
-
标题 G
+
+
+
+
标题 G
+
-
-
- -
-
G 文本
+
+ +
+
G 文本
+ +
- -
-
- -
-
G 文本
+
+ +
+
G 文本
+ +
- -
-
- -
-
G 文本
+
+ +
+
G 文本
+ +
-
-
-
-
-
-
标题 H
+
+
+
+
标题 H
+
-
-
- -
-
H 文本
+
+ +
+
H 文本
+ +
- -
-
- -
-
H 文本
+
+ +
+
H 文本
+ +
- -
-
- -
-
H 文本
+
+ +
+
H 文本
+ +
-
-
-
-
-
-
标题 I
+
+
+
+
标题 I
+
-
-
- -
-
I 文本
+
+ +
+
I 文本
+ +
- -
-
- -
-
I 文本
+
+ +
+
I 文本
+ +
- -
-
- -
-
I 文本
+
+ +
+
I 文本
+ +
-
-
-
-
-
-
标题 J
+
+
+
+
标题 J
+
-
-
- -
-
J 文本
+
+ +
+
J 文本
+ +
- -
-
- -
-
J 文本
+
+ +
+
J 文本
+ +
- -
-
- -
-
J 文本
+
+ +
+
J 文本
+ +
-
-
-
-
-
-
标题 K
+
+
+
+
标题 K
+
-
-
- -
-
K 文本
+
+ +
+
K 文本
+ +
- -
-
- -
-
K 文本
+
+ +
+
K 文本
+ +
- -
-
- -
-
K 文本
+
+ +
+
K 文本
+ +
-
-
-
-
-
-
标题 L
+
+
+
+
标题 L
+
-
-
- -
-
L 文本
+
+ +
+
L 文本
+ +
- -
-
- -
-
L 文本
+
+ +
+
L 文本
+ +
- -
-
- -
-
L 文本
+
+ +
+
L 文本
+ +
-
-
-
-
-
-
标题 M
+
+
+
+
标题 M
+
-
-
- -
-
M 文本
+
+ +
+
M 文本
+ +
- -
-
- -
-
M 文本
+
+ +
+
M 文本
+ +
- -
-
- -
-
M 文本
+
+ +
+
M 文本
+ +
-
-
-
-
-
-
标题 N
+
+
+
+
标题 N
+
-
-
- -
-
N 文本
+
+ +
+
N 文本
+ +
- -
-
- -
-
N 文本
+
+ +
+
N 文本
+ +
- -
-
- -
-
N 文本
+
+ +
+
N 文本
+ +
-
-
-
-
-
-
标题 O
+
+
+
+
标题 O
+
-
-
- -
-
O 文本
+
+ +
+
O 文本
+ +
- -
-
- -
-
O 文本
+
+ +
+
O 文本
+ +
- -
-
- -
-
O 文本
+
+ +
+
O 文本
+ +
-
-
-
-
-
-
标题 P
+
+
+
+
标题 P
+
-
-
- -
-
P 文本
+
+ +
+
P 文本
+ +
- -
-
- -
-
P 文本
+
+ +
+
P 文本
+ +
- -
-
- -
-
P 文本
+
+ +
+
P 文本
+ +
-
-
-
-
-
-
标题 Q
+
+
+
+
标题 Q
+
-
-
- -
-
Q 文本
+
+ +
+
Q 文本
+ +
- -
-
- -
-
Q 文本
+
+ +
+
Q 文本
+ +
- -
-
- -
-
Q 文本
+
+ +
+
Q 文本
+ +
-
-
-
-
-
-
标题 R
+
+
+
+
标题 R
+
-
-
- -
-
R 文本
+
+ +
+
R 文本
+ +
- -
-
- -
-
R 文本
+
+ +
+
R 文本
+ +
- -
-
- -
-
R 文本
+
+ +
+
R 文本
+ +
-
-
-
-
-
-
标题 S
+
+
+
+
标题 S
+
-
-
- -
-
S 文本
+
+ +
+
S 文本
+ +
- -
-
- -
-
S 文本
+
+ +
+
S 文本
+ +
- -
-
- -
-
S 文本
+
+ +
+
S 文本
+ +
-
-
-
-
-
-
标题 T
+
+
+
+
标题 T
+
-
-
- -
-
T 文本
+
+ +
+
T 文本
+ +
- -
-
- -
-
T 文本
+
+ +
+
T 文本
+ +
- -
-
- -
-
T 文本
+
+ +
+
T 文本
+ +
-
-
-
-
-
-
标题 U
+
+
+
+
标题 U
+
-
-
- -
-
U 文本
+
+ +
+
U 文本
+ +
- -
-
- -
-
U 文本
+
+ +
+
U 文本
+ +
- -
-
- -
-
U 文本
+
+ +
+
U 文本
+ +
-
-
-
-
-
-
标题 V
+
+
+
+
标题 V
+
-
-
- -
-
V 文本
+
+ +
+
V 文本
+ +
- -
-
- -
-
V 文本
+
+ +
+
V 文本
+ +
- -
-
- -
-
V 文本
+
+ +
+
V 文本
+ +
-
-
-
-
-
-
标题 W
+
+
+
+
标题 W
+
-
-
- -
-
W 文本
+
+ +
+
W 文本
+ +
- -
-
- -
-
W 文本
+
+ +
+
W 文本
+ +
- -
-
- -
-
W 文本
+
+ +
+
W 文本
+ +
-
-
-
-
-
-
标题 X
+
+
+
+
标题 X
+
-
-
- -
-
X 文本
+
+ +
+
X 文本
+ +
- -
-
- -
-
X 文本
+
+ +
+
X 文本
+ +
- -
-
- -
-
X 文本
+
+ +
+
X 文本
+ +
-
-
-
-
-
-
标题 Y
+
+
+
+
标题 Y
+
-
-
- -
-
Y 文本
+
+ +
+
Y 文本
+ +
- -
-
- -
-
Y 文本
+
+ +
+
Y 文本
+ +
- -
-
- -
-
Y 文本
+
+ +
+
Y 文本
+ +
-
-
-
-
-
-
标题 Z
+
+
+
+
标题 Z
+
-
-
- -
-
Z 文本
+
+ +
+
Z 文本
+ +
- -
-
- -
-
Z 文本
+
+ +
+
Z 文本
+ +
- -
-
- -
-
Z 文本
+
+ +
+
Z 文本
+ +
-
+
    +
  • A
    • +
  • B
    • +
  • C
    • +
  • D
    • +
  • E
    • +
  • F
    • +
  • G
    • +
  • H
    • +
  • I
    • +
  • J
    • +
  • K
    • +
  • L
    • +
  • M
    • +
  • N
    • +
  • O
    • +
  • P
    • +
  • Q
    • +
  • R
    • +
  • S
    • +
  • T
    • +
  • U
    • +
  • V
    • +
  • W
    • +
  • X
    • +
  • Y
    • +
  • Z
    • +
-
    -
  • A
    • -
  • B
    • -
  • C
    • -
  • D
    • -
  • E
    • -
  • F
    • -
  • G
    • -
  • H
    • -
  • I
    • -
  • J
    • -
  • K
    • -
  • L
    • -
  • M
    • -
  • N
    • -
  • O
    • -
  • P
    • -
  • Q
    • -
  • R
    • -
  • S
    • -
  • T
    • -
  • U
    • -
  • V
    • -
  • W
    • -
  • X
    • -
  • Y
    • -
  • Z
    • -
" `; diff --git a/packages/varlet-ui/src/index-bar/__tests__/index.spec.js b/packages/varlet-ui/src/index-bar/__tests__/index.spec.js index 516de2b396a..90bd1ec1d1a 100644 --- a/packages/varlet-ui/src/index-bar/__tests__/index.spec.js +++ b/packages/varlet-ui/src/index-bar/__tests__/index.spec.js @@ -40,9 +40,9 @@ test('test sticky prop and it is value equal false', () => { expect(wrapper.find('.var-sticky').exists()).toBeFalsy() }) -test('test stickyOffsetTop, hideList and z-index prop', () => { +test('test, hideList and z-index prop', () => { const template = ` - + test A ` @@ -58,7 +58,7 @@ test('test stickyOffsetTop, hideList and z-index prop', () => { expect(wrapper.find('.var-index-bar__anchor-list').attributes('style').includes('display: none')).toBeTruthy() - expect(wrapper.find('.var-sticky').attributes('style')).toBe('z-index: 2; top: 10px;') + expect(wrapper.find('.var-sticky').attributes('style')).toBe('z-index: 2;') }) test('test click anchor to trigger change event', async () => { diff --git a/packages/varlet-ui/src/index-bar/example/index.vue b/packages/varlet-ui/src/index-bar/example/index.vue index 618e6cd74a4..c33bf202016 100644 --- a/packages/varlet-ui/src/index-bar/example/index.vue +++ b/packages/varlet-ui/src/index-bar/example/index.vue @@ -1,12 +1,16 @@