fix(index-bar): fix mount error and remove active prop

varletjs · Apr 17, 2021 · 0dcb98f · 0dcb98f
1 parent 37029e2
commit 0dcb98f
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 29 deletions.
diff --git a/packages/varlet-ui/src/index-bar/IndexBar.vue b/packages/varlet-ui/src/index-bar/IndexBar.vue
@@ -18,7 +18,7 @@
 <script lang="ts">
 import { computed, ComputedRef, defineComponent, nextTick, ref, Ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { isPlainObject } from '../utils/shared'
-import { getParentScroller } from '../utils/elements'
+import { getParentScroller, requestAnimationFrame } from '../utils/elements'
 import { IndexBarProvider, useIndexAnchors } from './provide'
 import { IndexAnchorProvider } from '../index-anchor/provide'
 import { props } from './props'
@@ -33,8 +33,8 @@ export default defineComponent({
     const scroller: Ref<HTMLElement | Window | null> = ref(null)
     const barEl: Ref<HTMLDivElement | null> = ref(null)
     const anchorNameList: Ref<Array<number | string>> = ref([])
+    const active: Ref<number | string | undefined> = ref()
 
-    const active: ComputedRef<number | string | undefined> = computed(() => props.active)
     const sticky: ComputedRef<boolean> = computed(() => props.sticky)
     const stickyOffsetTop: ComputedRef<number> = computed(() => props.stickyOffsetTop)
     const zIndex: ComputedRef<number | string> = computed(() => props.zIndex)
@@ -50,8 +50,9 @@ export default defineComponent({
 
     const emitEvent = (anchor: IndexAnchorProvider | number | string) => {
       const anchorName = isPlainObject(anchor) ? anchor.name.value : anchor
-      if (anchorName === props.active) return
-      props['onUpdate:active']?.(anchorName)
+      if (anchorName === active.value) return
+
+      active.value = anchorName
       props.onChange?.(anchorName)
     }
 
@@ -83,15 +84,16 @@ export default defineComponent({
 
     // expose
     const scrollTo = (index: number | string) => {
-      anchorClick(index)
+      requestAnimationFrame(() => anchorClick(index))
     }
 
     watch(
       () => length.value,
       () =>
         nextTick(() => {
-          indexAnchors.forEach(({ name }) => {
+          indexAnchors.forEach(({ name, setOwnTop }) => {
             if (name.value) anchorNameList.value.push(name.value)
+            setOwnTop()
           })
         })
     )
@@ -103,7 +105,6 @@ export default defineComponent({
           ? (scroller.value as Window).document.documentElement
           : (scroller.value as HTMLElement)
       scroller.value?.addEventListener('scroll', handleScroll)
-      indexAnchors.forEach(({ setOwnTop }) => setOwnTop())
     })
 
     onBeforeUnmount(() => {
@@ -112,6 +113,7 @@ export default defineComponent({
 
     return {
       barEl,
+      active,
       anchorNameList,
       scrollTo,
       anchorClick,

diff --git a/packages/varlet-ui/src/index-bar/docs/en-US.md b/packages/varlet-ui/src/index-bar/docs/en-US.md
@@ -18,7 +18,7 @@ createApp().use(IndexBar).use(IndexAnchor)
 When you click the index bar, it will automatically jump to the corresponding `IndexAnchor` anchor position.
 
 ```html
-<var-index-bar v-model:active="active" @change="change">
+<var-index-bar @change="change">
   <div v-for="item in list" :key="item">
     <var-index-anchor 
       :index="item" 
@@ -33,14 +33,13 @@ When you click the index bar, it will automatically jump to the corresponding `I
 </var-index-bar>
 ```
 ```javascript
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
   export default {
     setup() {
-      const active = ref('A')
       const list = ref([])
 
-      onBeforeMount(() => {
+      onMounted(() => {
         for (let i = 0; i < 26; i++) {
           list.value.push(String.fromCharCode(65 + i))
         }
@@ -51,7 +50,6 @@ import { ref } from 'vue'
       }
 
       return {
-        active,
         list,
         change
       }
@@ -67,7 +65,6 @@ import { ref } from 'vue'
 
 | prop | Description | Type | Default |
 | ----- | -------------- | -------- | ---------- |
-| `v-model:active` | The currently active anchor | _string \| number_ | `-` |
 | `sticky` | Whether to enable anchor sticky top | _boolean_ | `true` |
 | `sticky-offset-top` | Anchor offset top when sticky | _number_ | `0` |
 | `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
@@ -18,7 +18,7 @@ createApp().use(IndexBar).use(IndexAnchor)
 点击索引栏时，会自动跳转到对应的 `IndexAnchor` 锚点位置。
 
 ```html
-<var-index-bar v-model:active="active" @change="change">
+<var-index-bar @change="change">
   <div v-for="item in list" :key="item">
     <var-index-anchor 
       :index="item" 
@@ -33,14 +33,13 @@ createApp().use(IndexBar).use(IndexAnchor)
 </var-index-bar>
 ```
 ```javascript
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
   export default {
     setup() {
-      const active = ref('A')
       const list = ref([])
 
-      onBeforeMount(() => {
+      onMounted(() => {
         for (let i = 0; i < 26; i++) {
           list.value.push(String.fromCharCode(65 + i))
         }
@@ -51,7 +50,6 @@ import { ref } from 'vue'
       }
 
       return {
-        active,
         list,
         change
       }
@@ -67,7 +65,6 @@ import { ref } from 'vue'
 
 | 参数 | 说明 | 类型 | 默认值 |
 | ----- | -------------- | -------- | ---------- |
-| `v-model:active` | 当前激活的索引 | _number \| string_ |`-` |
 | `sticky` | 是否开启锚点吸顶 | _boolean_ | `true` |
 | `sticky-offset-top` | 锚点吸顶时与顶部的距离 | _number_ | `0` |
 | `z-index` | z-index 层级 | _number \| string_ | `1` |

diff --git a/packages/varlet-ui/src/index-bar/example/index.vue b/packages/varlet-ui/src/index-bar/example/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="var-index-bar__example">
-    <var-index-bar v-model:active="active" @change="change">
+    <var-index-bar @change="change">
       <div v-for="item in list" :key="item">
         <var-index-anchor :index="item" class="var-index-anchor__example">
           {{ pack.title }} {{ item }}
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, onBeforeMount } from 'vue'
+import { defineComponent, ref, onMounted } from 'vue'
 import IndexAnchor from '../../index-anchor/IndexAnchor.vue'
 import IndexBar from '..'
 import Cell from '../../cell'
@@ -29,10 +29,9 @@ export default defineComponent({
     [Cell.name]: Cell,
   },
   setup() {
-    const active = ref('A')
     const list = ref([])
 
-    onBeforeMount(() => {
+    onMounted(() => {
       for (let i = 0; i < 26; i++) {
         list.value.push(String.fromCharCode(65 + i))
       }
@@ -45,7 +44,6 @@ export default defineComponent({
     watchLang(use)
 
     return {
-      active,
       list,
       pack,
       change,

diff --git a/packages/varlet-ui/src/index-bar/props.ts b/packages/varlet-ui/src/index-bar/props.ts
@@ -1,7 +1,4 @@
 export const props = {
-  active: {
-    type: [Number, String],
-  },
   sticky: {
     type: Boolean,
     default: true,

diff --git a/packages/varlet-ui/src/index-bar/provide.ts b/packages/varlet-ui/src/index-bar/provide.ts
@@ -1,9 +1,9 @@
-import { ComputedRef } from 'vue'
+import { ComputedRef, Ref } from 'vue'
 import { useAtChildrenCounter, useChildren } from '../utils/components'
 import { IndexAnchorProvider } from '../index-anchor/provide'
 
 export interface IndexBarProvider {
-  active: ComputedRef<number | string | undefined>
+  active: Ref<number | string | undefined>
   sticky: ComputedRef<boolean>
   stickyOffsetTop: ComputedRef<number>
   zIndex: ComputedRef<number | string>