[new feature] Tab: 增加新属性 dot、info、title-style

re #1059 #1153

example/pages/tab/index.wxml

@@ -12,6 +12,23 @@
   </van-tabs>
 </demo-block>
 
+<demo-block title="自定义标题">
+  <van-tabs active="{{ 1 }}" bind:change="onChange">
+    <van-tab
+      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 }}"
+    >
+      <view class="content">
+        {{ '内容' + item }}
+      </view>
+    </van-tab>
+  </van-tabs>
+</demo-block>
+
 <demo-block title="横向滚动">
   <van-tabs>
     <van-tab

packages/tab/README.md

@@ -187,6 +187,9 @@ Page({
 |-----------|-----------|-----------|-------------|
 | title | 标题 | `String` | - |
 | disabled | 是否禁用标签 | `Boolean` | `false` |
+| dot | 是否显示小红点 | `Boolean` | - |
+| info | 图标右上角提示信息 | `String | Number` | - |
+| title-style | 自定义标题样式 | `String` | - |
 
 ### Tab Slot
 

packages/tab/index.ts

@@ -8,7 +8,10 @@ VantComponent({
 
   props: {
     title: String,
-    disabled: Boolean
+    disabled: Boolean,
+    dot: Boolean,
+    info: null,
+    titleStyle: String
   },
 
   data: {
@@ -20,7 +23,10 @@ VantComponent({
 
   watch: {
     title: 'update',
-    disabled: 'update'
+    disabled: 'update',
+    dot: 'update',
+    info: 'update',
+    titleStyle: 'update'
   },
 
   methods: {

packages/tab/index.wxml

@@ -1,6 +1,8 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
   wx:if="{{ animated || inited }}"
-  class="custom-class van-tab__pane {{ active ? 'van-tab__pane--active' : 'van-tab__pane--inactive' }}"
+  class="custom-class utils.bem('tab__pane', { active, inactive: !active }) }}"
   style="{{ animated || active ? '' : 'display: none;' }} {{ width ? 'width:' + width + 'px;' : '' }}"
 >
   <slot />

packages/tabs/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
-}
+  "usingComponents": {
+    "van-info": "../info/index"
+  }
+}

packages/tabs/index.less

@@ -8,10 +8,10 @@
   -webkit-tap-highlight-color: transparent;
 
   &__wrap {
-    top: 0;
-    left: 0;
-    right: 0;
     position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
 
     &--page-top {
       position: fixed;
@@ -35,10 +35,10 @@
   }
 
   &__nav {
-    display: flex;
-    user-select: none;
     position: relative;
+    display: flex;
     background-color: @white;
+    user-select: none;
 
     &--line {
       height: 100%;
@@ -48,9 +48,9 @@
       height: @tabs-card-height;
 
       .van-tab {
+        line-height: @tabs-card-height;
         color: @red;
         border-right: 1px solid @red;
-        line-height: @tabs-card-height;
 
         &:last-child {
           border-right: none;
@@ -65,11 +65,11 @@
   }
 
   &__line {
-    z-index: 1;
-    left: 0;
-    bottom: 0;
-    height: 2px;
     position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    height: 2px;
     background-color: @red;
     border-radius: 2px;
   }
@@ -101,17 +101,17 @@
 }
 
 .van-tab {
-  flex: 1;
+  position: relative;
-  cursor: pointer;
+  min-width: 0; /* hack for flex ellipsis */
   padding: 0 5px;
   font-size: 14px;
-  position: relative;
-  color: @gray-darker;
   line-height: @tabs-line-height;
+  color: @gray-darker;
   text-align: center;
-  box-sizing: border-box;
+  cursor: pointer;
   background-color: @white;
-  min-width: 0; /* hack for flex ellipsis */
+  box-sizing: border-box;
+  flex: 1;
 
   &--active {
     font-weight: 500;
@@ -121,4 +121,25 @@
   &--disabled {
     color: @gray;
   }
+
+  &__title {
+    &--dot {
+      &::after {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        vertical-align: middle;
+        background-color: @red;
+        border-radius: 100%;
+        content: '';
+      }
+    }
+
+    &__info {
+      position: relative !important;
+      top: -1px !important;
+      display: inline-block;
+      transform: translateX(0) !important;
+    }
+  }
 }

packages/tabs/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="custom-class van-tabs van-tabs--{{ type }}">
   <view style="z-index: {{ zIndex }}; {{ wrapStyle }}" class="van-tabs__wrap {{ scrollable ? 'van-tabs__wrap--scrollable' : '' }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">
     <scroll-view
@@ -13,12 +15,17 @@
           wx:for="{{ tabs }}"
           wx:key="index"
           data-index="{{ index }}"
-          class="van-ellipsis van-tab {{ index === active ? 'van-tab--active' : '' }} {{ item.disabled ? 'van-tab--disabled' : '' }}"
+          class="van-ellipsis {{ 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"
         >
-          <view class="van-ellipsis van-tab__title">
+          <view class="van-ellipsis {{ utils.bem('tab__title', { dot: item.dot }) }}" style="{{ item.titleStyle }}">
             {{ item.title }}
+            <van-info
+              wx:if="{{ item.info !== null }}"
+              info="{{ item.info }}"
+              custom-class="van-tab__title__info"
+            />
           </view>
         </view>
       </view>