feat(ui/tabs-items): add scrollIntoView, distance api

affects: @varlet/ui
varletjs · Jul 21, 2021 · a26f329 · a26f329
1 parent b0d506d
commit a26f329
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@ packages/varlet-cli/lib/index.d.ts
 packages/varlet-cli/site/mobile/*.routes.ts
 packages/varlet-cli/site/pc/*.routes.ts
 packages/varlet-cli/site/site.config.json
+packages/varlet-cli/site/*.site.config.json
 
 packages/varlet-ui/site
 packages/varlet-ui/es

diff --git a/packages/varlet-ui/src/tabs-items/TabsItems.vue b/packages/varlet-ui/src/tabs-items/TabsItems.vue
@@ -1,10 +1,5 @@
 <template>
-  <div
-    class="var-tabs-items"
-    :style="{
-      height: transitionHeight,
-    }"
-  >
+  <div class="var-tabs-items" :style="{ height: transitionHeight }">
     <slot />
   </div>
 </template>
@@ -16,6 +11,8 @@ import { props } from './props'
 import type { Ref, ComputedRef } from 'vue'
 import type { TabsItemsProvider } from './provide'
 import type { TabItemProvider } from '../tab-item/provide'
+import { getParentScroller, getTop, scrollTo, toPxNum } from '../utils/elements'
+import { linear } from '../utils/shared'
 
 export default defineComponent({
   name: 'VarTabsItems',
@@ -41,6 +38,21 @@ export default defineComponent({
       return matchName(active) || matchIndex(active)
     }
 
+    const scrollIntoView = (el: HTMLElement) => {
+      const { scrollIntoView, distance } = props
+
+      if (!scrollIntoView) {
+        return
+      }
+
+      setTimeout(() => {
+        scrollTo(getParentScroller(el), {
+          top: getTop(el) - toPxNum(distance),
+          animation: linear,
+        })
+      }, 300)
+    }
+
     const resize = () => {
       const tabItem: TabItemProvider | undefined = matchActive(props.active)
 
@@ -83,6 +95,7 @@ export default defineComponent({
 
         nextTick().then(() => {
           transitionHeight.value = `${Math.max(newEl.offsetHeight, oldEl.offsetHeight)}px`
+          scrollIntoView(newEl)
         })
       }
     )

diff --git a/packages/varlet-ui/src/tabs-items/docs/zh-CN.md b/packages/varlet-ui/src/tabs-items/docs/zh-CN.md
@@ -5,6 +5,8 @@
 | 参数 | 说明 | 类型 | 默认值 | 
 | --- | --- | --- | --- | 
 | `v-model:active` | 激活的选项卡的名字 | _string \| number_ | `-` |
+| `scrollIntoView` | 是否在切换时滚动到视口内 | _boolean_ | `false` |
+| `distance` | 滚动到视口内距离视口顶部的距离 | _string \| number_ | `0` |
 
 ### 插槽
 

diff --git a/packages/varlet-ui/src/tabs-items/props.ts b/packages/varlet-ui/src/tabs-items/props.ts
@@ -5,6 +5,14 @@ export const props = {
     type: [String, Number],
     default: 0,
   },
+  scrollIntoView: {
+    type: Boolean,
+    default: false,
+  },
+  distance: {
+    type: [String, Number],
+    default: 0,
+  },
   'onUpdate:active': {
     type: Function as PropType<(active: string | number) => void>,
   },

diff --git a/packages/varlet-ui/src/tabs/docs/en-US.md b/packages/varlet-ui/src/tabs/docs/en-US.md
@@ -267,6 +267,8 @@ Click the Tab to scroll automatically to the center of the viewport.
 | Prop | Description | Type | Default | 
 | --- | --- | --- | --- | 
 | `v-model:active` | The identity of the active tab | _string \| number_ | `-` |
+| `scrollIntoView` | Whether to scroll into the viewport when switching | _boolean_ | `false` |
+| `distance` | Scroll to the distance within the viewport from the top of the viewport | _string \| number_ | `0` |
 
 ### TabItem Props
 

diff --git a/packages/varlet-ui/src/tabs/docs/zh-CN.md b/packages/varlet-ui/src/tabs/docs/zh-CN.md
@@ -317,6 +317,8 @@ export default {
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
 | `default` | 视图组的内容 | `-` |
+| `scrollIntoView` | 是否在切换时滚动到视口内 | _boolean_ | `false` |
+| `distance` | 滚动到视口内距离视口顶部的距离 | _string \| number_ | `0` |
 
 ### TabItem Slots