[new feature] add Tabbar component (#204)

* [Document] add english document of Checkbox

* [Document] add english document of Field

* [Document] add english document of NumberKeyboard

* [bugfix] NumberKeyboard should not dispaly title when title is empty

* [Document] add english document of PasswordInput

* [Document] add english document of Radio

* [document] add english document of Switch

* [bugfix] remove redundent styles in english document

* [Document] fix details

* fix Switch test cases

* [bugfix] Swipe shouid reinitialize when item changes

* [new feature] ImagePreview reconstruct

* [new feature] add Tabbar component

docs/examples-docs/zh-CN/tab.md

@@ -47,7 +47,7 @@ export default {
 };
 </script>
 
-## Tab 标签
+## Tab 标签页
 
 ### 使用指南
 ``` javascript

docs/examples-docs/zh-CN/tabbar.md

@@ -0,0 +1,110 @@
+## Tabbar 标签栏
+
+<style>
+.demo-tabbar {
+  .van-tabbar {
+    position: relative;
+
+    &-item {
+      cursor: pointer;
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      active: 0,
+      active2: 0,
+      icon: {
+        normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
+        active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
+      }
+    }
+  }
+}
+</script>
+
+### 使用指南
+``` javascript
+import { Tabbar, TabbarItem } from 'vant';
+
+Vue.component(Tabbar.name, Tabbar);
+Vue.component(TabbarItem.name, TabbarItem);
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+<van-tabbar v-model="active">
+  <van-tabbar-item icon="shop">标签</van-tabbar-item>
+  <van-tabbar-item icon="chat" dot>标签</van-tabbar-item>
+  <van-tabbar-item icon="records">标签</van-tabbar-item>
+  <van-tabbar-item icon="gold-coin">标签</van-tabbar-item>
+</van-tabbar>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      active: 0
+    }
+  }
+}
+```
+:::
+
+#### 自定义图标
+通过 icon slot 自定义图标
+
+:::demo 自定义图标
+```html
+<van-tabbar v-model="active2">
+  <van-tabbar-item icon="shop">
+    <span>自定义</span>
+    <img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" />
+  </van-tabbar-item>
+  <van-tabbar-item icon="chat">标签</van-tabbar-item>
+  <van-tabbar-item icon="records">标签</van-tabbar-item>
+</van-tabbar>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      active2: 0,
+      icon: {
+        normal: '//img.yzcdn.cn/1.png',
+        active: '//img.yzcdn.cn/2.png'
+      }
+    }
+  }
+}
+```
+:::
+
+### Tabbar API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前选中标签的索引 | `Number`  | - | - |
+
+### Tabbar Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| change | 切换标签时触发 | active: 当前选中标签 |
+
+### TabbarItem API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| icon | 图标名称 | `String` | - | Icon 组件中可用的类型 |
+| dot | 是否显示小红点 | `Boolean` | - | - |

docs/src/doc.config.js

@@ -121,7 +121,11 @@ module.exports = {
               },
               {
                 "path": "/tab",
-                "title": "Tab - 标签"
+                "title": "Tab - 标签页"
+              },
+              {
+                "path": "/tabbar",
+                "title": "Tabbar - 标签栏"
               },
               {
                 "path": "/tag",

packages/index.js

@@ -50,6 +50,8 @@ import SwipeItem from './swipe-item';
 import Switch from './switch';
 import SwitchCell from './switch-cell';
 import Tab from './tab';
+import Tabbar from './tabbar';
+import TabbarItem from './tabbar-item';
 import Tabs from './tabs';
 import Tag from './tag';
 import Toast from './toast';
@@ -108,6 +110,8 @@ const components = [
   Switch,
   SwitchCell,
   Tab,
+  Tabbar,
+  TabbarItem,
   Tabs,
   Tag,
   TreeSelect,
@@ -182,6 +186,8 @@ export {
   Switch,
   SwitchCell,
   Tab,
+  Tabbar,
+  TabbarItem,
   Tabs,
   Tag,
   Toast,

packages/swipe-item/index.vue

@@ -8,14 +8,9 @@
 export default {
   name: 'van-swipe-item',
 
-  beforeCreate() {
-    this.$parent.swipes.push(this);
-  },
-
   data() {
     return {
-      offset: 0,
-      index: this.$parent.swipes.indexOf(this)
+      offset: 0
     };
   },
 
@@ -28,8 +23,12 @@ export default {
     }
   },
 
+  beforeCreate() {
+    this.$parent.swipes.push(this);
+  },
+
   destroyed() {
-    this.$parent.swipes.splice(this.index, 1);
+    this.$parent.swipes.splice(this.$parent.swipes.indexOf(this), 1);
   }
 };
 </script>

packages/tabbar-item/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :class="['van-tabbar-item', { 'van-tabbar-item--active': active }]" @click="onClick">
+    <div :class="['van-tabbar-item__icon', { 'van-tabbar-item__icon-dot': dot }]">
+      <slot name="icon">
+        <van-icon v-if="icon" :name="icon" />
+      </slot>
+    </div>
+    <div class="van-tabbar-item__text">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../icon';
+
+export default {
+  name: 'van-tabbar-item',
+
+  components: {
+    [Icon.name]: Icon
+  },
+
+  props: {
+    icon: String,
+    dot: Boolean
+  },
+
+  data() {
+    return {
+      active: false
+    };
+  },
+
+  beforeCreate() {
+    this.$parent.items.push(this);
+  },
+
+  destroyed() {
+    this.$parent.items.splice(this.$parent.items.indexOf(this), 1);
+  },
+
+  methods: {
+    onClick() {
+      this.$parent.onChange(this.$parent.items.indexOf(this));
+    }
+  }
+};
+</script>

packages/tabbar/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="['van-tabbar', 'van-hairline--top-bottom', { 'van-tabbar--fixed': fixed }]">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-tabbar',
+
+  data() {
+    return {
+      items: []
+    };
+  },
+
+  props: {
+    value: Number,
+    fixed: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  watch: {
+    items() {
+      this.setActiveItem();
+    },
+    value() {
+      this.setActiveItem();
+    }
+  },
+
+  methods: {
+    setActiveItem() {
+      this.items.forEach((item, index) => {
+        item.active = index === this.value;
+      });
+    },
+    onChange(active) {
+      this.$emit('input', active);
+      this.$emit('change', active);
+    }
+  }
+};
+</script>

packages/vant-css/src/index.css

@@ -22,6 +22,7 @@
 @import './steps.css';
 @import './tag.css';
 @import './tab.css';
+@import './tabbar.css';
 @import './image-preview.css';
 @import './stepper.css';
 @import './progress.css';

packages/vant-css/src/tabbar.css

@@ -0,0 +1,50 @@
+@import './common/var.css';
+
+.van-tabbar {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  background-color: #fff;
+
+  &--fixed {
+    left: 0;
+    bottom: 0;
+    position: fixed;
+  }
+
+  &-item {
+    flex: 1;
+    color: #666;
+    display: flex;
+    line-height: 1;
+    font-size: 12px;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+
+    &__icon {
+      font-size: 18px;
+      margin-bottom: 5px;
+      position: relative;
+
+      &-dot {
+        &::after {
+          width: 8px;
+          height: 8px;
+          content: ' ';
+          position: absolute;
+          border-radius: 100%;
+          background-color: $red;
+        }
+      }
+
+      img {
+        height: 18px;
+      }
+    }
+
+    &--active {
+      color: $blue;
+    }
+  }
+}

test/unit/components/tabbar.vue

@@ -0,0 +1,40 @@
+<template>
+  <van-tabbar v-model="active" @change="onChange">
+    <van-tabbar-item icon="shop">
+      <span>自定义</span>
+      <img slot="icon" :src="active === 0 ? icon.active : icon.normal" />
+    </van-tabbar-item>
+    <van-tabbar-item icon="chat">标签</van-tabbar-item>
+    <van-tabbar-item icon="chat">标签</van-tabbar-item>
+    <van-tabbar-item icon="records">标签</van-tabbar-item>
+  </van-tabbar>
+</template>
+
+<script>
+import Tabbar from 'packages/tabbar';
+import TabbarItem from 'packages/tabbar-item';
+
+export default {
+  components: {
+    [Tabbar.name]: Tabbar,
+    [TabbarItem.name]: TabbarItem
+  },
+
+  data() {
+    return {
+      active: 0,
+      changeRecord: 0,
+      icon: {
+        normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
+        active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
+      }
+    };
+  },
+
+  methods: {
+    onChange(val) {
+      this.changeRecord = val;
+    }
+  }
+};
+</script>

test/unit/specs/tabbar.spec.js

@@ -0,0 +1,23 @@
+import TabbarExample from '../components/tabbar';
+import { mount } from 'avoriaz';
+
+describe('Progress', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('Tabbar with four items', (done) => {
+    wrapper = mount(TabbarExample);
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.find('.van-tabbar-item').length).to.equal(4);
+
+      wrapper.find('.van-tabbar-item')[3].element.click();
+      expect(wrapper.vm.active).to.equal(3);
+      expect(wrapper.vm.changeRecord).to.equal(3);
+      done();
+    });
+  });
+});