From 6d526b6c4509c66e6ea4c01d1768c6ba3229903c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Wed, 22 May 2019 15:59:19 +0800
Subject: [PATCH] [new feature] Tab: add border prop

---
 docs/markdown/changelog.zh-CN.md              |  4 +++
 packages/tab/en-US.md                         |  5 ++--
 .../tab/test/__snapshots__/index.spec.js.snap | 11 +++++++
 packages/tab/test/index.spec.js               | 30 ++++++++++++-------
 packages/tab/zh-CN.md                         |  7 +++--
 packages/tabs/index.js                        |  6 +++-
 6 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md
index cd4978339..09f247929 100644
--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@@ -2,6 +2,10 @@
 
 ### [v2.0.0-beta.1](https://github.com/youzan/vant/tree/v2.0.0-beta.0)
 
+##### Tab
+
+- 新增`border`属性
+
 ##### Uploader
 
 - `oversize`事件增加`detail`参数
diff --git a/packages/tab/en-US.md b/packages/tab/en-US.md
index fd9c2268f..4e4c0871d 100644
--- a/packages/tab/en-US.md
+++ b/packages/tab/en-US.md
@@ -165,11 +165,12 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | title-active-color | Title active color | `String` | - |
 | title-inactive-color | Title inactive color | `String` | - |
 | swipe-threshold | Set swipe tabs threshold | `Number` | `4` | - |
-| sticky | Whether to use sticky mode | `Boolean` | `false` |
 | offset-top | Offset top when use sticky mode | `Number` | `0` |
-| swipeable | Whether to switch tabs with swipe gestrue in the content | `Boolean` | `false` |
 | animated | Whether to change tabs with animation | `Boolean` | `false` |
+| border | Whether to show border when `type="line"` | `Boolean` | `true` |
 | ellipsis | Whether to ellipsis too long title | `Boolean` | `true` |
+| sticky | Whether to use sticky mode | `Boolean` | `false` |
+| swipeable | Whether to switch tabs with swipe gestrue in the content | `Boolean` | `false` |
 | lazy-render | Whether to enable tab content lazy render | `Boolean` | `true` |
 
 ### Tab Props
diff --git a/packages/tab/test/__snapshots__/index.spec.js.snap b/packages/tab/test/__snapshots__/index.spec.js.snap
index 2f6f223f6..fc1cbdfef 100644
--- a/packages/tab/test/__snapshots__/index.spec.js.snap
+++ b/packages/tab/test/__snapshots__/index.spec.js.snap
@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`border props 1`] = `
+<div class="van-tabs van-tabs--line">
+  <div class="van-tabs__wrap">
+    <div class="van-tabs__nav van-tabs__nav--line">
+      <div class="van-tabs__line"></div>
+    </div>
+  </div>
+  <div class="van-tabs__content"></div>
+</div>
+`;
+
 exports[`change tabs data 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
diff --git a/packages/tab/test/index.spec.js b/packages/tab/test/index.spec.js
index 1c0ab7cb2..45bca7f33 100644
--- a/packages/tab/test/index.spec.js
+++ b/packages/tab/test/index.spec.js
@@ -1,11 +1,15 @@
+import Vue from 'vue';
 import Tab from '..';
 import Tabs from '../../tabs';
 import { mount, later, triggerDrag } from '../../../test/utils';
 
+Vue.use(Tab);
+Vue.use(Tabs);
+
 function createWrapper(options = {}) {
   return mount({
     template: `
-      <tabs
+      <van-tabs
         :color="color"
         :type="type"
         :sticky="sticky"
@@ -15,18 +19,14 @@ function createWrapper(options = {}) {
         @change="onChange"
       >
         ${options.extraTemplate || ''}
-        <tab :title="title1">Text</tab>
-        <tab>
+        <van-tab :title="title1">Text</van-tab>
+        <van-tab>
           <span slot="title">title2</span>
           Text
-        </tab>
-        <tab title="title3" disabled>Text</tab>
-      </tabs>
+        </van-tab>
+        <van-tab title="title3" disabled>Text</van-tab>
+      </van-tabs>
     `,
-    components: {
-      Tab,
-      Tabs
-    },
     data() {
       return {
         title1: 'title1',
@@ -127,3 +127,13 @@ test('render nav-left & nav-right slot', async () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('border props', async () => {
+  const wrapper = mount({
+    template: `
+      <van-tabs :border="false" />
+    `,
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/packages/tab/zh-CN.md b/packages/tab/zh-CN.md
index 03e7c5cb8..e359785b6 100644
--- a/packages/tab/zh-CN.md
+++ b/packages/tab/zh-CN.md
@@ -166,12 +166,13 @@ export default {
 | color | 标签主题色 | `String` | `#f44` | 1.2.0 |
 | title-active-color | 标题选中态颜色 | `String` | - | 1.6.5 |
 | title-inactive-color | 标题默认态颜色 | `String` | - | 1.6.5 |
-| swipeable | 是否开启手势滑动切换 | `Boolean` | `false` | 1.0.0 |
-| sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
-| offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | 1.1.15 |
 | swipe-threshold | 滚动阈值，标签数量超过多少个可滚动 | `Number` | `4` | - |
+| offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | 1.1.15 |
 | animated | 是否开启切换标签内容时的转场动画 | `Boolean` | `false` | 1.4.5 |
+| border | 是否显示标签栏外边框，仅在`type="line"`时有效 | `Boolean` | `true` | 2.0.0 |
 | ellipsis | 是否省略过长的标题文字 | `Boolean` | `true` | 1.5.0 |
+| sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
+| swipeable | 是否开启手势滑动切换 | `Boolean` | `false` | 1.0.0 |
 | lazy-render | 是否开启标签页内容延迟渲染 | `Boolean` | `true` | 1.6.6 |
 
 ### Tab Props
diff --git a/packages/tabs/index.js b/packages/tabs/index.js
index 7ed782590..3d73607f4 100644
--- a/packages/tabs/index.js
+++ b/packages/tabs/index.js
@@ -29,6 +29,10 @@ export default sfc({
     background: String,
     titleActiveColor: String,
     titleInactiveColor: String,
+    border: {
+      type: Boolean,
+      default: true
+    },
     ellipsis: {
       type: Boolean,
       default: true
@@ -432,7 +436,7 @@ export default sfc({
           style={this.wrapStyle}
           class={[
             bem('wrap', { scrollable }),
-            { 'van-hairline--top-bottom': type === 'line' }
+            { 'van-hairline--top-bottom': type === 'line' && this.border }
           ]}
         >
           <div ref="nav" class={bem('nav', [type])} style={this.navStyle}>