From da04fb0c1aa3dc82e6a85d363cb50e32d837f6c8 Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Fri, 8 Mar 2019 12:00:53 +0800
Subject: [PATCH] =?UTF-8?q?[new=20feature]=20Tab:=20add=20new=20external?=
 =?UTF-8?q?=20class=20nav-class=E3=80=81tab-class=E3=80=81tab-active-class?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #1313
---
 example/pages/tab/index.wxml | 3 +--
 example/pages/tab/index.wxss | 9 +++++++++
 packages/tab/README.md       | 3 +++
 packages/tabs/index.less     | 1 -
 packages/tabs/index.ts       | 2 ++
 packages/tabs/index.wxml     | 4 ++--
 6 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml
index 3809aad3..b9db319c 100644
--- a/example/pages/tab/index.wxml
+++ b/example/pages/tab/index.wxml
@@ -13,7 +13,7 @@
 </demo-block>
 
 <demo-block title="自定义标题">
-  <van-tabs active="{{ 1 }}" bind:change="onChange">
+  <van-tabs active="{{ 1 }}" bind:change="onChange" tab-class="tab-class" tab-active-class="tab-active-class">
     <van-icon
       slot="nav-right"
       name="search"
@@ -24,7 +24,6 @@
       wx:for="1234"
       wx:key="index"
       title="{{ '标签' + item }}"
-      title-style="font-size: 16px; font-weight: bold; {{ index === 0 ? 'text-decoration: line-through;' : '' }}"
       dot="{{ index === 1 }}"
       info="{{ index === 2 ? 99 : null }}"
     >
diff --git a/example/pages/tab/index.wxss b/example/pages/tab/index.wxss
index ea68edc7..0c2928a2 100644
--- a/example/pages/tab/index.wxss
+++ b/example/pages/tab/index.wxss
@@ -11,3 +11,12 @@
   padding: 0 10px;
   line-height: 44px !important;
 }
+
+.tab-class {
+  transition: all 0.25s ease-in-out;
+}
+
+.tab-active-class {
+  font-size: 1.05em !important;
+  color: #1989fa !important;
+}
diff --git a/packages/tab/README.md b/packages/tab/README.md
index 4c678a9c..40a34d72 100644
--- a/packages/tab/README.md
+++ b/packages/tab/README.md
@@ -203,3 +203,6 @@ Page({
 | 类名 | 说明 |
 |-----------|-----------|
 | custom-class | 根节点样式类 |
+| nav-class | 标签栏样式类 |
+| tab-class | 标签样式类 |
+| tab-active-class | 标签激活态样式类 |
diff --git a/packages/tabs/index.less b/packages/tabs/index.less
index 4f71ce9b..d2514dfc 100644
--- a/packages/tabs/index.less
+++ b/packages/tabs/index.less
@@ -110,7 +110,6 @@
   color: @gray-darker;
   text-align: center;
   cursor: pointer;
-  background-color: @white;
   box-sizing: border-box;
   flex: 1;
 
diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts
index 58f2125a..ee50b376 100644
--- a/packages/tabs/index.ts
+++ b/packages/tabs/index.ts
@@ -13,6 +13,8 @@ type Position = 'top' | 'bottom' | '';
 VantComponent({
   mixins: [touch],
 
+  classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
+
   relation: {
     name: 'tab',
     type: 'descendant',
diff --git a/packages/tabs/index.wxml b/packages/tabs/index.wxml
index ee8220d6..1618d641 100644
--- a/packages/tabs/index.wxml
+++ b/packages/tabs/index.wxml
@@ -11,13 +11,13 @@
       class="van-tabs__scroll--{{ type }}"
       style="{{ color ? 'border-color: ' + color : '' }}"
     >
-      <view class="van-tabs__nav van-tabs__nav--{{ type }}">
+      <view class="{{ utils.bem('tabs__nav', [type]) }} nav-class">
         <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
         <view
           wx:for="{{ tabs }}"
           wx:key="index"
           data-index="{{ index }}"
-          class="van-ellipsis {{ utils.bem('tab', { active: index === active, disabled: item.disabled }) }}"
+          class="van-ellipsis tab-class {{ index === active ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === active, disabled: item.disabled }) }}"
           style="{{ color && index !== active && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === active && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}"
           bind:tap="onTap"
         >