修改tab组件

src/packages/tab/demo.vue

@@ -129,7 +129,7 @@ export default {
   },
   methods: {
     tabSwitch: function(index, event) {
-      console.log(index + "--" + event.target);
+      console.log(index + "--" + event);
       //this.defIndex = index;
     },
     clickHandler:function(){

src/packages/tab/doc.md

@@ -19,7 +19,7 @@
 export default {
   methods: {
       tabSwitch:function(index,event){
-        console.log(index+'--'+event.target);
+        console.log(index+'--'+event);
       }
   }
 };
@@ -70,7 +70,7 @@ export default {
   },
   methods: {
       tabSwitch:function(index,event){
-        console.log(index+'--'+event.target);
+        console.log(index+'--'+event);
       }
   }
 };

src/packages/tab/tab.scss

@@ -39,7 +39,7 @@
     top: 0px;
     border-radius: 50%;
 }
-.nut-tab-title-top{
+.nut-tab-title{
     //border:1px solid #fff;
     border-bottom:1px solid #EDEDED;
     width: 100%;
@@ -49,7 +49,7 @@
     box-sizing: border-box;
     position: relative;   
 }
-.nav-bar-top{
+.nav-bar{
     position: absolute;
     height: 2px;
     bottom: -2px;
@@ -57,7 +57,7 @@
     background:$primary-color;
     transition: all 0.4s ease-in-out;
 }
-.nut-tab-title-left{
+.nut-tab-title-leftnav{
     border-right:1px solid #EDEDED;
     width: 100px;
     display: flex;
@@ -80,7 +80,7 @@
         background: #fff;
     }
 }
-.nut-tab-title-right{
+.nut-tab-title-rightnav{
     background: #fff;
     border:1px solid #fff;
     border-left:1px solid #EDEDED;
@@ -105,10 +105,8 @@
     font-size:12px;
     text-decoration:none;
     line-height: 1;
-    flex:1;
-    height: 100%;
 }
-.nut-tab-title-bottom{
+.nut-tab-title-bottomnav{
     border:1px solid #fff;
     border-top:1px solid #EDEDED;
     width: 100%;
@@ -127,7 +125,7 @@
     }
 }
 
-.nut-title-nav-list-top,.nut-title-nav-list-bottom{
+.nut-title-nav-list{
     flex: 1;
     position: relative;
     flex-direction: row;
@@ -137,7 +135,7 @@
     background: #fff;
     box-sizing: border-box;
 }
-.nut-title-nav-list-left{
+.nut-title-nav-leftnav{
     flex:1;
     display: flex;
     padding-left: 5px;
@@ -145,7 +143,7 @@
     align-items: center;
     position: relative;
 }
-.nut-title-nav-list-right{
+.nut-title-nav-rightnav{
     flex:1;
     display: flex;
     padding-right: 5px;

src/packages/tab/tab.vue

@@ -1,19 +1,20 @@
 <template>
-    <div class="nut-tab">
-        <div  :class="{'nut-tab-horizontal' : positionNavCss}">
+    <div class="nut-tab-part" >
+        <div class="nut-tab" :class="{'nut-tab-horizontal' : positionNavCss}">
             <div v-if="positionNav=='right' || positionNav=='bottom'" class="nut-tab-item" ref="items">
                 <slot></slot>
             </div>
             <div :class="titleCLass">
                 <b v-if="isShowLine" :class="navBarClass" :style="navBarStyle"></b>
-                <span v-for="(value,index) in tabTitleList"  
+                <span 
+                    v-for="(value,index) in tabTitleList"  
                     :key="index"
                     :class="[titleNavList,'nut-title-nav',{'nut-tab-disable':value.disable},{'nut-tab-active' : activeIndex == index}]"
                 >
-                <span class="nut-tab-link" v-on:click="switchTab(index,$event,value.disable)">
-                <i class="nut-tab-icon" :style="{backgroundImage: 'url('+value.iconUrl+')'}" v-if="value.iconUrl"></i>
-                    {{value.tabTitle}}
-                </span>
+                    <a class="nut-tab-link" v-on:click="switchTab(index,$event,value.disable)">
+                        <i class="nut-tab-icon" :style="{backgroundImage: 'url('+value.iconUrl+')'}" v-if="value.iconUrl"></i>
+                        {{value.tabTitle}}
+                    </a>
                 </span>
             </div>
             <div v-if="positionNav=='top' || positionNav=='left'" class="nut-tab-item" ref="items">
@@ -65,17 +66,27 @@ export default {
        }
     },
     computed:{
+        //下面有些样式名称是为了兼容之前的版本
         positionNavCss:function(){
             if(this.positionNav==='left' || this.positionNav==='right') return true;
         },
         titleCLass:function() {
-            return "nut-tab-title-" + this.positionNav;
+            if(this.positionNav == 'top'){
+                return "nut-tab-title"
+            }
+            return "nut-tab-title-" + this.positionNav +"nav";
         },
         navBarClass:function() {
+            if(this.positionNav == 'top'){
+                return "nav-bar"
+            }
             return "nav-bar-"+ this.positionNav;
         },
         titleNavList:function(){
-            return "nut-title-nav-list-"+ this.positionNav;
+            if(this.positionNav == 'top' || this.positionNav == 'bottom'){
+                return "nut-title-nav-list"
+            }
+            return "nut-title-nav-"+ this.positionNav + 'nav';
         },
         navBarStyle:function(){
             if(this.positionNav==="top"||this.positionNav==="bottom"){
@@ -135,17 +146,16 @@ export default {
             if(obj.currentStyle){
                 return obj.currentStyle[styleName];
             }else{
-                console.log(getComputedStyle(obj,null)[styleName]);
                 return getComputedStyle(obj,null)[styleName];
             }
         },
         getTabWidth:function(){
             if(this.positionNav=='top' || this.positionNav=='bottom'){
-                let tabTitle = document.querySelector('.nut-tab-title-top');
+                let tabTitle = document.querySelector('.nut-tab-title');
                 let tabWidth = this.getStyle(tabTitle,'width');
                 this.setInitX(tabWidth);
             }else{
-                let tabTitle = document.querySelector('.nut-tab-title-left')|| document.querySelector('.nut-tab-title-right');
+                let tabTitle = document.querySelector('.nut-tab-title-leftnav')|| document.querySelector('.nut-tab-title-rightnav');
                 let tabWidth = this.getStyle(tabTitle,'height');
                 this.setInitX(tabWidth);
             }
@@ -172,7 +182,7 @@ export default {
             if(!disable){
                 this.activeIndex=index;
                 this.initX= parseInt(this.navWidth * index);
-                let nutTab = this.findParent(event,'nut-tab');
+                let nutTab = this.findParent(event,'nut-tab-part');
                 let items = this.$refs.items.children;
                 for(let i=0;i<items.length;i++){
                     if(i==index){