[new feature] Tab: add border prop

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`参数

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

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">

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();
+});

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

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}>