[Improvement] Tab: add title slot (#603)

docs/demos/views/tab.vue

@@ -47,6 +47,17 @@
         </van-tab>
       </van-tabs>
     </demo-block>
+
+    <demo-block :title="$t('title7')">
+      <van-tabs :active="active">
+        <van-tab v-for="index in 2" :key="index">
+          <div slot="title">
+            <van-icon name="more-o" />{{ $t('tab') }}
+          </div>
+          {{ $t('content') }} {{ index }}
+        </van-tab>
+      </van-tabs>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -59,7 +70,8 @@ export default {
       title3: '禁用标签',
       title4: '样式风格',
       title5: '点击事件',
-      title6: '粘性布局'
+      title6: '粘性布局',
+      title7: '自定义标签'
     },
     'en-US': {
       tab: 'Tab ',
@@ -68,7 +80,8 @@ export default {
       title3: 'Disabled Tab',
       title4: 'Card Style',
       title5: 'Click Event',
-      title6: 'Sticky'
+      title6: 'Sticky',
+      title7: 'Custom Tab'
     }
   },
 
@@ -79,12 +92,6 @@ export default {
     };
   },
 
-  mounted() {
-    setTimeout(() => {
-      this.active = 3;
-    }, 1000);
-  },
-
   methods: {
     onClickDisabled() {
       Toast('Disabled!');
@@ -101,6 +108,11 @@ export default {
 .demo-tab {
   margin-bottom: 700px;
 
+  .van-tab .van-icon {
+    margin-right: 5px;
+    vertical-align: -2px;
+  }
+
   .van-tab__pane {
     background-color: #fff;
     padding: 20px;

docs/markdown/en-US/tab.md

@@ -105,8 +105,22 @@ In sticky mode, the tab will be fixed to top when scroll to top
 
 ```html
 <van-tabs :active="active" sticky>
-  <van-tab v-for="index in 4" :title="'选项 ' + index">
-    内容 {{ index }}
+  <van-tab v-for="index in 4" :title="'tab ' + index">
+    content {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+#### Custom title
+Use title slot to custom tab title
+
+```html
+<van-tabs :active="active">
+  <van-tab v-for="index in 2">
+    <div slot="title">
+      <van-icon name="more-o" />tab
+    </div>
+    content {{ index }}
   </van-tab>
 </van-tabs>
 ```
@@ -127,6 +141,13 @@ In sticky mode, the tab will be fixed to top when scroll to top
 | title | Tab title | `String` | - | - |
 | disabled | Whether disabled current tab | `Boolean` | `false` | - |
 
+### Tab Slot
+
+| name | Description |
+|-----------|-----------|
+| - | Content |
+| title | Custom tab |
+
 ### Tabs Event
 
 | Event | Description | Arguments |

docs/markdown/zh-CN/tab.md

@@ -111,6 +111,20 @@ export default {
 </van-tabs>
 ```
 
+#### 自定义标签
+通过 title slot 可以自定义标签内容
+
+```html
+<van-tabs :active="active">
+  <van-tab v-for="index in 2">
+    <div slot="title">
+      <van-icon name="more-o" />选项
+    </div>
+    内容 {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
 ### Tabs API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选 |
@@ -128,6 +142,13 @@ export default {
 | title | tab的标题 | `String` | - | - |
 | disabled | 是否禁用这个tab | `Boolean` | `false` | - |
 
+### Tab Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| - | 标签页内容 |
+| title | 自定义标签 |
+
 ### Tabs Event
 
 | 事件名 | 说明 | 参数 |

packages/tab/index.vue

@@ -14,10 +14,7 @@ export default create({
   mixins: [findParent],
 
   props: {
-    title: {
-      type: String,
-      required: true
-    },
+    title: String,
     disabled: Boolean
   },
 

packages/tabs/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-tabs" :class="[`van-tabs--${type}`]">
+  <div class="van-tabs" :class="`van-tabs--${type}`">
     <div
       ref="wrap"
       class="van-tabs__wrap"
@@ -21,7 +21,8 @@
           }"
           @click="onClick(index)"
         >
-          <span>{{ tab.title }}</span>
+          <van-node v-if="tab.$slots.title" :node="tab.$slots.title" />
+          <span v-else>{{ tab.title }}</span>
         </div>
       </div>
     </div>
@@ -35,11 +36,16 @@
 import { create } from '../utils';
 import { raf } from '../utils/raf';
 import { on, off } from '../utils/event';
+import VanNode from '../utils/node';
 import scrollUtils from '../utils/scroll';
 
 export default create({
   name: 'van-tabs',
 
+  components: {
+    VanNode
+  },
+
   props: {
     sticky: Boolean,
     active: {
@@ -69,6 +75,13 @@ export default create({
     };
   },
 
+  computed: {
+    // whether the nav is scrollable
+    scrollable() {
+      return this.tabs.length > this.swipeThreshold;
+    }
+  },
+
   watch: {
     active(val) {
       this.correctActive(val);
@@ -113,13 +126,6 @@ export default create({
     }
   },
 
-  computed: {
-    // whether the nav is scrollable
-    scrollable() {
-      return this.tabs.length > this.swipeThreshold;
-    }
-  },
-
   methods: {
     // whether to bind sticky listener
     scrollHandler(init) {

packages/utils/node.js

@@ -0,0 +1,10 @@
+export default {
+  name: 'van-node',
+  functional: true,
+  props: {
+    node: Array
+  },
+  render(h, ctx) {
+    return ctx.props.node;
+  }
+};