Tabs support render head

examples/routers/tabs.vue

@@ -1,6 +1,6 @@
 <template>
-    <Tabs value="name1" :animated="false">
+    <Tabs value="name1" :animated="true">
-        <Tab-pane label="标签一" name="name1">
+        <Tab-pane :label="label1" name="name1">
             <Table :columns="columns1" :data="data1"></Table>
         </Tab-pane>
         <Tab-pane label="标签二" name="name2">
@@ -15,6 +15,12 @@
     export default {
         data () {
             return {
+                label1: (h) => {
+                    return h('div', [
+                        h('span', '标签一'),
+                        h('Button', 'button')
+                    ]);
+                },
                 columns1: [
                     {
                         title: '姓名',

src/components/base/render.vue

@@ -0,0 +1,30 @@
+<template>
+    <div ref="cell"></div>
+</template>
+<script>
+    import Vue from 'vue';
+    export default {
+        name: 'RenderCell',
+        props: {
+            render: Function
+        },
+        methods: {
+            compile () {
+                if (this.render) {
+                    this.$el.innerHTML = '';
+                    const component = new Vue({
+                        functional: true,
+                        render: (h) => {
+                            return this.render(h);
+                        }
+                    });
+                    const Cell = component.$mount();
+                    this.$refs.cell.appendChild(Cell.$el);
+                }
+            }
+        },
+        mounted () {
+            this.compile();
+        }
+    };
+</script>

src/components/tabs/tabs.vue

@@ -8,7 +8,8 @@
                             <div :class="barClasses" :style="barStyle"></div>
                             <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)">
                                 <Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
-                                {{ item.label }}
+                                <Render v-if="item.labelType === 'function'" :render="item.label"></Render>
+                                <template v-else>{{ item.label }}</template>
                                 <Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon>
                             </div>
                         </div>
@@ -22,6 +23,7 @@
 </template>
 <script>
     import Icon from '../icon/icon.vue';
+    import Render from '../base/render.vue';
     import { oneOf, getStyle } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
 
@@ -30,7 +32,7 @@
     export default {
         name: 'Tabs',
         mixins: [ Emitter ],
-        components: { Icon },
+        components: { Icon, Render },
         props: {
             value: {
                 type: [String, Number]
@@ -128,6 +130,7 @@
                 this.navList = [];
                 this.getTabs().forEach((pane, index) => {
                     this.navList.push({
+                        labelType: typeof pane.label,
                         label: pane.label,
                         icon: pane.icon || '',
                         name: pane.currentName || index,