feat: 优化tabbar组件

package.json

@@ -18,7 +18,7 @@
     "clean": "nutui-cli clean",
     "add": "nutui-cli add",
     "lint": "nutui-cli lint",
-    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/tab/__test__/**.spec.js",
+    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/tabbar/__test__/**.spec.js",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "test:watch": "npm run test --watch",
     "prettier:check": "prettier -l src/**/*.{ts,js,vue,scss}",

src/packages/tab/tab.vue

@@ -134,7 +134,6 @@ export default {
         let slotTag = slot[i].tag;
         if (typeof slotTag == 'string' && slotTag.indexOf('nut-tab-panel') != -1) {
           let attrs = slot[i].data.attrs;
-          console.log(attrs.disable);
           let item = {
             tabTitle: attrs['tab-title'] || attrs['tabTitle'],
             disable: attrs.disable === true,

src/packages/tabbar/__test__/tabbar.spec.js

@@ -2,55 +2,44 @@ import { shallowMount, mount } from '@vue/test-utils'
 import Tabbar from '../tabbar.vue';
 import Vue from 'vue';
 
-
 describe('Tabbar.vue', () => {
-    const wrapper = mount(Tabbar,{
-		propsData:{
-			tabList: [
-				{
-					'tabTitle':'百度',
-					'curr':false,
-					'icon':'',
-					'num':5,
-				},
-				{
-					'tabTitle':'京东',
-					'curr':true,
-					'icon':''
-				},
-				{
-					'tabTitle':'知乎',
-					'curr':false,
-					'icon':'',
-				}
-			]
-		}
+	const wrapper = mount(Tabbar)
+	wrapper.setData({
+		currIndex:1,
+		tabList: [
+			{
+				tabTitle: '定位',
+				curr: false,
+				href:"http://nutui.jd.com/demo.html#/index",
+				icon: require('../../../assets/img/address.png'),
+				activeIcon: require('../../../assets/img/address-red.png')
+			},
+			{
+				tabTitle: '收藏',
+				curr: false,
+				isDot:true,
+				href:"http://nutui.jd.com/demo.html#/index",
+				icon: require('../../../assets/img/collection.png'),
+				activeIcon: require('../../../assets/img/collection-red.png')
+			},
+			{
+				tabTitle: '任务',
+				curr: true,
+				num:9,
+				href:"http://nutui.jd.com/demo.html#/index",
+				icon: require('../../../assets/img/task.png'),
+				activeIcon: require('../../../assets/img/task-red.png')
+			},
+			{
+				tabTitle: '我的',
+				curr: false,
+				num:100,
+				href:"http://nutui.jd.com/demo.html#/index",
+				icon: require('../../../assets/img/myicon.png'),
+				activeIcon: require('../../../assets/img/myicon-red.png')
+			}
+		]
 	});
-	wrapper.setData({ tabList: [
-		{
-			'tabTitle':'百度',
-			'curr':false,
-			'icon':'',
-			'num':5,
-		},
-		{
-			'tabTitle':'京东',
-			'curr':true,
-			'icon':''
-		},
-		{
-			'tabTitle':'知乎',
-			'curr':false,
-			'icon':'',
-		}
-	]});
-    it('页签类型为based', () => {
-        wrapper.setProps({ type: 'based' });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.contains('.bor-right')).toBe(false);
-        })
-
-    });
 
     it('页签位于页面底部', () => {
         wrapper.setProps({ bottom: true });
@@ -59,16 +48,34 @@ describe('Tabbar.vue', () => {
         })
     });
 
-    // it('点击tab标签', () => {
-    // 	return Vue.nextTick().then(function () {
-	// 		wrapper.findAll('.tabbar-nav').at(1).trigger('click');
-	// 		expect(wrapper.findAll('.tabbar-nav').at(1).contains('.curr')).toBe(true)
-	// 	})
-	// });
-	it('设置tab标签标题', () => {
+	it('设置tabbar标签标题', () => {
 		return Vue.nextTick().then(function () {
-		   expect(wrapper.findAll('.tabbar-nav-word').at(0).text()).toBe('百度');
+		   expect(wrapper.findAll('.tabbar-nav').at(1).find('.tabbar-nav-word').text()).toBe('收藏');
 		})
 	});
 
+	it('当前tabbar标签激活状态是否正确', () => {
+		return Vue.nextTick().then(function () {
+		   expect(wrapper.findAll('.tabbar-nav').at(1).contains('.curr')).toBe(true);
+		})
+	});
+
+	it('点击切换tabbar标签', () => {
+    	return Vue.nextTick().then(function () {
+			wrapper.findAll('.tabbar-nav').at(2).trigger('click');
+			expect(wrapper.findAll('.tabbar-nav').at(2).contains('.curr')).toBe(true)
+		})
+	});
+
+	it('当前tabbar标签显示的图片', () => {
+		return Vue.nextTick().then(function () {
+		   expect(wrapper.findAll('.tabbar-nav').at(0).find('.icon').hasStyle('background-image','url(./img/address.png)')).toBe(true);
+		})
+	});
+
+	it('当前tabbar标签的href链接', () => {
+		return Vue.nextTick().then(function () {
+		   expect(wrapper.findAll('.tabbar-nav').at(0).attributes('href')).toBe('http://nutui.jd.com/demo.html#/index');
+		})
+	});
 });

src/packages/tabbar/demo.vue

@@ -1,11 +1,14 @@
 <template>
   <div>
     <h4>图标文本标签栏</h4>
-    <nut-tabbar @tab-switch="tabSwitch1" type="card" :tabbar-list="tabList1"></nut-tabbar>
-    <h4>带有tips的文本标签栏</h4>
-    <nut-tabbar @tab-switch="tabSwitch2" type="card" :tabbar-list="tabList2"></nut-tabbar>
-    <h4>固定底部，可跳转页面</h4>
-    <nut-tabbar @tab-switch="tabSwitch3" :tabbar-list="tabList3" :bottom="true" class="my-tabbar"> </nut-tabbar>
+    <nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList1"></nut-tabbar>
+    <h4>不同数量的标签栏</h4>
+    <nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList2"></nut-tabbar>
+    <nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList3"></nut-tabbar>
+    <nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList4"></nut-tabbar>
+    <nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList5"></nut-tabbar>
+    <h4>固定底部，徽标提示</h4>
+    <nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList6" :bottom="true"> </nut-tabbar>
   </div>
 </template>
 
@@ -15,78 +18,153 @@ export default {
     return {
       tabList1: [
         {
-          tabTitle: '日用品',
-          curr: true,
-          icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/127072/2/1076/4692/5eb93ab4Ec8c415b7/b8c5dda3f2d0f6a6.png',
-          activeIcon: 'https://img14.360buyimg.com/imagetools/jfs/t1/127314/1/1110/6272/5eb93ab9E9b708938/6ea8b9d6d13ca396.png'
+          tabTitle: '定位',
+          curr: false,
+          icon: require('../../assets/img/address.png'),
+          activeIcon: require('../../assets/img/address-red.png')
         },
         {
-          tabTitle: '服饰',
+          tabTitle: '收藏',
           curr: false,
-          icon: 'https://img10.360buyimg.com/imagetools/jfs/t1/122494/19/1075/6299/5eb93b05E3674bd7e/7f10f0774b6ca63a.png',
-          activeIcon: 'https://img14.360buyimg.com/imagetools/jfs/t1/119999/25/1142/8218/5eb93b09E1a8c228f/907bcc2818e590c7.png'
+          icon: require('../../assets/img/collection.png'),
+          activeIcon: require('../../assets/img/collection-red.png')
+        },
+        {
+          tabTitle: '任务',
+          curr: true,
+          icon: require('../../assets/img/task.png'),
+          activeIcon: require('../../assets/img/task-red.png')
         },
         {
-          tabTitle: '娱乐',
+          tabTitle: '我的',
           curr: false,
-          icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/113878/31/6319/6100/5eb93b6cEdb187192/68176aa418a2f511.png',
-          activeIcon: 'https://img11.360buyimg.com/imagetools/jfs/t1/127726/7/1065/8167/5eb93b70Eae11b392/cba15d13b435872b.png'
+          icon: require('../../assets/img/myicon.png'),
+          activeIcon: require('../../assets/img/myicon-red.png')
         }
       ],
       tabList2: [
         {
-          tabTitle: '百度',
+          tabTitle: '定位',
+          curr: true,
+          icon: require('../../assets/img/address.png'),
+          activeIcon: require('../../assets/img/address-red.png')
+        },
+        {
+          tabTitle: '我的',
+          curr: false,
+          icon: require('../../assets/img/myicon.png'),
+          activeIcon: require('../../assets/img/myicon-red.png')
+        }
+      ],
+      tabList3: [
+        {
+          tabTitle: '定位',
+          curr: true,
+          icon: require('../../assets/img/address.png'),
+          activeIcon: require('../../assets/img/address-red.png')
+        },
+        {
+          tabTitle: '任务',
           curr: false,
-          icon: '',
-          num: 13
+          icon: require('../../assets/img/task.png'),
+          activeIcon: require('../../assets/img/task-red.png')
         },
         {
-          tabTitle: '京东',
+          tabTitle: '我的',
+          curr: false,
+          icon: require('../../assets/img/myicon.png'),
+          activeIcon: require('../../assets/img/myicon-red.png')
+        }
+      ],
+      tabList4: [
+        {
+          tabTitle: '定位',
           curr: true,
-          icon: ''
+          icon: require('../../assets/img/address.png'),
+          activeIcon: require('../../assets/img/address-red.png')
+        },
+        {
+          tabTitle: '收藏',
+          curr: false,
+          icon: require('../../assets/img/collection.png'),
+          activeIcon: require('../../assets/img/collection-red.png')
+        },
+        {
+          tabTitle: '任务',
+          curr: false,
+          icon: require('../../assets/img/task.png'),
+          activeIcon: require('../../assets/img/task-red.png')
         },
         {
-          tabTitle: '知乎',
+          tabTitle: '我的',
           curr: false,
-          icon: ''
+          icon: require('../../assets/img/myicon.png'),
+          activeIcon: require('../../assets/img/myicon-red.png')
         }
       ],
-      tabList3: [
+      tabList5: [
         {
-          tabTitle: '主页',
+          tabTitle: '定位',
           curr: true,
-          icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/115926/10/6303/6603/5eb93bdeE8951c288/d277b2a668645e73.png',
-          activeIcon: 'https://img12.360buyimg.com/imagetools/jfs/t1/126024/30/1055/6952/5eb93be3E45d921c4/3060f25d49fc4ae7.png',
-          href: '###'
+          icon: require('../../assets/img/address.png'),
+          activeIcon: require('../../assets/img/address-red.png')
+        },
+        {
+          tabTitle: '收藏',
+          curr: false,
+          icon: require('../../assets/img/collection.png'),
+          activeIcon: require('../../assets/img/collection-red.png')
+        },
+        {
+          tabTitle: '设置',
+          curr: false,
+          icon: require('../../assets/img/install.png'),
+          activeIcon: require('../../assets/img/install-red.png')
+        },
+        {
+          tabTitle: '任务',
+          curr: false,
+          icon: require('../../assets/img/task.png'),
+          activeIcon: require('../../assets/img/task-red.png')
         },
         {
-          tabTitle: '分类',
+          tabTitle: '我的',
           curr: false,
-          icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/113925/39/6348/5096/5eb94318E4037bdfc/1909ae8058e42cf5.png',
-          activeIcon: 'https://img10.360buyimg.com/imagetools/jfs/t1/118911/20/6244/5340/5eb9431cE8cd86a1d/1579cdf6ac2d1b8d.png',
-          href: '###'
+          icon: require('../../assets/img/myicon.png'),
+          activeIcon: require('../../assets/img/myicon-red.png')
+        }
+      ],
+      tabList6: [
+        {
+          tabTitle: '定位',
+          curr: true,
+          href:"http://nutui.jd.com/demo.html#/index",
+          icon: require('../../assets/img/address.png'),
+          activeIcon: require('../../assets/img/address-red.png')
         },
         {
-          tabTitle: '发现',
+          tabTitle: '收藏',
           curr: false,
-          icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/127703/8/1017/7162/5eb93ea5Ed45cba37/fb52534fc21cc790.png',
-          activeIcon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119259/20/6245/9589/5eb93ea9E1377964b/0c97f713361320b1.png',
-          href: '###'
+          isDot:true,
+          href:"http://nutui.jd.com/demo.html#/index",
+          icon: require('../../assets/img/collection.png'),
+          activeIcon: require('../../assets/img/collection-red.png')
         },
         {
-          tabTitle: '购物车',
+          tabTitle: '任务',
           curr: false,
-          num: 2,
-          icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/126465/3/1055/5848/5eb93f31E0ce4f65b/087c08eaeef97b64.png',
-          activeIcon: 'https://img10.360buyimg.com/imagetools/jfs/t1/111251/23/6376/6446/5eb93f2dE659da502/41fea546d36b8aaa.png',
-          href: '###'
+          num:9,
+          href:"http://nutui.jd.com/demo.html#/index",
+          icon: require('../../assets/img/task.png'),
+          activeIcon: require('../../assets/img/task-red.png')
         },
         {
           tabTitle: '我的',
           curr: false,
-          icon: 'http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg',
-          activeIcon: 'http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg',
-          href: '###'
+          num:100,
+          href:"http://nutui.jd.com/demo.html#/index",
+          icon: require('../../assets/img/myicon.png'),
+          activeIcon: require('../../assets/img/myicon-red.png')
         }
       ]
     };
@@ -94,23 +172,9 @@ export default {
   methods: {
     tabSwitch1: function(value, index) {
       console.log(value, index);
-    },
-    tabSwitch2: function(value, index) {
-      console.log(value, index);
-    },
-    tabSwitch3: function(value, index) {
-      console.log(value, index);
     }
   }
 };
 </script>
 <style lang="scss">
-.my-tabbar {
-  padding-top: 5px;
-  border-top: 1px solid #f2f2f2;
-  .tips {
-    top: -5px;
-    right: 10px;
-  }
-}
 </style>

src/packages/tabbar/doc.md

@@ -1,181 +1,97 @@
 # TabBar 标签栏
 
-## 基本用法
+## 图标文本标签栏
 
 ```html
-<nut-tabbar 
-  @tab-switch="tabSwitch1" 
-  type="card"  
-  :tabbar-list="tabList1"
-></nut-tabbar>
-```
-```javascript
-export default {
-  data() {
-    return {
-      tabList1:[
-        {
-          'tabTitle':'日用品',
-          'curr':true,
-          'icon':'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
-          'activeIcon':'http://img20.360buyimg.com/uba/jfs/t28675/125/569589124/2710/fe1b0e7c/5bf79218Nbc49fc24.jpg'
-        },
-        {
-          'tabTitle':'服饰',
-          'curr':false,
-          'icon':'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
-          'activeIcon':'http://img14.360buyimg.com/uba/jfs/t28468/128/565494642/3313/ce508dd6/5bf79214Nab2a3076.jpg'
-        },
-        {
-          'tabTitle':'娱乐',
-          'curr':false,
-          'icon':'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
-          'activeIcon':'http://img11.360buyimg.com/uba/jfs/t27370/260/2117900302/3274/bd097e85/5bf7921bNafc526e2.jpg'
-        }
-      ]
-    };
-  },
-  methods: {
-      tabSwitch1:function(value,index){
-        console.log(index);
-      },
-  }
+<nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList1"></nut-tabbar>
 ```
 
-带有tips的文本标签栏
-
+## 不同数量的标签栏
 ```html
-<nut-tabbar 
-  @tab-switch="tabSwitch2" 
-  type="card" 
-  :tabbar-list="tabList2"
->
-</nut-tabbar>
-```
-```javascript
-export default {
-  data() {
-    return {
-      tabList2:[
-        {
-          'tabTitle':'百度',
-          'curr':false,
-          'icon':'',
-          'num':13,
-        },
-        {
-          'tabTitle':'京东',
-          'curr':true,
-          'icon':''
-        },
-        {
-          'tabTitle':'知乎',
-          'curr':false,
-          'icon':'',
-        }
-      ]
-    };
-  },
-  methods: {
-      tabSwitch2:function(value,index){
-        console.log(value);
-      }
-  }
-};
+<nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList2"></nut-tabbar>
+<nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList3"></nut-tabbar>
+<nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList4"></nut-tabbar>
+<nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList5"></nut-tabbar>
 ```
 
-固定底部，可跳转页面
-
+## 固定底部，徽标提示
 ```html
-<nut-tabbar 
-  @tab-switch="tabSwitch3" 
-  :tabbar-list="tabList3" 
-  :bottom="true"
->
-</nut-tabbar>
+<nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList6" :bottom="true"> </nut-tabbar>
 ```
 
-```javascript
+```js
 export default {
-  components: {
-    [tabbar.name]: tabbar,
-  },
   data() {
     return {
-      tabList3:[
+      tabList6: [
         {
-          'tabTitle':'主页',
-          'curr':true,
-          'icon':'http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg',
-          'activeIcon':'http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg',
-          'href':'###'
+          tabTitle: '定位',
+          curr: true,
+          href:"http://nutui.jd.com/demo.html#/index",
+          icon: require('../../assets/img/address.png'),
+          activeIcon: require('../../assets/img/address-red.png')
         },
         {
-          'tabTitle':'分类',
-          'curr':false,
-          'icon':'http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg',
-          'activeIcon':'http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg',
-          'href':'###'
+          tabTitle: '收藏',
+          curr: false,
+          isDot:true,
+          href:"http://nutui.jd.com/demo.html#/index",
+          icon: require('../../assets/img/collection.png'),
+          activeIcon: require('../../assets/img/collection-red.png')
         },
         {
-          'tabTitle':'发现',
-          'curr':false,
-          'icon':'http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg',
-          'activeIcon':'http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg',
-          'href':'###'
+          tabTitle: '任务',
+          curr: false,
+          num:9,
+          href:"http://nutui.jd.com/demo.html#/index",
+          icon: require('../../assets/img/task.png'),
+          activeIcon: require('../../assets/img/task-red.png')
         },
         {
-          'tabTitle':'购物车',
-          'curr':false,
-          'num':2,
-          'icon':'http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg',
-          'activeIcon':'http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg',
-          'href':'###'
-        },
-        {
-          'tabTitle':'我的',
-          'curr':false,
-          'icon':'http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg',
-          'activeIcon':'http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg',
-          'href':'###'
+          tabTitle: '我的',
+          curr: false,
+          num:100,
+          href:"http://nutui.jd.com/demo.html#/index",
+          icon: require('../../assets/img/myicon.png'),
+          activeIcon: require('../../assets/img/myicon-red.png')
         }
       ]
     };
   },
   methods: {
-      tabSwitch3:function(value,index){
-        console.log(index);
-      }
+    tabSwitch1: function(value, index) {
+      console.log(value, index);
+    }
   }
 };
 ```
 
 
+
 ### Prop
 
 ### nut-tabbar
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| type | 页签栏的样式 based/card：based是默认样式如吸底样式，card类型每个卡片间有边界线 | String | based
-| tabbar-list | 渲染数据 ，兼容 tabbar-list 和 tabbarList| Array | []
-| bottom | 是否固定在页面底部 |Booble|false|
+| tabbar-list | 渲染数据 | Array | []
+| bottom | 是否固定在页面底部 |Boolean|false|
 
 ### tabbar-list
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | tabTitle | 标签页的标题 | String | --
-| curr | 是否为选中的标签页 | Booble | false
+| curr | 是否为选中的标签页 | Boolean | false
 | icon | 标签页显示的图片 | String | --
 | activeIcon | 标签页的活动状态显示的图片 | String | --
 | href | 标签页的跳转链接 | String | --
 | num |页签右上角的数字角标，超出99之后为省略号|Number|--
-
+| isDot |页签右上角的角标，是否为小点|Boolean|false
 
 ### Event
 
 | 事件名称 | 说明 | 回调参数 
 |----- | ----- | ----- 
-| tabSwitch | 切换页签时触发事件 | 点击的索引值和对应的数据
+| tab-switch | 切换页签时触发事件 | 点击的索引值和对应的数据
 

src/packages/tabbar/tabbar.scss

@@ -4,10 +4,10 @@
   border-top: 1px solid #eee;
   width: 100%;
   display: flex;
-  height: 70px;
+  height: 50px;
   box-sizing: border-box;
   background: #fff;
-  margin-top: 20px;
+  margin-top: 10px;
   &:last-child {
     border-right: 0;
   }
@@ -28,9 +28,9 @@
   justify-content: center;
   align-items: center;
 }
-.card {
-  border-right: 1px solid #eee;
-}
+// .card {
+//   border-right: 1px solid #eee;
+// }
 .curr {
   color: $primary-color;
 }
@@ -59,8 +59,8 @@
 }
 .icon-box .icon {
   margin: 0 auto;
-  width: 30px;
-  height: 30px;
+  width: 20px;
+  height: 20px;
   display: block;
   background-size: 100% 100%;
   background-position: center center;
@@ -73,3 +73,6 @@
   font-size: 16px;
   line-height: 1;
 }
+.tabbar-nav-word{
+  font-size: 12px;
+}

src/packages/tabbar/tabbar.vue

@@ -3,25 +3,36 @@
     <a
       class="tabbar-nav"
       v-for="(value, index) in tabList"
-      :class="[{ 'curr': index == currIndex }, type]"
+      :class="[{ 'curr': index == currIndex }]"
       :key="value.tabTitle"
       v-on:click="switchTabs(value, index)"
       :href="value.href"
     >
+    <nut-badge 
+        :isDot="value.isDot"
+        :value="value.num" 
+        :max="99"
+        top="5px" 
+        right="0px" 
+        class="item"
+    >
       <span class="icon-box">
-        <b class="tips num" v-if="value.num && value.num <= 99">{{ value.num }}</b>
-        <b class="tips" v-else-if="value.num && value.num > 100">{{ '...' }}</b>
         <template v-if="value.icon">
           <div class="icon" :style="{ backgroundImage: `url(${index == currIndex ? value.activeIcon : value.icon})` }"></div>
         </template>
         <span :class="['tabbar-nav-word', { 'big-word': !value.icon }]">{{ value.tabTitle }}</span>
       </span>
+    </nut-badge>
     </a>
   </div>
 </template>
 <script>
+import Badge from '../badge/badge.vue'
 export default {
   name: 'nut-tabbar',
+  components:{
+    'nut-badge':Badge
+  },
   props: {
     tabbarList: {
       type: Array,
@@ -32,10 +43,6 @@ export default {
     bottom: {
       type: Boolean,
       default: false
-    },
-    type: {
-      type: String,
-      default: 'based'
     }
   },
   data() {
@@ -67,7 +74,6 @@ export default {
     switchTabs: function(value, index) {
       this.currIndex = index;
       this.$emit('tab-switch', value, index);
-      this.$emit('tabSwitch', value, index); //兼容以前驼峰法
     }
   }
 };