From 35dbb0fe23538329677b9dfbcf6cf7c0d58fc559 Mon Sep 17 00:00:00 2001
From: fangliang <fangliang@mgtv.com>
Date: Tue, 19 Oct 2021 20:45:36 +0800
Subject: [PATCH] =?UTF-8?q?fixed=200435541=20from=20https://gitee.com/flxy?=
 =?UTF-8?q?1028/vue-devui/pulls/249=20refactor:=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=AE=8C=E6=88=90=E7=8A=B6=E6=80=81,?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=87=AA=E5=AE=9A=E4=B9=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/tabs/src/tab.tsx        |  1 +
 devui/tabs/src/tabs.tsx       | 15 ++++++++----
 docs/components/tabs/index.md | 43 ++++++++++++++++++++++++++++++++---
 3 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/devui/tabs/src/tab.tsx b/devui/tabs/src/tab.tsx
index b1f62a2f..c7c263f4 100644
--- a/devui/tabs/src/tab.tsx
+++ b/devui/tabs/src/tab.tsx
@@ -19,6 +19,7 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const tabs = inject<Tabs>('tabs');
+    tabs.state.slots.push(slots.dTabTitle);
     tabs.state.data.push(props);
     return () => {
       const { id } = props;
diff --git a/devui/tabs/src/tabs.tsx b/devui/tabs/src/tabs.tsx
index 43033651..2c84e1fa 100644
--- a/devui/tabs/src/tabs.tsx
+++ b/devui/tabs/src/tabs.tsx
@@ -6,7 +6,8 @@ import {
   PropType,
   provide,
   reactive,
-  ref
+  ref,
+  Slot
 } from 'vue';
 import './tabs.scss';
 
@@ -19,6 +20,7 @@ interface TabsState {
   data?: any[]
   showContent: boolean
   active: any
+  slots: Slot[]
 }
 export default defineComponent({
   name: 'DTabs',
@@ -65,7 +67,8 @@ export default defineComponent({
     const state: TabsState = reactive({
       data: [],
       active: props.modelValue,
-      showContent: props.showContent
+      showContent: props.showContent,
+      slots: []
     });
     provide<Tabs>('tabs', {
       state
@@ -157,7 +160,7 @@ export default defineComponent({
             class={`devui-nav devui-nav-${ulClass.join(' ')}`}
             id='devuiTabs11'
           >
-            {state.data.map((item) => {
+            {state.data.map((item, i) => {
               return (
                 <li
                   role='presentation'
@@ -178,7 +181,11 @@ export default defineComponent({
                     data-toggle={item.id}
                     aria-expanded={props.modelValue === (item.id || item.tabId)}
                   >
-                    <span>{item.title}</span>
+                    {state.slots[i] ? (
+                      state.slots[i]()
+                    ) : (
+                      <span>{item.title}</span>
+                    )}
                   </a>
                 </li>
               );
diff --git a/docs/components/tabs/index.md b/docs/components/tabs/index.md
index 65008afc..b7f24861 100644
--- a/docs/components/tabs/index.md
+++ b/docs/components/tabs/index.md
@@ -262,17 +262,54 @@ export default defineComponent({
 
 :::
 
+### 自定义模板
+
+:::demo
+
+```vue
+<template>
+  <d-tabs type="tabs" v-model="id">
+    <d-tab id="tab1" title="Tab1" tabId="tab1">
+      <template v-slot:dTabTitle> 就是这样 </template>
+      <p>Tab1 Content</p>
+    </d-tab>
+    <d-tab id="tab2" title="Tab2" tabId="tab2">
+      <template v-slot:dTabTitle> 就是这样1 </template>
+      <p>Tab2 Content</p>
+    </d-tab>
+    <d-tab id="tab3" title="Tab3" tabId="tab3">
+      <template v-slot:dTabTitle> 就是这样2 </template>
+      <p>Tab3 Content</p>
+    </d-tab>
+  </d-tabs>
+</template>
+<script>
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const id = ref('tab3');
+    return {
+      id
+    };
+  }
+});
+</script>
+```
+
+:::
+
 ### API
 
-|     参数     |                      类型                       |  默认  |                                                 说明                                                  |                 |
-| :----------: | :---------------------------------------------: | :----: | :---------------------------------------------------------------------------------------------------: | --------------- |
+|     参数     |                      类型                       |  默认  |                                                 说明                                                  |     |
+| :----------: | :---------------------------------------------: | :----: | :---------------------------------------------------------------------------------------------------: | --- |
 |     type     | `tabs \| pills \| options \| wrapped \| slider` | 'tabs' |                                         可选，选项卡组的类型                                          |
 | showContent  |                    `boolean`                    |  true  |                                    可选，是否显示选项卡对应的内容                                     |
 |   v-model    |                    `string`                     |   --   |                                可选，当前激活的选项卡，值为选项卡的 id                                |
 | customWidth  |                    `string`                     |   --   |                                        可选，自定义选项卡的宽                                         |
 |   vertical   |                    `boolean`                    | false  |                                           可选，是否垂直显                                            |
 | beforeChange |               `function\|Promise`               |   --   |                tab 切换前的回调函数,返回 boolean 类型，返回 false 可以阻止 tab 的切换                 |
-| reactivable  |                    `boolean`                    | false  | 可选，点击当前处于激活态的 tab 时是否触发`activeTabChange`事件，`true`为允许触发，`false`为不允许触发 | [拦截 tab 切换] |
+| reactivable  |                    `boolean`                    | false  | 可选，点击当前处于激活态的 tab 时是否触发`activeTabChange`事件，`true`为允许触发，`false`为不允许触发 |
 
 ### d-tabs 事件
 
-- 
Gitee