fix(index-bar): support dimension units for sticky-offset-top and close

#554
varletjs · May 12, 2022 · e7c6304 · e7c6304
1 parent 21b5bef
commit e7c6304
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 7 deletions.
diff --git a/packages/varlet-ui/src/index-bar/IndexBar.vue b/packages/varlet-ui/src/index-bar/IndexBar.vue
@@ -26,6 +26,7 @@ import {
   nextTickFrame,
   requestAnimationFrame,
   scrollTo as varScrollTo,
+  toPxNum,
 } from '../utils/elements'
 import { useIndexAnchors } from './provide'
 import { props } from './props'
@@ -50,7 +51,7 @@ export default defineComponent({
 
     const sticky: ComputedRef<boolean> = computed(() => props.sticky)
     const cssMode: ComputedRef<boolean> = computed(() => props.cssMode)
-    const stickyOffsetTop: ComputedRef<number> = computed(() => props.stickyOffsetTop)
+    const stickyOffsetTop: ComputedRef<number> = computed(() => toPxNum(props.stickyOffsetTop))
     const zIndex: ComputedRef<number | string> = computed(() => props.zIndex)
 
     const indexBarProvider: IndexBarProvider = {

diff --git a/packages/varlet-ui/src/index-bar/docs/en-US.md b/packages/varlet-ui/src/index-bar/docs/en-US.md
@@ -58,9 +58,9 @@ onMounted(() => {
 #### IndexBar Props
 
 | Prop | Description | Type | Default |
-| ----- | -------------- | -------- | ---------- |
+| ----- | -------------- | -------- | --------- |
 | `sticky` | Whether to enable anchor sticky top | _boolean_ | `true` |
-| `sticky-offset-top` | Anchor offset top when sticky | _number_ | `0` |
+| `sticky-offset-top` | Anchor offset top when sticky | _number \| string_ | `0` |
 | `hide-list` | Whether to hide anchor list | _boolean_ | `false` |
 | `css-mode` | Enable native `css sticky` mode | _boolean_ | `false` |
 | `z-index` | z-index | _string \| number_ | `1` |

diff --git a/packages/varlet-ui/src/index-bar/docs/zh-CN.md b/packages/varlet-ui/src/index-bar/docs/zh-CN.md
@@ -58,9 +58,9 @@ onMounted(() => {
 #### IndexBar Props
 
 | 参数 | 说明 | 类型 | 默认值 |
-| ----- | -------------- | -------- | ---------- |
+| ----- | -------------- | -------- | --------- |
 | `sticky` | 是否开启锚点吸顶 | _boolean_ | `true` |
-| `sticky-offset-top` | 锚点吸顶时与顶部的距离 | _number_ | `0` |
+| `sticky-offset-top` | 锚点吸顶时与顶部的距离 | _number \| string_ | `0` |
 | `hide-list` | 是否隐藏锚点列表 | _boolean_ | `false` |
 | `css-mode` | 开启原生 `css sticky` 模式 | _boolean_ | `false` |
 | `z-index` | z-index 层级 | _number \| string_ | `1` |

diff --git a/packages/varlet-ui/src/index-bar/props.ts b/packages/varlet-ui/src/index-bar/props.ts
@@ -6,7 +6,7 @@ export const props = {
     default: true,
   },
   stickyOffsetTop: {
-    type: Number,
+    type: [String, Number],
     default: 0,
   },
   cssMode: {

diff --git a/packages/varlet-ui/types/indexBar.d.ts b/packages/varlet-ui/types/indexBar.d.ts
@@ -2,7 +2,7 @@ import { VarComponent } from './varComponent'
 
 export interface IndexBarProps {
   sticky?: boolean
-  stickyOffsetTop?: number
+  stickyOffsetTop?: number | string
   hideList?: boolean
   cssMode?: boolean
   zIndex?: number | string