Merge branch 'dev' into next

docs/markdown/changelog.en-US.md

@@ -10,6 +10,37 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 - Minor version：released every one to two months, including backwards compatible features.
 - Major version：including breaking changes and new features.
 
+### [v2.10.2](https://github.com/youzan/vant/compare/v2.10.1...v2.10.2)
+
+`2020-08-12`
+
+**Feature**
+
+- Tab: add @tab-line-height less var [#6985](https://github.com/youzan/vant/issues/6985)
+
+**Bug Fixes**
+
+- Sku: compatible sku.list don't exist [#6991](https://github.com/youzan/vant/issues/6991)
+
+### [v2.10.1](https://github.com/youzan/vant/compare/v2.10.0...v2.10.1)
+
+`2020-08-10`
+
+**Feature**
+
+- Button: add loading slot [#6966](https://github.com/youzan/vant/issues/6966)
+- Locale: adding Norwegian Language support [#6962](https://github.com/youzan/vant/issues/6962)
+
+**style**
+
+- ContactList: add safe area inset bottom [#6970](https://github.com/youzan/vant/issues/6970)
+- TabbarItem: increase icon size to 22px [#6972](https://github.com/youzan/vant/issues/6972)
+
+**Bug Fixes**
+
+- AddressEdit: incorrect label wrap on safari [#6969](https://github.com/youzan/vant/issues/6969)
+- Icon: fix badge number align [#6975](https://github.com/youzan/vant/issues/6975) [#6952](https://github.com/youzan/vant/issues/6952)
+
 ### [v2.10.0](https://github.com/youzan/vant/compare/v2.9.4...v2.10.0)
 
 `2020-08-07`

docs/markdown/changelog.zh-CN.md

@@ -10,6 +10,38 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 - 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
 - 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。
 
+### [v2.10.2](https://github.com/youzan/vant/compare/v2.10.1...v2.10.2)
+
+`2020-08-12`
+
+**Feature**
+
+- Tab: 新增 @tab-line-height less 变量 [#6985](https://github.com/youzan/vant/issues/6985)
+
+**Bug Fixes**
+
+- Sku: 适配 sku.list 为空导致报错的问题 [#6991](https://github.com/youzan/vant/issues/6991)
+
+### [v2.10.1](https://github.com/youzan/vant/compare/v2.10.0...v2.10.1)
+
+`2020-08-10`
+
+**Feature**
+
+- Button: 新增 loading 插槽 [#6966](https://github.com/youzan/vant/issues/6966)
+- Locale: 新增挪威语语言包 [#6962](https://github.com/youzan/vant/issues/6962)
+
+**style**
+
+- ContactList: 适配 iOS 底部安全区 [#6970](https://github.com/youzan/vant/issues/6970)
+- TabbarItem: 图标大小扩大为 22px [#6972](https://github.com/youzan/vant/issues/6972)
+
+**Bug Fixes**
+
+- AddressEdit: 修复在 safari 上左侧文字换行的问题 [#6969](https://github.com/youzan/vant/issues/6969)
+- ContactEdit: 修复在 safari 上左侧文字换行的问题 [#6969](https://github.com/youzan/vant/issues/6969)
+- Icon: 修复徽标数字不居中的问题 [#6975](https://github.com/youzan/vant/issues/6975) [#6952](https://github.com/youzan/vant/issues/6952)
+
 ### [v2.10.0](https://github.com/youzan/vant/compare/v2.9.4...v2.10.0)
 
 `2020-08-07`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "2.10.0",
+  "version": "2.10.2",
   "description": "Mobile UI Components built on Vue",
   "main": "lib/index.js",
   "module": "es/index.js",

src/address-edit/index.less

@@ -8,7 +8,7 @@
     border-radius: @padding-xs;
 
     .van-field__label {
-      width: 4em;
+      width: 4.1em;
     }
   }
 

src/address-list/index.less

@@ -21,7 +21,6 @@
   &__add {
     height: 40px;
     margin: 5px 0;
-    line-height: 38px;
   }
 
   &__disabled-text {

src/area/demo/area.js

@@ -4035,7 +4035,13 @@ export default {
     810307: '荃湾区',
     810308: '葵青区',
     810309: '离岛区',
-    820101: '澳门半岛',
+    820102: '花地玛堂区',
-    820201: '离岛',
+    820103: '花王堂区',
+    820104: '望德堂区',
+    820105: '大堂区',
+    820106: '风顺堂区',
+    820202: '嘉模堂区',
+    820203: '路氹填海区',
+    820204: '圣方济各堂区',
   },
 };

src/contact-list/index.less

@@ -3,7 +3,7 @@
 .van-contact-list {
   box-sizing: border-box;
   height: 100%;
-  padding-bottom: 50px;
+  padding-bottom: 80px;
 
   &__item {
     padding: @contact-list-item-padding;
@@ -41,12 +41,14 @@
     bottom: 0;
     left: 0;
     z-index: @contact-list-add-button-z-index;
-    padding: 5px 16px;
+    padding: 0 @padding-md;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
     background-color: @white;
   }
 
   &__add {
     height: 40px;
-    line-height: 38px;
+    margin: 5px 0;
   }
 }

src/dialog/README.md

@@ -30,6 +30,23 @@ Dialog.alert({
 });
 ```
 
+### Confirm dialog
+
+Used to confirm some messages, including a confirm button and a cancel button.
+
+```js
+Dialog.confirm({
+  title: 'Title',
+  message: 'Content',
+})
+  .then(() => {
+    // on confirm
+  })
+  .catch(() => {
+    // on cancel
+  });
+```
+
 ### Round Button Style
 
 Use round button style.
@@ -51,23 +68,6 @@ Dialog.alert({
 });
 ```
 
-### Confirm dialog
-
-Used to confirm some messages, including a confirm button and a cancel button.
-
-```js
-Dialog.confirm({
-  title: 'Title',
-  message: 'Content',
-})
-  .then(() => {
-    // on confirm
-  })
-  .catch(() => {
-    // on cancel
-  });
-```
-
 ### Asnyc Close
 
 ```js

src/dialog/README.zh-CN.md

@@ -56,6 +56,23 @@ Dialog.alert({
 });
 ```
 
+### 消息确认
+
+用于确认消息，包含取消和确认按钮。
+
+```js
+Dialog.confirm({
+  title: '标题',
+  message: '弹窗内容',
+})
+  .then(() => {
+    // on confirm
+  })
+  .catch(() => {
+    // on cancel
+  });
+```
+
 ### 圆角按钮风格
 
 将 theme 选项设置为 `round-button` 可以展示圆角按钮风格的弹窗，该选项从 2.10.0 版本开始支持。
@@ -77,23 +94,6 @@ Dialog.alert({
 });
 ```
 
-### 消息确认
-
-用于确认消息，包含取消和确认按钮。
-
-```js
-Dialog.confirm({
-  title: '标题',
-  message: '弹窗内容',
-})
-  .then(() => {
-    // on confirm
-  })
-  .catch(() => {
-    // on cancel
-  });
-```
-
 ### 异步关闭
 
 通过 `beforeClose` 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

src/dialog/demo/index.vue

@@ -1,39 +1,22 @@
 <template>
   <demo-section>
-    <demo-block :title="t('alert1')">
+    <demo-block card :title="t('basicUsage')">
-      <van-button type="primary" @click="onClickAlert">
+      <van-cell is-link :title="t('alert1')" @click="onClickAlert" />
-        {{ t('alert1') }}
+      <van-cell is-link :title="t('alert2')" @click="onClickAlert2" />
-      </van-button>
+      <van-cell is-link :title="t('confirm')" @click="onClickConfirm" />
-      <van-button type="primary" @click="onClickAlert2">
-        {{ t('alert2') }}
-      </van-button>
     </demo-block>
 
-    <demo-block :title="t('roundButton')">
+    <demo-block card :title="t('roundButton')">
-      <van-button type="primary" @click="onClickRound">
+      <van-cell is-link :title="t('alert1')" @click="onClickRound" />
-        {{ t('alert1') }}
+      <van-cell is-link :title="t('alert2')" @click="onClickRound2" />
-      </van-button>
-      <van-button type="primary" @click="onClickRound2">
-        {{ t('alert2') }}
-      </van-button>
     </demo-block>
 
-    <demo-block :title="t('confirm')">
+    <demo-block card :title="t('asyncClose')">
-      <van-button type="primary" @click="onClickConfirm">
+      <van-cell is-link :title="t('asyncClose')" @click="onClickAsyncClose" />
-        {{ t('confirm') }}
-      </van-button>
     </demo-block>
 
-    <demo-block :title="t('asyncClose')">
+    <demo-block card :title="t('componentCall')">
-      <van-button type="primary" @click="onClickAsyncClose">
+      <van-cell is-link :title="t('componentCall')" @click="show = true" />
-        {{ t('asyncClose') }}
-      </van-button>
-    </demo-block>
-
-    <demo-block :title="t('componentCall')">
-      <van-button type="primary" @click="show = true">
-        {{ t('componentCall') }}
-      </van-button>
       <van-dialog
         v-model:show="show"
         :title="t('title')"
@@ -135,12 +118,6 @@ export default {
 @import '../../style/var';
 
 .demo-dialog {
-  background-color: @white;
-
-  .van-doc-demo-block > .van-button {
-    margin-left: @padding-md;
-  }
-
   img {
     box-sizing: border-box;
     width: 100%;

src/dialog/test/__snapshots__/demo.spec.js.snap

@@ -2,39 +2,41 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal">
+  <div>
-      <div class="van-button__content"><span class="van-button__text">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      提示弹窗
+      <div class="van-cell__title"><span>提示弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-    </span></div>
+        <!----></i>
-    </button> <button class="van-button van-button--primary van-button--normal">
+    </div>
-      <div class="van-button__content"><span class="van-button__text">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      提示弹窗（无标题）
+      <div class="van-cell__title"><span>提示弹窗（无标题）</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-    </span></div>
+        <!----></i>
-    </button></div>
+    </div>
-  <div><button class="van-button van-button--primary van-button--normal">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-button__content"><span class="van-button__text">
+      <div class="van-cell__title"><span>确认弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-      提示弹窗
+        <!----></i>
-    </span></div>
+    </div>
-    </button> <button class="van-button van-button--primary van-button--normal">
+  </div>
-      <div class="van-button__content"><span class="van-button__text">
+  <div>
-      提示弹窗（无标题）
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-    </span></div>
+      <div class="van-cell__title"><span>提示弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-    </button></div>
+        <!----></i>
-  <div><button class="van-button van-button--primary van-button--normal">
+    </div>
-      <div class="van-button__content"><span class="van-button__text">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      确认弹窗
+      <div class="van-cell__title"><span>提示弹窗（无标题）</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-    </span></div>
+        <!----></i>
-    </button></div>
+    </div>
-  <div><button class="van-button van-button--primary van-button--normal">
+  </div>
-      <div class="van-button__content"><span class="van-button__text">
+  <div>
-      异步关闭
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-    </span></div>
+      <div class="van-cell__title"><span>异步关闭</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-    </button></div>
+        <!----></i>
-  <div><button class="van-button van-button--primary van-button--normal">
+    </div>
-      <div class="van-button__content"><span class="van-button__text">
+  </div>
-      组件调用
+  <div>
-    </span></div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-    </button>
+      <div class="van-cell__title"><span>组件调用</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
     <div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
       <div class="van-dialog__header">标题</div>
       <div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>

src/empty/test/__snapshots__/demo.spec.js.snap

@@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">通用错误</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">网络错误</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">搜索提示</span></div>
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
       <div class="van-tabs__content">

src/index-bar/test/__snapshots__/demo.spec.js.snap

@@ -7,7 +7,7 @@ exports[`renders demo correctly 1`] = `
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
         <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
         <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">自定义索引列表</span></div>
-        <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
       </div>
     </div>
     <div class="van-tabs__content">

src/info/index.less

@@ -10,6 +10,7 @@
   color: @info-color;
   font-weight: @info-font-weight;
   font-size: @info-font-size;
+  font-family: @info-font-family;
   line-height: 1.2;
   text-align: center;
   background-color: @info-background-color;

src/list/test/__snapshots__/demo.spec.js.snap

@@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = `
         <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
         <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">错误提示</span></div>
         <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">下拉刷新</span></div>
-        <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
       </div>
     </div>
     <div class="van-tabs__content">

src/pull-refresh/test/__snapshots__/demo.spec.js.snap

@@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = `
         <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
         <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">成功提示</span></div>
         <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">自定义提示</span></div>
-        <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
       </div>
     </div>
     <div class="van-tabs__content">

src/sku/Sku.js

@@ -200,7 +200,7 @@ export default createComponent({
       let skuComb = null;
       if (this.isSkuCombSelected) {
         if (this.hasSku) {
-          skuComb = getSkuComb(this.sku.list, this.selectedSku);
+          skuComb = getSkuComb(this.skuList, this.selectedSku);
         } else {
           skuComb = {
             id: this.sku.collection_id,
@@ -257,6 +257,10 @@ export default createComponent({
       return this.sku.tree || [];
     },
 
+    skuList() {
+      return this.sku.list || [];
+    },
+
     propList() {
       return this.properties || [];
     },
@@ -384,7 +388,7 @@ export default createComponent({
           item.v.length === 1 ? item.v[0].id : this.initialSku[key];
         if (
           valueId &&
-          isSkuChoosable(this.sku.list, this.selectedSku, { key, valueId })
+          isSkuChoosable(this.skuList, this.selectedSku, { key, valueId })
         ) {
           this.selectedSku[key] = valueId;
         }
@@ -639,6 +643,7 @@ export default createComponent({
 
     const {
       sku,
+      skuList,
       goods,
       price,
       lazyLoad,
@@ -709,7 +714,7 @@ export default createComponent({
             <SkuRow skuRow={skuTreeItem} ref="skuRows" refInFor>
               {skuTreeItem.v.map((skuValue) => (
                 <SkuRowItem
-                  skuList={sku.list}
+                  skuList={skuList}
                   lazyLoad={lazyLoad}
                   skuValue={skuValue}
                   skuKeyStr={skuTreeItem.k_s}

src/style/var.less

@@ -99,7 +99,7 @@
 @address-edit-detail-finish-font-size: @font-size-sm;
 
 // AddressList
-@address-list-padding: 12px 12px 100px;
+@address-list-padding: @padding-sm @padding-sm 80px;
 @address-list-disabled-text-color: @gray-6;
 @address-list-disabled-text-padding: @padding-base * 5 0 @padding-md;
 @address-list-disabled-text-font-size: @font-size-md;
@@ -255,7 +255,7 @@
 @contact-edit-buttons-padding: @padding-xl 0;
 @contact-edit-button-margin-bottom: @padding-sm;
 @contact-edit-button-font-size: 16px;
-@contact-edit-field-label-width: 4em;
+@contact-edit-field-label-width: 4.1em;
 
 // ContactList
 @contact-list-edit-icon-size: 16px;
@@ -419,6 +419,7 @@
 @info-background-color: @red;
 @info-dot-color: @red;
 @info-dot-size: 8px;
+@info-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
 
 // Image
 @image-placeholder-text-color: @gray-6;
@@ -754,20 +755,22 @@
 @tabbar-item-text-color: @gray-7;
 @tabbar-item-active-color: @blue;
 @tabbar-item-line-height: 1;
-@tabbar-item-icon-size: 18px;
+@tabbar-item-icon-size: 22px;
-@tabbar-item-margin-bottom: 5px;
+@tabbar-item-margin-bottom: 4px;
 
 // Tab
 @tab-text-color: @gray-7;
 @tab-active-text-color: @text-color;
 @tab-disabled-text-color: @gray-5;
 @tab-font-size: @font-size-md;
+@tab-line-height: @line-height-md;
 
 // Tabs
 @tabs-default-color: @red;
 @tabs-line-height: 44px;
 @tabs-card-height: 30px;
 @tabs-nav-background-color: @white;
+@tabs-bottom-bar-width: 40px;
 @tabs-bottom-bar-height: 3px;
 @tabs-bottom-bar-color: @tabs-default-color;
 

src/tab/README.md

@@ -224,7 +224,7 @@ export default {
 | color | Tab color | _string_ | `#ee0a24` |
 | background | Background color | _string_ | `white` |
 | duration | Toggle tab's animation time | _number \| string_ | `0.3` | - |
-| line-width | Width of tab line | _number \| string_ | Width of active tab |
+| line-width | Width of tab line | _number \| string_ | `40px` |
 | line-height | Height of tab line | _number \| string_ | `3px` |
 | animated | Whether to change tabs with animation | _boolean_ | `false` |
 | border | Whether to show border when `type="line"` | _boolean_ | `false` |

src/tab/README.zh-CN.md

@@ -231,8 +231,8 @@ export default {
 | color | 标签主题色 | _string_ | `#ee0a24` |
 | background | 标签栏背景色 | _string_ | `white` |
 | duration | 动画时间，单位秒 | _number \| string_ | `0.3` |
-| line-width | 底部条宽度，默认单位`px` | _number \| string_ | `auto` |
+| line-width | 底部条宽度，默认单位 `px` | _number \| string_ | `40px` |
-| line-height | 底部条高度，默认单位`px` | _number \| string_ | `3px` |
+| line-height | 底部条高度，默认单位 `px` | _number \| string_ | `3px` |
 | animated | 是否开启切换标签内容时的转场动画 | _boolean_ | `false` |
 | border | 是否显示标签栏外边框，仅在 `type="line"` 时有效 | _boolean_ | `false` |
 | ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` |

src/tab/test/__snapshots__/demo.spec.js.snap

@@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -36,7 +36,7 @@ exports[`renders demo correctly 1`] = `
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -62,7 +62,7 @@ exports[`renders demo correctly 1`] = `
           <div role="tab" class="van-tab"><span class="van-tab__text">标签 6</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text">标签 7</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text">标签 8</span></div>
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -100,7 +100,7 @@ exports[`renders demo correctly 1`] = `
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
           <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -144,7 +144,7 @@ exports[`renders demo correctly 1`] = `
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -167,7 +167,7 @@ exports[`renders demo correctly 1`] = `
               <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
               <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
               <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
-              <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+              <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
             </div>
           </div>
         </div>
@@ -194,7 +194,7 @@ exports[`renders demo correctly 1`] = `
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签  </span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签  </span></div>
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -215,7 +215,7 @@ exports[`renders demo correctly 1`] = `
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
       <div class="van-tabs__content van-tabs__content--animated">
@@ -252,7 +252,7 @@ exports[`renders demo correctly 1`] = `
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -285,7 +285,7 @@ exports[`renders demo correctly 1`] = `
               <div role="tab" class="van-tab"><span class="van-tab__text">标签 6</span></div>
               <div role="tab" class="van-tab"><span class="van-tab__text">标签 7</span></div>
               <div role="tab" class="van-tab"><span class="van-tab__text">标签 8</span></div>
-              <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+              <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
             </div>
           </div>
         </div>
@@ -326,7 +326,7 @@ exports[`renders demo correctly 1`] = `
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
       <div class="van-tabs__content">

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

@@ -65,7 +65,7 @@ exports[`click to switch tab 1`] = `
       <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
       <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
       <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
-      <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+      <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -87,7 +87,7 @@ exports[`click to switch tab 2`] = `
       <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
       <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
       <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
-      <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
+      <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -187,7 +187,7 @@ exports[`name prop 1`] = `
       <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
       <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
       <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
-      <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+      <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -238,7 +238,7 @@ exports[`scrollspy prop 1`] = `
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
     </div>
@@ -260,7 +260,7 @@ exports[`scrollspy prop 2`] = `
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
           <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
           <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
-          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
+          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
         </div>
       </div>
     </div>

src/tab/test/__snapshots__/insert.spec.js.snap

@@ -7,7 +7,7 @@ exports[`insert tab dynamically 1`] = `
       <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">1</span></div>
       <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">2</span></div>
       <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">3</span></div>
-      <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+      <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
     </div>
   </div>
   <div class="van-tabs__content">

src/tabbar-item/index.less

@@ -23,7 +23,7 @@
 
     img {
       display: block;
-      height: @tabbar-item-icon-size;
+      height: 20px;
     }
   }
 
@@ -32,6 +32,6 @@
   }
 
   .van-info {
-    margin-top: 2px;
+    margin-top: @padding-base;
   }
 }

src/tabs/index.js

@@ -204,11 +204,10 @@ export default createComponent({
 
         const title = titleRefs[this.currentIndex].$el;
         const { lineWidth, lineHeight } = this;
-        const width = isDef(lineWidth) ? lineWidth : title.offsetWidth / 2;
         const left = title.offsetLeft + title.offsetWidth / 2;
 
         const lineStyle = {
-          width: addUnit(width),
+          width: addUnit(lineWidth),
           backgroundColor: this.color,
           transform: `translateX(${left}px) translateX(-50%)`,
         };

src/tabs/index.less

@@ -10,6 +10,7 @@
   padding: 0 @padding-base;
   color: @tab-text-color;
   font-size: @tab-font-size;
+  line-height: @tab-line-height;
   cursor: pointer;
 
   &--active {
@@ -118,6 +119,7 @@
     bottom: 15px;
     left: 0;
     z-index: 1;
+    width: @tabs-bottom-bar-width;
     height: @tabs-bottom-bar-height;
     background-color: @tabs-bottom-bar-color;
     border-radius: @tabs-bottom-bar-height;