Tabs add scroll

marxy
1 parent 2e8add2f
Showing 3 changed files with 161 additions and 6 deletions Show diff stats
examples/routers/tabs.vue
src/components/tabs/tabs.vue
src/styles/components/tabs.less
@@ -70,7 +70,7 @@
 <!--</script>-->
-<template>
+<!-- <template>
     <Tabs type="card" closable @on-tab-remove="handleTabRemove">
         <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
         <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
@@ -92,4 +92,41 @@
             }
         }
     }
+</script> -->
+
+<template>
+    <div>
+    <Button type="ghost" @click="toFirst" size="small">to first</Button>
+    <Button type="ghost" @click="toLast" size="small">to last</Button>
+    <Tabs type="card" :animated="animated"  v-model="activeTab">
+        <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab"  :name="tab+''" closable>标签{{ tab }}</TabPane>
+        <div slot="extra">
+            <Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>
+        </div>
+    </Tabs>
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                tabs: 2,
+                activeTab:"2",
+                animated:true
+            }
+        },
+        methods: {
+            handleTabsAdd () {
+                this.tabs ++;
+                this.activeTab = this.tabs + '';
+            },
+            toFirst () {
+                this.activeTab = '1';
+            },
+            toLast () {
+                this.activeTab = this.tabs+'';
+            }
+        }
+    }
 </script>
+
 <template>
     <div :class="classes">
         <div :class="[prefixCls + '-bar']">
+            <div :class="[prefixCls + '-nav-right']" v-if="showSlot"><slot name="extra"></slot></div>
             <div :class="[prefixCls + '-nav-container']">
-                <div :class="[prefixCls + '-nav-wrap']">
-                    <div :class="[prefixCls + '-nav-scroll']">
-                        <div :class="[prefixCls + '-nav']" ref="nav">
+                <div ref="navWrap" :class="[prefixCls + '-nav-wrap', scrollable ? prefixCls + '-nav-scrollable' : '']" >
+                    <span :class="[prefixCls + '-nav-prev', scrollable ? '' : prefixCls + '-nav-scroll-disabled']" @click="scrollPrev"><Icon type="chevron-left"></Icon></span>
+                    <span :class="[prefixCls + '-nav-next', scrollable ? '' : prefixCls + '-nav-scroll-disabled']" @click="scrollNext"><Icon type="chevron-right"></Icon></span>
+                    <div ref="navScroll" :class="[prefixCls + '-nav-scroll']">
+                        <div ref="nav" :class="[prefixCls + '-nav']" class="nav-text"  :style="navStyle">
                             <div :class="barClasses" :style="barStyle"></div>
                             <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)">
                                 <Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
@@ -13,7 +16,6 @@
                                 <Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon>
                             </div>
                         </div>
-                        <div :class="[prefixCls + '-nav-right']" v-if="showSlot"><slot name="extra"></slot></div>
                     </div>
                 </div>
             </div>
@@ -26,6 +28,7 @@
     import Render from '../base/render';
     import { oneOf } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
+    import elementResizeDetectorMaker from 'element-resize-detector';
     const prefixCls = 'ivu-tabs';
@@ -65,7 +68,11 @@
                 barWidth: 0,
                 barOffset: 0,
                 activeKey: this.value,
-                showSlot: false
+                showSlot: false,
+                navStyle:{
+                    transform: ''
+                },
+                scrollable:false
             };
         },
         computed: {
@@ -163,6 +170,7 @@
                     } else {
                         this.barOffset = 0;
                     }
+                    this.updateNavScroll();
                 });
             },
             updateStatus () {
@@ -222,6 +230,85 @@
                 } else {
                     return false;
                 }
+            },
+            scrollPrev() {
+                const containerWidth = this.$refs.navScroll.offsetWidth;
+                const currentOffset = this.getCurrentScrollOffset();
+
+                if (!currentOffset) return;
+
+                let newOffset = currentOffset > containerWidth
+                ? currentOffset - containerWidth
+                : 0;
+
+                this.setOffset(newOffset);
+            },
+            scrollNext() {
+                const navWidth = this.$refs.nav.offsetWidth;
+                const containerWidth = this.$refs.navScroll.offsetWidth;
+                const currentOffset = this.getCurrentScrollOffset();
+                if (navWidth - currentOffset <= containerWidth) return;
+
+                let newOffset = navWidth - currentOffset > containerWidth * 2
+                ? currentOffset + containerWidth
+                : (navWidth - containerWidth);
+
+                this.setOffset(newOffset);
+            },
+            getCurrentScrollOffset() {
+                const { navStyle } = this;
+                return navStyle.transform
+                ? Number(navStyle.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1])
+                : 0;
+            },
+            setOffset(value) {
+                this.navStyle.transform = `translateX(-${value}px)`;
+            },
+            scrollToActiveTab() {
+                if (!this.scrollable) return;
+                const nav = this.$refs.nav;
+                const activeTab = this.$el.querySelector(`.${prefixCls}-tab-active`);
+                if(!activeTab) return;
+
+                const navScroll = this.$refs.navScroll;
+                const activeTabBounding = activeTab.getBoundingClientRect();
+                const navScrollBounding = navScroll.getBoundingClientRect();
+                const navBounding = nav.getBoundingClientRect();
+                const currentOffset = this.getCurrentScrollOffset();
+                let newOffset = currentOffset;
+
+                if (navBounding.right < navScrollBounding.right) {
+                    newOffset = nav.offsetWidth - navScrollBounding.width;
+                }
+
+                if (activeTabBounding.left < navScrollBounding.left) {
+                    newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
+                }else if (activeTabBounding.right > navScrollBounding.right) {
+                    newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
+                }
+
+                if(currentOffset !== newOffset){
+                    this.setOffset(Math.max(newOffset, 0));
+                }
+            },
+            updateNavScroll(){
+                const navWidth = this.$refs.nav.offsetWidth;
+                const containerWidth = this.$refs.navScroll.offsetWidth;
+                const currentOffset = this.getCurrentScrollOffset();
+                if (containerWidth < navWidth) {
+                    this.scrollable = true;
+                    if (navWidth - currentOffset < containerWidth) {
+                        this.setOffset(navWidth - containerWidth);
+                    }
+                } else {
+                    this.scrollable = false;
+                    if (currentOffset > 0) {
+                        this.setOffset(0);
+                    }
+                }
+            },
+            handleResize(){
+                this.updateNavScroll();
             }
         },
         watch: {
@@ -232,10 +319,18 @@
                 this.updateBar();
                 this.updateStatus();
                 this.broadcast('Table', 'on-visible-change', true);
+                this.$nextTick(function(){
+                    this.scrollToActiveTab();
+                });
             }
         },
         mounted () {
             this.showSlot = this.$slots.extra !== undefined;
+            this.observer = elementResizeDetectorMaker();
+            this.observer.listenTo(this.$refs.navWrap, this.handleResize);
+        },
+        beforeDestroy() {
+            this.observer.removeListener(this.$refs.navWrap, this.handleResize);
         }
     };
 </script>
@@ -56,6 +56,29 @@
     &-nav-right{
         float: right;
+        margin-left: 5px;
+    }
+
+    &-nav-prev{
+        position:absolute;
+        line-height: 32px;
+        cursor: pointer;
+        left:0;
+    }
+
+    &-nav-next{
+        position:absolute;
+        line-height: 32px;
+        cursor: pointer;
+        right:0;
+    }
+
+    &-nav-scrollable{
+        padding: 0 12px;
+    }
+
+    &-nav-scroll-disabled{
+        display: none;
     }
     &-nav {