feat(index-bar): add hide-list prop

varletjs · Jul 27, 2021 · a433b08 · a433b08
1 parent b38aa82
commit a433b08
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 5 deletions.
diff --git a/packages/varlet-ui/src/index-bar/IndexBar.vue b/packages/varlet-ui/src/index-bar/IndexBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="var-index-bar" ref="barEl">
     <slot />
-    <ul class="var-index-bar__anchor-list" :style="{ zIndex: zIndex + 2 }">
+    <ul class="var-index-bar__anchor-list" :style="{ zIndex: zIndex + 2, display: hideList ? 'none' : 'block' }">
       <li
         v-for="anchorName in anchorNameList"
         :key="anchorName"

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
@@ -48,7 +48,7 @@ exports[`test click anchor to trigger change event 1`] = `
         <div class=\\"var-index-anchor\\">test E</div>
       </div>
     </div>
-    <ul class=\\"var-index-bar__anchor-list\\" style=\\"z-index: 3;\\">
+    <ul class=\\"var-index-bar__anchor-list\\" style=\\"z-index: 3; display: block;\\">
       <li class=\\"var-index-bar__anchor-item\\" style=\\"\\">A</li>
       <li class=\\"var-index-bar__anchor-item var-index-bar__anchor-item--active\\" style=\\"color: purple;\\">B</li>
       <li class=\\"var-index-bar__anchor-item\\">C</li>
@@ -867,7 +867,7 @@ exports[`test indexBar example 1`] = `
       <!--v-if-->
     </div>
   </div>
-  <ul class=\\"var-index-bar__anchor-list\\" style=\\"z-index: 3;\\">
+  <ul class=\\"var-index-bar__anchor-list\\" style=\\"z-index: 3; display: block;\\">
     <li class=\\"var-index-bar__anchor-item\\">A</li>
     <li class=\\"var-index-bar__anchor-item\\">B</li>
     <li class=\\"var-index-bar__anchor-item\\">C</li>

diff --git 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 and z-index prop', () => {
+test('test stickyOffsetTop, hideList and z-index prop', () => {
   const template = `
-    <var-index-bar :sticky-offset-top="10" zIndex="2">
+    <var-index-bar :sticky-offset-top="10" hide-list z-index="2">
       <var-index-anchor index="A">test A</var-index-anchor>
     </var-index-bar>
   `
@@ -56,6 +56,8 @@ test('test stickyOffsetTop and z-index prop', () => {
 
   expect(wrapper.find('.var-sticky').exists()).toBeTruthy()
 
+  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;')
 })
 

diff --git a/packages/varlet-ui/src/index-bar/docs/en-US.md b/packages/varlet-ui/src/index-bar/docs/en-US.md
@@ -67,6 +67,7 @@ import { ref, onMounted } from 'vue'
 | ----- | -------------- | -------- | ---------- |
 | `sticky` | Whether to enable anchor sticky top | _boolean_ | `true` |
 | `sticky-offset-top` | Anchor offset top when sticky | _number_ | `0` |
+| `hide-list` | Whether to hide anchor list | _boolean_ | `false` |
 | `z-index` | z-index | _string \| number_ | `1` |
 | `highlight-color` | Index character highlight color | _string_ | `#ee0a24` |
 

diff --git a/packages/varlet-ui/src/index-bar/docs/zh-CN.md b/packages/varlet-ui/src/index-bar/docs/zh-CN.md
@@ -67,6 +67,7 @@ import { ref, onMounted } from 'vue'
 | ----- | -------------- | -------- | ---------- |
 | `sticky` | 是否开启锚点吸顶 | _boolean_ | `true` |
 | `sticky-offset-top` | 锚点吸顶时与顶部的距离 | _number_ | `0` |
+| `hide-list` | 是否隐藏锚点列表 | _boolean_ | `false` |
 | `z-index` | z-index 层级 | _number \| string_ | `1` |
 | `highlight-color` | 索引字符高亮颜色 | _string_ | `#ee0a24` |
 

diff --git a/packages/varlet-ui/src/index-bar/props.ts b/packages/varlet-ui/src/index-bar/props.ts
@@ -7,6 +7,10 @@ export const props = {
     type: Number,
     default: 0,
   },
+  hideList: {
+    type: Boolean,
+    default: false,
+  },
   zIndex: {
     type: [Number, String],
     default: 1,

diff --git a/packages/varlet-ui/types/indexBar.d.ts b/packages/varlet-ui/types/indexBar.d.ts
@@ -3,6 +3,7 @@ import { VarComponent } from './varComponent'
 export interface IndexBarProps {
   sticky?: boolean
   stickyOffsetTop?: number
+  hideList?: boolean
   zIndex?: number | string
   highlightColor?: string
   onClick?: (value: string | number) => void