!255 feat: 添加自定义功能和其demo

Merge pull request !255 from 星辰大海/cherry-pick-1634823576

Author: kagol

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;

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>
  );

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 事件