fix:tab

docs/examples-docs/tab.md

@@ -1,7 +1,7 @@
 <style>
 @component-namespace demo {
   @b tab {
-    .zan-tabs-pane {
+    .zan-tab__pane {
       background-color: #fff;
       padding: 20px;
     }
@@ -9,6 +9,26 @@
 }
 </style>
 
+<script>
+export default {
+  data() {
+    return {
+      active: 2
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.active = 3;
+    }, 1000);
+  },
+  methods: {
+    popalert() {
+      alert('haha')
+    }
+  }
+};
+</script>
+
 ## Tab 组件
 
 ### 基础用法
@@ -24,20 +44,11 @@
 </zan-tabs>
 ```
 
-<script>
-export default {
-  methods: {
-    popalert() {
-      alert('haha')
-    }
-  }
-};
-</script>
 :::
 ### 禁用用法
 :::demo 禁用用法
 ```html
-<zan-tabs>
+<zan-tabs :active="active">
   <zan-tab title="选项一">内容一</zan-tab>
   <zan-tab disable title="选项二" @disable="popalert">内容二</zan-tab>
   <zan-tab title="选项三">内容三</zan-tab>

packages/tab/src/tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="zan-tabs-pane" :class="classNames">
+  <div class="zan-tab__pane" :class="classNames">
     <slot></slot>
   </div>
 </template>
@@ -17,7 +17,7 @@
     },
     computed: {
       classNames() {
-        return { 'is-select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
+        return { 'zan-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
       }
     },
     created() {

packages/tab/src/tabs.vue

@@ -1,24 +1,25 @@
 <template>
   <div class="zan-tabs">
-    <div class="zan-tabs-nav" :class="classNames">
+    <div class="zan-tabs__nav" :class="classNames">
-      <div class="zan-tabs-nav-bar" :style="navBarStyle"></div>
+      <div class="zan-tabs__nav-bar" :style="navBarStyle"></div>
       <div
         v-for="(tab, index) in tabs"
         class="zan-tab"
-        :class="{'zan-tab-active': index == switchActiveTabKey}"
+        :class="{'zan-tab--active': index == switchActiveTabKey}"
         ref="tabkey"
         @click="handleTabClick(index,tab)"
       >
         {{ tab.title }}
       </div>
     </div>
-    <div class="zan-tabs-content"><slot></slot></div>
+    <div class="zan-tabs__content"><slot></slot></div>
   </div>
 </template>
 
 <script>
   export default {
     name: 'zan-tabs',
+
     props: {
       // 外部传入的激活的tab标签
       active: {
@@ -36,17 +37,26 @@
         default: ''
       }
     },
+
     data() {
       return {
         tabs: [],
         isReady: false,
-        switchActiveTabKey: this.active
+        switchActiveTabKey: +this.active
       };
     },
+
+    watch: {
+      active(val) {
+        this.switchActiveTabKey = +val;
+      }
+    },
+
     computed: {
       classNames() {
-        return [`zan-tabs-${this.type}`, this.navclass];
+        return [`zan-tabs__nav--${this.type}`, `zan-tabs--col-${this.tabs.length}`, this.navclass];
       },
+
       navBarStyle() {
         if (!this.isReady) return;
         const tabKey = this.switchActiveTabKey;
@@ -59,6 +69,7 @@
         };
       }
     },
+
     methods: {
       handleTabClick(index, el) {
         if (el.disable) {
@@ -68,6 +79,7 @@
         this.switchActiveTabKey = index;
       }
     },
+
     mounted() {
       // 页面载入完成
       this.$nextTick(() => {

packages/zanui-css/src/tab.css

@@ -2,86 +2,109 @@
 @import './mixins/border_retina.css';
 
 @component-namespace zan {
-    @b tabs {
+  @b tabs {
-        position: relative;
+    position: relative;
+
+    @m col-2 {
+      .zan-tab {
+        width: 50%;
+      }
     }
-    @b tabs-line {
+
+    @m col-3 {
+      .zan-tab {
+        width: 33.33333333333333%;
+      }
+    }
+
+    @m col-4 {
+      .zan-tab {
+        width: 25%;
+      }
+    }
+
+    @m col-5 {
+      .zan-tab {
+        width: 20%;
+      }
+    }
+
+    @e nav {
+      overflow: hidden;
+      transition: transform .5s cubic-bezier(.645, .045, .355, 1);
+      position: relative;
+
+      @m line {
         height: 44px;
         background-color: $c-white;
         &::after {
-            @mixin border-retina (top);
+          @mixin border-retina (top);
-            @mixin border-retina (bottom);
+          @mixin border-retina (bottom);
         }
         @b tabs-nav-bar {
-            display: block;
+          display: block;
         }
-    }
+      }
-    @b tabs-card {
+
+      @m card {
         height: 28px;
         margin: 0 15px;
         background-color: $c-white;
         border-radius: 2px;
         border: 1px solid #666666;
         overflow: hidden;
-        .zan-tabs-nav-bar {
+        .zan-tabs__nav-bar {
-            display: none;
+          display: none;
         }
         .zan-tab {
-            color: #666666;
+          color: #666666;
-            line-height: 28px;
+          line-height: 28px;
-            border-right: 1px solid #666666;
+          border-right: 1px solid #666666;
-            &:last-child {
+          &:last-child {
-                border-right: none;
+            border-right: none;
-            }
+          }
-            &.zan-tab-active {
+          &.zan-tab--active {
-                background-color: #666666;
+            background-color: #666666;
-                color: $c-white;
+            color: $c-white;
-            }
+          }
         }
+      }
     }
-    @b tabs-nav {
+
-        display: flex;
+    @e nav-bar {
-        transition: transform .5s cubic-bezier(.645, .045, .355, 1);
+      z-index: 1;
-        position: relative;
+      position: absolute;
-        /*float: left*/
+      left: 0;
-        &::after, &::before {
+      bottom: 0;
-            display: table;
+      height: 2px;
-            content: " "
+      background-color: #f13e3a;
-        }
+      transition: transform .3s cubic-bezier(.645, .045, .355, 1);
-        &::after {
+      transform-origin: 0 0;
-            clear: both
-        }
     }
-    @b tabs-nav-bar {
+  }
-        z-index: 1;
+
-        position: absolute;
+  @b tab {
-        left: 0;
+    color: $c-black;
-        bottom: 0;
+    font-size: 14px;
-        height: 2px;
+    line-height: 44px;
-        background-color: #f13e3a;
+    box-sizing: border-box;
-        transition: transform .3s cubic-bezier(.645, .045, .355, 1);
+    transition: color .3s cubic-bezier(.645, .045, .355, 1);
-        transform-origin: 0 0;
+    cursor: pointer;
+    text-align: center;
+    float: left;
+
+    @m active {
+      color: #FF4444;
     }
-    @b tab {
+
-        color: $c-black;
+    @e pane {
-        font-size: 14px;
+      display: none;
-        line-height: 44px;
+
-        flex: 1;
+      @m select {
-        display: inline-block;
+        display: block;
-        box-sizing: border-box;
+      }
-        transition: color .3s cubic-bezier(.645, .045, .355, 1);
-        cursor: pointer;
-        text-align: center;
-    }
-    @b tab-active {
-        color: #FF4444;
-    }
-    @b tabs-pane {
-        display: none;
-        @when select {
-            display: block;
-        }   
     }
+  }
 }