feat: #362 修改tab组件

src/packages/tab/doc.md

@@ -10,17 +10,18 @@
 
 ```html
 <nut-tab @tab-switch="tabSwitch" line-width="20">
-    <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
-    <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
-    <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
+  <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
+  <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
+  <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
 </nut-tab>
 ```
+
 ```javascript
 export default {
   methods: {
-      tabSwitch:function(index,event){
-        console.log(index+'--'+event);
-      }
+    tabSwitch: function(index, event) {
+      console.log(index + '--' + event);
+    }
   }
 };
 ```
@@ -28,86 +29,89 @@ export default {
 ## 使用数据渲染，支持上/下/左/右四个样式；
 
 ```html
-<nut-tab @tab-switch="tabSwitch"  position-nav="bottom">
-    <nut-tab-panel 
-      v-for="value in editableTabs" 
-      v-bind:key="value.tabTitle" 
-      :tab-title="value.tabTitle" 
-      :icon-url="value.tabUrl" 
-      v-html="value.content"
-    >
-    </nut-tab-panel>
+<nut-tab @tab-switch="tabSwitch" position-nav="bottom">
+  <nut-tab-panel
+    v-for="value in editableTabs"
+    v-bind:key="value.tabTitle"
+    :tab-title="value.tabTitle"
+    :icon-url="value.tabUrl"
+    v-html="value.content"
+  >
+  </nut-tab-panel>
 </nut-tab>
 ```
+
 ```javascript
 export default {
   data() {
     return {
-      positionNavCurr:'top',
-      editableTabs:[
+      positionNavCurr: 'top',
+      editableTabs: [
         {
-          'tabTitle':'衣物',
-          'tabUrl':'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
-          'content':'<p>衣物内容</p>'
+          tabTitle: '衣物',
+          tabUrl: 'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
+          content: '<p>衣物内容</p>'
         },
         {
-          'tabTitle':'日用品',
-          'tabUrl':'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
-          'content':'<p>日用品内容</p>'
+          tabTitle: '日用品',
+          tabUrl: 'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
+          content: '<p>日用品内容</p>'
         },
         {
-          'tabTitle':'器材',
-          'tabUrl':'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
-          'content':'<p>运动器材内容</p>'
+          tabTitle: '器材',
+          tabUrl: 'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
+          content: '<p>运动器材内容</p>'
         },
         {
-          'tabTitle':'电影票',
-          'tabUrl':'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
-          'content':'<p>电影票内容</p>'
+          tabTitle: '电影票',
+          tabUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
+          content: '<p>电影票内容</p>'
         }
       ]
     };
   },
   methods: {
-      tabSwitch:function(index,event){
-        console.log(index+'--'+event);
-      }
+    tabSwitch: function(index, event) {
+      console.log(index + '--' + event);
+    }
   }
 };
 ```
+
 ## 支持滑动选择多个页签
 
 ```html
-  <nut-tab @tab-switch="tabSwitch" :is-scroll="true">
-      <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
-      <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
-      <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
-      <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
-      <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
-      <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
-      <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
-  </nut-tab>
+<nut-tab @tab-switch="tabSwitch" :is-scroll="true" :def-index="5">
+  <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
+  <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
+  <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
+  <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
+  <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
+  <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
+  <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
+</nut-tab>
 ```
-## 支持滑动选择多个页签,设置tab高度为250,注意只有在 is-scroll = true的情况下，设置的 wrapper-height 才有效
+
+## 支持滑动选择多个页签,设置 tab 高度为 250,注意只有在 is-scroll = true 的情况下，设置的 wrapper-height 才有效
 
 ```html
-<nut-tab @tab-switch="tabSwitch" :is-scroll="true" position-nav="left" :wrapper-height="250">
-    <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
-    <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
-    <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
-    <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
-    <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
-    <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
-    <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
-    <nut-tab-panel tab-title="页签8">页签8</nut-tab-panel>
+<nut-tab @tab-switch="tabSwitch" :is-scroll="true" position-nav="left" :wrapper-height="250" :def-index="5">
+  <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
+  <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
+  <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
+  <nut-tab-panel tab-title="页签4">页签4</nut-tab-panel>
+  <nut-tab-panel tab-title="页签5">页签5</nut-tab-panel>
+  <nut-tab-panel tab-title="页签6">页签6</nut-tab-panel>
+  <nut-tab-panel tab-title="页签7">页签7</nut-tab-panel>
+  <nut-tab-panel tab-title="页签8">页签8</nut-tab-panel>
 </nut-tab>
 ```
 
-## 禁止选中，默认选中某个标签,如需更新数组后，重新渲染Tab页面，请将更新数组传入init-data
+## 禁止选中，默认选中某个标签,如需更新数组后，重新渲染 Tab 页面，请将更新数组传入 init-data
 
 ```html
 <nut-tab :def-index="1" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :init-data="disableTabs">
-    <nut-tab-panel
+  <nut-tab-panel
     v-for="value in disableTabs"
     v-bind:key="value.tabTitle"
     :tab-title="value.tabTitle"
@@ -116,8 +120,8 @@ export default {
   ></nut-tab-panel>
 </nut-tab>
 <div style="width:100%;height=50px;text-align:center">
-  <Button @click="resetHandler" type="light">重置Tab页面</Button>
-  <Button @click="clickHandler">更新Tab页面</Button>
+  <button @click="resetHandler" type="light">重置Tab页面</button>
+  <button @click="clickHandler">更新Tab页面</button>
 </div>
 ```
 
@@ -126,100 +130,92 @@ import Button from '../button/button.vue';
 export default {
   data() {
     return {
-      positionNavCurr:'top',
-      disableTabs:[
+      positionNavCurr: 'top',
+      disableTabs: [
         {
-          'tabTitle':'衣物',
-          'disable':false,
-          'tabUrl':'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
-          'content':'<p>衣物内容</p>'
+          tabTitle: '衣物',
+          disable: false,
+          tabUrl: 'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
+          content: '<p>衣物内容</p>'
         },
         {
-          'tabTitle':'日用品',
-          'tabUrl':'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
-          'content':'<p>日用品内容</p>'
+          tabTitle: '日用品',
+          tabUrl: 'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
+          content: '<p>日用品内容</p>'
         },
         {
-          'tabTitle':'运动器材',
-          'tabUrl':'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
-          'content':'<p>运动器材内容</p>'
+          tabTitle: '运动器材',
+          tabUrl: 'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
+          content: '<p>运动器材内容</p>'
         },
         {
-          'tabTitle':'电影票',
-          'tabUrl':'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
-          'content':'<p>电影票内容</p>'
+          tabTitle: '电影票',
+          tabUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
+          content: '<p>电影票内容</p>'
         }
       ]
     };
   },
   methods: {
-      tabSwitch:function(index,event){
-        console.log(index+'--'+event.target);
-      },
-      clickHandler:function(){
-        let newEditableTabs = [
-          {
-            tabTitle: "衣物2",
-            iconUrl:
-              "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
-            content: "<p>改变衣物内容</p>"
-          },
-          {
-            tabTitle: "日用品2",
-            iconUrl:
-              "http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg",
-            content: "<p>改变日用品内容</p>"
-          },
-          {
-            tabTitle: "器材2",
-            iconUrl:
-              "http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg",
-            content: "<p>改变运动器材内容</p>"
-          },
-          {
-            tabTitle: "电影票2",
-            iconUrl:
-              "http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg",
-            content: "<p>改变电影票内容</p>"
-          }
-        ]
-        this.disableTabs = newEditableTabs;
-      },
-      resetHandler:function(){
-          let newEditableTabs = [
-          {
-            tabTitle: "衣物",
-            disable: false,
-            iconUrl:
-              "http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg",
-            content: "<p>衣物内容</p>"
-          },
-          {
-            tabTitle: "日用品",
-            iconUrl:
-              "http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg",
-            content: "<p>日用品内容</p>"
-          },
-          {
-            tabTitle: "运动器材",
-            iconUrl:
-              "http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg",
-            content: "<p>运动器材内容</p>"
-          },
-          {
-            tabTitle: "电影票",
-            iconUrl:
-              "http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg",
-            content: "<p>电影票内容</p>"
-          }
-        ]
-        this.disableTabs = newEditableTabs;
-      }
+    tabSwitch: function(index, event) {
+      console.log(index + '--' + event.target);
+    },
+    clickHandler: function() {
+      let newEditableTabs = [
+        {
+          tabTitle: '衣物2',
+          iconUrl: 'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
+          content: '<p>改变衣物内容</p>'
+        },
+        {
+          tabTitle: '日用品2',
+          iconUrl: 'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
+          content: '<p>改变日用品内容</p>'
+        },
+        {
+          tabTitle: '器材2',
+          iconUrl: 'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
+          content: '<p>改变运动器材内容</p>'
+        },
+        {
+          tabTitle: '电影票2',
+          iconUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
+          content: '<p>改变电影票内容</p>'
+        }
+      ];
+      this.disableTabs = newEditableTabs;
+    },
+    resetHandler: function() {
+      let newEditableTabs = [
+        {
+          tabTitle: '衣物',
+          disable: false,
+          iconUrl: 'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
+          content: '<p>衣物内容</p>'
+        },
+        {
+          tabTitle: '日用品',
+          iconUrl: 'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
+          content: '<p>日用品内容</p>'
+        },
+        {
+          tabTitle: '运动器材',
+          iconUrl: 'http://img20.360buyimg.com/uba/jfs/t30346/262/553689202/2257/5dfa3983/5bf76407N72deabf4.jpg',
+          content: '<p>运动器材内容</p>'
+        },
+        {
+          tabTitle: '电影票',
+          iconUrl: 'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
+          content: '<p>电影票内容</p>'
+        }
+      ];
+      this.disableTabs = newEditableTabs;
+    }
   }
 };
 ```
 
-## 支持slot
+## 支持 slot
 
 ```html
 <nut-tab :def-index="defIndex" :initData="slotTabs" class="customer-css" @tab-switch="tabSwitch" :contentShow="true" :is-show-line="false">
@@ -261,8 +257,7 @@ export default {
 };
 ```
 
-## 支持徽标badge
-
+## 支持徽标 badge
 
 ```html
 <nut-tab :def-index="defIndex" :initData="badgeTabs" @tab-switch="tabSwitch" :contentShow="true">
@@ -324,30 +319,29 @@ export default {
 
 ### nut-tab
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| position-nav | 页签栏的分布，可选值 top/bottom/left/right | String | top
-| def-index | 默认选中的页签栏 | String | 1
-| init-data | 监听数据变化，渲染更新页面 | Array | []
-| is-show-line|是否显示tab切换时的红条|Boolean|true|
-| is-scroll|是否支持滑动选择多个页签|Boolean|false|
-| wrapper-height |设置tab的高度，只有在 is-scroll=true；positionNav=left或者right 的情况下有效|Number/String|200|
-| line-width | 页签底部红条自定义宽度|默认为0，则等于页签的宽度|
+| 字段           | 说明                                                                             | 类型                       | 默认值 |
+| -------------- | -------------------------------------------------------------------------------- | -------------------------- | ------ |
+| position-nav   | 页签栏的分布，可选值 top/bottom/left/right                                       | String                     | top    |
+| def-index      | 默认选中的页签栏                                                                 | String                     | 1      |
+| init-data      | 监听数据变化，渲染更新页面                                                       | Array                      | []     |
+| is-show-line   | 是否显示 tab 切换时的红条                                                        | Boolean                    | true   |
+| is-scroll      | 是否支持滑动选择多个页签                                                         | Boolean                    | false  |
+| wrapper-height | 设置 tab 的高度，只有在 is-scroll=true；positionNav=left 或者 right 的情况下有效 | Number/String              | 200    |
+| line-width     | 页签底部红条自定义宽度                                                           | 默认为 0，则等于页签的宽度 |
 
 ### nut-tab-panel
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| tab-title | 页签的标题 | String | ''
-| tab-slot | 页签的插槽名 | String | ''
-| badge | [徽标组件](/#/badge)属性 | Object | false
-| icon-url | 页签的图标地址 | String | ''
-| content | 页签的自定义内容 | String | ''
-| disable | 是否禁用页签 |Boolean|false|
+| 字段      | 说明                     | 类型    | 默认值 |
+| --------- | ------------------------ | ------- | ------ |
+| tab-title | 页签的标题               | String  | ''     |
+| tab-slot  | 页签的插槽名             | String  | ''     |
+| badge     | [徽标组件](/#/badge)属性 | Object  | false  |
+| icon-url  | 页签的图标地址           | String  | ''     |
+| content   | 页签的自定义内容         | String  | ''     |
+| disable   | 是否禁用页签             | Boolean | false  |
 
 ### Event
 
-| 事件名称 | 说明 | 回调参数 
-|----- | ----- | ----- 
-| tab-switch | 切换页签时触发事件 | 点击的索引值和触发元素
-
+| 事件名称   | 说明               | 回调参数               |
+| ---------- | ------------------ | ---------------------- |
+| tab-switch | 切换页签时触发事件 | 点击的索引值和触发元素 |

src/packages/tab/tab.scss

@@ -1,242 +1,243 @@
 .nut-tab {
-    position: relative;
-    border: 1px solid #eee;
-    padding: 10px;
-    font-size: 12px;
-    background: #eee;
-  }
-  .nut-tab-horizontal {
-    display: flex;
-    flex-direction: row;
-    position: relative;
-  }
-  
-  .close-btn {
-    position: absolute;
-    width: 17px;
-    height: 17px;
-    text-align: center;
-    line-height: 14px;
-    font-size: 16px;
-    background: #999;
-    font-weight: normal;
-    color: #fff;
-    right: 0px;
-    top: 0px;
-    border-radius: 50%;
-  }
-  .nut-tab-horizontal .close-btn {
+  position: relative;
+  border: 1px solid #eee;
+  padding: 10px;
+  font-size: 12px;
+  background: #eee;
+}
+.nut-tab-horizontal {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+}
+
+.close-btn {
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  text-align: center;
+  line-height: 14px;
+  font-size: 16px;
+  background: #999;
+  font-weight: normal;
+  color: #fff;
+  right: 0px;
+  top: 0px;
+  border-radius: 50%;
+}
+.nut-tab-horizontal .close-btn {
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  text-align: center;
+  line-height: 14px;
+  font-size: 16px;
+  background: #999;
+  font-weight: normal;
+  color: #fff;
+  right: 0px;
+  top: 0px;
+  border-radius: 50%;
+}
+.nut-tab-title {
+  //border:1px solid #fff;
+  border-bottom: 1px solid #ededed;
+  width: 100%;
+  display: flex;
+  height: 50px;
+  line-height: 48px;
+  box-sizing: border-box;
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+.nut-tab-title-smooth {
+  scroll-behavior: smooth;
+}
+.nav-bar {
+  position: absolute;
+  height: 2px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 2;
+  background: red;
+  transition: all 0.3s ease-in-out;
+}
+.nut-tab-title-leftnav {
+  border-right: 1px solid #ededed;
+  scroll-behavior: smooth;
+  width: 100px;
+  display: flex;
+  background: #fff;
+  flex-direction: column;
+  position: relative;
+  // height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .nav-bar-left {
     position: absolute;
-    width: 17px;
-    height: 17px;
-    text-align: center;
-    line-height: 14px;
-    font-size: 16px;
-    background: #999;
-    font-weight: normal;
-    color: #fff;
+    width: 2px;
     right: 0px;
     top: 0px;
-    border-radius: 50%;
-  }
-  .nut-tab-title {
-    //border:1px solid #fff;
-    border-bottom: 1px solid #ededed;
-    scroll-behavior: smooth;
-    width: 100%;
-    display: flex;
-    height: 50px;
-    line-height: 48px;
-    box-sizing: border-box;
-    position: relative;
-    overflow-x: auto;
-    overflow-y: hidden;
-    &::-webkit-scrollbar {
-        display: none;
-    }
-  }
-  .nav-bar {
-    position: absolute;
-    height: 2px;
-    bottom: 0px;
-    left: 0px;
     z-index: 2;
-    background: $primary-color;
+    background: #eee;
     transition: all 0.3s ease-in-out;
   }
-  .nut-tab-title-leftnav {
-    border-right: 1px solid #ededed;
-    scroll-behavior: smooth;
-    width: 100px;
-    display: flex;
-    background: #fff;
-    flex-direction: column;
-    position: relative;
-    // height: 200px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    &::-webkit-scrollbar {
-        display: none;
-    }
-    .nav-bar-left {
-      position: absolute;
-      width: 2px;
-      right: 0px;
-      top: 0px;
-      z-index: 2;
-      background: $primary-color;
-      transition: all 0.3s ease-in-out;
-    }
-    .nut-title-nav {
-      border: 0;
-      border-left: 1px solid #f5f7fa;
-    }
-    .nut-tab-active {
-      background: #fff;
-      a{
-        color: red;
-      }
-    }
-  }
-  .nut-tab-title-rightnav {
-    background: #fff;
-    // border: 1px solid #fff;
-    scroll-behavior: smooth;
-    border-left: 1px solid #ededed;
-    width: 100px;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    overflow-y: auto;
-    overflow-x: hidden;
-    // height: 200px;
-    box-sizing: border-box;
-    &::-webkit-scrollbar {
-        display: none;
-    }
-    .nav-bar-right {
-      position: absolute;
-      width: 2px;
-      left: 0px;
-      top: 0px;
-      z-index:2;
-      background: $primary-color;
-      transition: all 0.3s ease-in-out;
-    }
-  }
-  .nut-tab-link {
-    color: #333;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 12px;
-    text-decoration: none;
-    line-height: 1;
-    width: 100%;
-    height:100%;
-  }
-  .nut-tab-title-bottomnav {
-    border: 1px solid #fff;
-    scroll-behavior: smooth;
-    border-top: 1px solid #ededed;
-    width: 100%;
-    display: flex;
-    height: 50px;
-    line-height: 49px;
-    box-sizing: border-box;
-    position: relative;
-    overflow-x: auto;
-    overflow-y: hidden;
-    &::-webkit-scrollbar {
-        display: none;
-    }
-    .nav-bar-bottom {
-      position: absolute;
-      height: 2px;
-      left: 0px;
-      top: 0px;
-      z-index: 2;
-      background: $primary-color;
-      transition: all 0.3s ease-in-out;
-    }
-  }
-  
-  .nut-title-nav-list {
-    flex: 1;
-    position: relative;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    background: #fff;
-    box-sizing: border-box;
-  }
-  .nut-title-nav-leftnav {
-    flex: 1;
-    display: flex;
-    padding-left: 5px;
-    //justify-content: center;
-    align-items: center;
-    position: relative;
-  }
-  .nut-title-nav-rightnav {
-    flex: 1;
-    display: flex;
-    padding-right: 5px;
-    justify-content: flex-end;
-    align-items: center;
-    position: relative;
-  }
-  .nut-title-nav-scroll{
-    min-width: 100px;
-    position: relative;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    background: #fff;
-    box-sizing: border-box;
-  }
-  .nut-title-vertical-scroll{
-    min-height: 55px;
-    position: relative;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    background: #fff;
-    box-sizing: border-box;
-  }
-  .nut-tab-icon {
-    display: inline-block;
-    margin-right: 5px;
-    width: 20px;
-    height: 20px;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-  .nut-tab-active {
-    background: #fff;
+  .nut-title-nav {
     border: 0;
-    a{
-        color: red;
-    }
+    border-left: 1px solid #f5f7fa;
   }
-  .nut-tab-item {
-    height: 200px;
-    border: 1px solid #fff;
+  .nut-tab-active {
     background: #fff;
-    width: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    .hide {
-      display: none;
+    a {
+      color: red;
     }
   }
-  .nut-tab-disable {
-    background: #e1e1e1 !important;
+}
+.nut-tab-title-rightnav {
+  background: #fff;
+  // border: 1px solid #fff;
+  scroll-behavior: smooth;
+  border-left: 1px solid #ededed;
+  width: 100px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  // height: 200px;
+  box-sizing: border-box;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .nav-bar-right {
+    position: absolute;
+    width: 2px;
+    left: 0px;
+    top: 0px;
+    z-index: 2;
+    background: #eee;
+    transition: all 0.3s ease-in-out;
   }
-  .tabbar-nav-word {
-    font-size: $font-size-small;
+}
+.nut-tab-link {
+  color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  text-decoration: none;
+  line-height: 1;
+  width: 100%;
+  height: 100%;
+}
+.nut-tab-title-bottomnav {
+  border: 1px solid #fff;
+  scroll-behavior: smooth;
+  border-top: 1px solid #ededed;
+  width: 100%;
+  display: flex;
+  height: 50px;
+  line-height: 49px;
+  box-sizing: border-box;
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .nav-bar-bottom {
+    position: absolute;
+    height: 2px;
+    left: 0px;
+    top: 0px;
+    z-index: 2;
+    background: #eee;
+    transition: all 0.3s ease-in-out;
   }
-  
+}
+
+.nut-title-nav-list {
+  flex: 1;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  background: #fff;
+  box-sizing: border-box;
+}
+.nut-title-nav-leftnav {
+  flex: 1;
+  display: flex;
+  padding-left: 5px;
+  //justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.nut-title-nav-rightnav {
+  flex: 1;
+  display: flex;
+  padding-right: 5px;
+  justify-content: flex-end;
+  align-items: center;
+  position: relative;
+}
+.nut-title-nav-scroll {
+  min-width: 100px;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  background: #fff;
+  box-sizing: border-box;
+}
+.nut-title-vertical-scroll {
+  min-height: 55px;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  background: #fff;
+  box-sizing: border-box;
+}
+.nut-tab-icon {
+  display: inline-block;
+  margin-right: 5px;
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.nut-tab-active {
+  background: #fff;
+  border: 0;
+  a {
+    color: red;
+  }
+}
+.nut-tab-item {
+  height: 200px;
+  border: 1px solid #fff;
+  background: #fff;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  .hide {
+    display: none;
+  }
+}
+.nut-tab-disable {
+  background: #e1e1e1 !important;
+}
+.tabbar-nav-word {
+  font-size: 12px;
+}

src/packages/tab/tab.vue

@@ -83,10 +83,19 @@ export default {
       activeIndex: this.defIndex,
       initX: '0',
       navWidth: 0,
-      tapWidth: 0
+      tapWidth: 0,
+      smoothFlag: true
     };
   },
   watch: {
+    $route: {
+      handler(val, oldval) {
+        this.smoothFlag = false;
+        this.scrollTab(this.activeIndex);
+      },
+      // 深度观察监听
+      deep: true
+    },
     isScroll() {
       this.updeteTab();
     },
@@ -109,10 +118,11 @@ export default {
       if (this.positionNav === 'left' || this.positionNav === 'right') return true;
     },
     titleClass: function() {
+      const smooth = this.smoothFlag ? 'nut-tab-title-smooth' : '';
       if (this.positionNav == 'top') {
-        return 'nut-tab-title';
+        return 'nut-tab-title' + ' ' + smooth;
       }
-      return 'nut-tab-title-' + this.positionNav + 'nav';
+      return 'nut-tab-title-' + this.positionNav + 'nav' + ' ' + smooth;
     },
     navBarClass: function() {
       if (this.positionNav == 'top') {
@@ -183,7 +193,6 @@ export default {
             badge: attrs['badge'] || false
           };
           this.tabTitleList.push(item);
-
           //   let slotElm = slot[i].elm;
           //   if (slotElm) {
           //     slotElm.classList.add('hide');
@@ -227,6 +236,7 @@ export default {
     },
     switchTab: function(index, event, disable) {
       if (!disable) {
+        this.smoothFlag = true;
         this.activeIndex = index;
         // this.initX = parseInt(this.navWidth * index);
         this.scrollTab(index);
@@ -241,12 +251,10 @@ export default {
         this.initX = parseInt(this.navWidth * index);
       }
       if (this.positionNav == 'top' || this.positionNav == 'bottom') {
-        console.log('滑动距离', this.initX, this.tapWidth);
-        this.$refs.navlist.scroll(this.initX - this.tapWidth, 0);
+        this.$refs.navlist.scroll(this.initX - this.tapWidth, 0, 0);
       } else {
         this.$refs.navlist.scroll(0, this.initX - this.tapWidth);
       }
-      // 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) {