[new feature] Tabs: add nav-left、nav-right slots (#2828)

packages/tab/en-US.md

@@ -174,12 +174,19 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | title | Title | `String` | - |
 | disabled | Whether to disable tab | `Boolean` | `false` |
 
+### Tabs Slot
+
+| name | Description |
+|------|------|
+| nav-left | Custom nav left content |
+| nav-right | Custom nav right content |
+
 ### Tab Slot
 
 | name | Description |
 |------|------|
-| - | Content |
-| title | Custom tab |
+| default | Content of tab |
+| title | Custom tab title |
 
 ### Tabs Event
 

packages/tab/test/__snapshots__/index.spec.js.snap

@@ -139,6 +139,28 @@ exports[`lazy render 2`] = `
 </div>
 `;
 
+exports[`render nav-left & nav-right slot 1`] = `
+<div class="van-tabs van-tabs--line">
+  <div class="van-tabs__wrap van-hairline--top-bottom">
+    <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">Nav Left<div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
+      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div class="van-tab"><span class="van-ellipsis"></span></div>
+      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>Nav Right
+    </div>
+  </div>
+  <div class="van-tabs__content">
+    <div class="van-tab__pane" style="">Text</div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+      <div><span>title2</span></div>
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
 exports[`swipe to switch tab 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">

packages/tab/test/index.spec.js

@@ -2,17 +2,19 @@ import Tab from '..';
 import Tabs from '../../tabs';
 import { mount, later, triggerDrag } from '../../../test/utils';
 
-function createWrapper(options) {
+function createWrapper(options = {}) {
   return mount({
     template: `
-      <tabs @change="onChange"
+      <tabs
         :color="color"
         :type="type"
-        :swipeable="swipeable"
         :sticky="sticky"
+        :swipeable="swipeable"
         :line-width="lineWidth"
         :lazy-render="lazyRender"
+        @change="onChange"
       >
+        ${options.extraTemplate || ''}
         <tab :title="title1">Text</tab>
         <tab>
           <span slot="title">title2</span>
@@ -112,3 +114,14 @@ test('lazy render', async () => {
   await later();
   expect(wrapper).toMatchSnapshot();
 });
+
+test('render nav-left & nav-right slot', async () => {
+  const wrapper = createWrapper({
+    extraTemplate: `
+      <template v-slot:nav-left>Nav Left</template>
+      <template v-slot:nav-right>Nav Right</template>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

packages/tab/zh-CN.md

@@ -178,11 +178,18 @@ export default {
 | title | 标题 | `String` | - | - |
 | disabled | 是否禁用标签 | `Boolean` | `false` | - |
 
+### Tabs Slot
+
+| 名称 | 说明 |
+|------|------|
+| nav-left | 标题左侧内容 |
+| nav-right | 标题右侧内容 |
+
 ### Tab Slot
 
 | 名称 | 说明 |
 |------|------|
-| - | 标签页内容 |
+| default | 标签页内容 |
 | title | 自定义标签 |
 
 ### Tabs Event

packages/tabs/index.js

@@ -425,8 +425,10 @@ export default sfc({
           class={[bem('wrap', { scrollable }), { 'van-hairline--top-bottom': type === 'line' }]}
         >
           <div ref="nav" class={bem('nav', [type])} style={this.navStyle}>
+            {this.slots('nav-left')}
             {type === 'line' && <div class={bem('line')} style={this.lineStyle} />}
             {Nav}
+            {this.slots('nav-right')}
           </div>
         </div>
         <div ref="content" class={bem('content', { animated })}>