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

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;
+  }
+};