chore: merge branch "dev"

2025-04-06 03:57:59 +08:00 · 2019-11-27 11:05:48 +08:00 · 2019-11-27 11:05:48 +08:00 · 169cc9aa07
commit 169cc9aa07
parent 586fb58def d8e30bdcac
58 changed files with 864 additions and 693 deletions
--- a/docs/markdown/quickstart.zh-CN.md
+++ b/docs/markdown/quickstart.zh-CN.md
@ -29,6 +29,17 @@ npm i vant -S
 yarn add vant
 ```

+### 示例工程
+
+我们提供了一个基于 Vue Cli 的[示例工程](https://github.com/youzan/vant-demo)，示例工程会帮助你了解如下内容：
+
+- 基于 Vant 搭建单页面应用，配置按需引入组件
+- 配置基于 Rem 的适配方案
+- 配置基于 Viewport 的适配方案
+- 配置基于 TypeScript 的工程
+- 配置自定义主题色方案
+
+
 ## 引入组件

 ### 方式一. 自动按需引入组件 (推荐)
--- a/docs/markdown/theme.en-US.md
+++ b/docs/markdown/theme.en-US.md
@ -15,7 +15,7 @@ There are some basic variables below, all available variables could be found in
@text-color: #323233;
@border-color: #ebedf0;
@active-color: #f2f3f5;
-@background-color: #f8f8f8;
+@background-color: #f7f8fa;
@background-color-light: #fafafa;
 ```

--- a/docs/markdown/theme.zh-CN.md
+++ b/docs/markdown/theme.zh-CN.md
@ -19,7 +19,7 @@ Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置
@text-color: #323233;
@border-color: #ebedf0;
@active-color: #f2f3f5;
-@background-color: #f8f8f8;
+@background-color: #f7f8fa;
@background-color-light: #fafafa;
 ```

--- a/docs/site/components/DemoPages.vue
+++ b/docs/site/components/DemoPages.vue
@ -1,136 +0,0 @@
-<template>
-  <section class="van-doc-demo-pages">
-    <h1>示例工程</h1>
-
-    <div class="card">
-      <h3>介绍</h3>
-      <p>
-        我们提供了一个基于 Vue Cli 3 的示例工程，仓库地址为
-        <a
-          href="https://github.com/youzan/vant-demo"
-          target="_blank"
-        >Vant Demo</a>，示例工程会帮助你了解如下内容：
-      </p>
-      <ul>
-        <li>基于 Vant 搭建单页面应用，配置按需引入组件</li>
-        <li>配置基于 rem 的适配方案</li>
-        <li>配置基于 viewport 的适配方案</li>
-        <li>配置基于 TypeScript 的工程</li>
-        <li>配置自定义主题色方案</li>
-      </ul>
-    </div>
-
-    <div class="card">
-      <h3>示例页面</h3>
-      <p>下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。</p>
-      <div class="van-doc-demo-pages__gallery">
-        <div
-          :class="['van-doc-demo-pages__item', { 'van-doc-demo-pages__item--active': index === currentDemo }]"
-          v-for="(demo, index) in demos"
-        >
-          <h4>{{ demo.title }}</h4>
-          <a :href="demo.source" target="_blank">源代码</a>
-          <img :src="demo.preview" @click="onChangeDemo(demo, index)">
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'van-doc-demo-pages',
-
-  data() {
-    return {
-      currentDemo: 0
-    };
-  },
-
-  computed: {
-    demos() {
-      return [
-        {
-          title: '商品详情',
-          preview:
-            'https://img.yzcdn.cn/public_files/2017/10/24/7070a8d1d6504b864c605114d32f2aae.png',
-          url: '/vant-demo/#/goods',
-          source:
-            'https://github.com/youzan/vant-demo/blob/master/base/src/view/goods/index.vue'
-        },
-        {
-          title: '用户中心',
-          preview:
-            'https://img.yzcdn.cn/public_files/2017/10/23/e1d70757e3ab88d39a360b704be8f43f.png',
-          url: '/vant-demo/#/user',
-          source:
-            'https://github.com/youzan/vant-demo/blob/master/base/src/view/user/index.vue'
-        },
-        {
-          title: '购物车',
-          preview:
-            'https://img.yzcdn.cn/public_files/2017/10/24/06b8b5ed3692314d434db7f6854dcdbe.png',
-          url: '/vant-demo/#/cart',
-          source:
-            'https://github.com/youzan/vant-demo/blob/master/base/src/view/cart/index.vue'
-        }
-      ];
-    }
-  },
-
-  beforeMount() {
-    this.$emit('changeDemoURL', this.demos[0].url);
-  },
-
-  methods: {
-    onChangeDemo(demo, index) {
-      this.currentDemo = index;
-      this.$emit('changeDemoURL', demo.url);
-    }
-  }
-};
-</script>
-
-<style lang="less">
-.van-doc-demo-pages {
-  &__gallery {
-    margin-top: 30px;
-  }
-
-  &__item {
-    display: inline-block;
-    width: 28%;
-    margin-bottom: 40px;
-    text-align: center;
-
-    &:nth-child(3n + 1),
-    &:nth-child(3n + 2) {
-      margin-right: 4%;
-    }
-
-    h4 {
-      margin-top: 0;
-    }
-
-    img {
-      width: 100%;
-      background-color: #f8f8f8;
-      border-radius: 3px;
-      box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-      cursor: pointer;
-    }
-
-    a {
-      display: inline-block;
-      margin: 4px 0 7px;
-      font-size: 12px;
-    }
-
-    &--active {
-      img {
-        box-shadow: 0 1px 4px rgba(51, 136, 255, 0.4), 0 0 0 1px rgba(51, 136, 255, 0.4);
-      }
-    }
-  }
-}
-</style>
--- a/docs/site/doc.config.js
+++ b/docs/site/doc.config.js
@ -75,10 +75,6 @@ export default {
                path: '/style-guide',
                title: '风格指南'
              },
-              {
-                path: '/demo',
-                title: '示例工程'
-              },
              {
                path: '/locale',
                title: '国际化'
--- a/docs/site/mobile/App.vue
+++ b/docs/site/mobile/App.vue
@ -70,7 +70,7 @@ body {
  color: @text-color;
  font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
  line-height: 1;
-  background-color: #f8f8f8;
+  background-color: #f7f8fa;
  -webkit-font-smoothing: antialiased;
 }

@ -89,7 +89,7 @@ body {
  }

  .van-icon {
-    color: @gray-dark;
+    color: @gray-6;
    font-size: 24px;
    cursor: pointer;
  }
--- a/docs/site/router.js
+++ b/docs/site/router.js
@ -1,7 +1,6 @@
 import Vue from 'vue';
 import docConfig from './doc.config';
 import DemoList from './components/DemoList';
-import DemoPages from './components/DemoPages';
 import { demoWrapper } from './mobile/demo-common';
 import { initIframeRouter } from './utils/iframe-router';

@ -35,9 +34,7 @@ const registerRoute = ({ mobile, componentMap }) => {
        path = path.replace('/', '');

        let component;
-        if (path === 'demo') {
-          component = DemoPages;
-        } else if (mobile) {
+        if (mobile) {
          const module = componentMap[`./${path}/demo/index.vue`];

          if (module) {
--- a/packages/vant-touch-emulator/changelog.md
+++ b/packages/vant-touch-emulator/changelog.md
@ -0,0 +1,16 @@
+# Changelog
+
+### [v1.2.0]
+`2019-11-22`
+
+- fix incorrect touchmove behaviour in Firefox [\#5118](https://github.com/youzan/vant/pull/5118)
+
+### [v1.1.0]
+`2019-06-03`
+
+- skip emulator when browser support touch event
+
+### [v1.0.0]
+`2019-05-28`
+
+- initial release
--- a/packages/vant-touch-emulator/index.js
+++ b/packages/vant-touch-emulator/index.js
@ -78,34 +78,30 @@ function TouchList() {
  return touchList;
 }

-/**
- * Simple trick to fake touch event support
- * this is enough for most libraries like Modernizr and Hammer
- */
-function fakeTouchSupport() {
-  var objs = [window, document.documentElement];
-  var props = ['ontouchstart', 'ontouchmove', 'ontouchcancel', 'ontouchend'];

-  for (var o = 0; o < objs.length; o++) {
-    for (var p = 0; p < props.length; p++) {
-      if (objs[o] && objs[o][props[p]] === undefined) {
-        objs[o][props[p]] = null;
-      }
-    }
-  }
-}

 /**
 * only trigger touches when the left mousebutton has been pressed
 * @param touchType
 * @returns {Function}
 */
+
+ 
+var initiated = false;
 function onMouse(touchType) {
  return function(ev) {
    // prevent mouse events

-    if (ev.which !== 1) {
-      return;
+    if (ev.type === 'mousedown') {
+      initiated = true;
+    }
+
+    if (ev.type === 'mouseup') {
+      initiated = false;
+    }
+
+    if (ev.type === 'mousemove' && !initiated) {
+      return
    }

    // The EventTarget on which the touch point started when it was first placed on the surface,
@ -173,8 +169,6 @@ function getActiveTouches(mouseEv) {
 * TouchEmulator initializer
 */
 function TouchEmulator() {
-  fakeTouchSupport();
-
  window.addEventListener('mousedown', onMouse('touchstart'), true);
  window.addEventListener('mousemove', onMouse('touchmove'), true);
  window.addEventListener('mouseup', onMouse('touchend'), true);
--- a/packages/vant-touch-emulator/package.json
+++ b/packages/vant-touch-emulator/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vant/touch-emulator",
-  "version": "1.1.0",
+  "version": "1.2.0",
  "description": "Vant touch emulator",
  "main": "index.js",
  "publishConfig": {
--- a/src/action-sheet/index.less
+++ b/src/action-sheet/index.less
@ -8,6 +8,7 @@
  &__cancel {
    display: block;
    width: 100%;
+    padding: 0;
    font-size: @action-sheet-item-font-size;
    line-height: @action-sheet-item-height;
    text-align: center;
--- a/src/address-edit/Detail.js
+++ b/src/address-edit/Detail.js
@ -17,6 +17,12 @@ export default createComponent({
    showSearchResult: Boolean
  },

+  computed: {
+    shouldShowSearchResult() {
+      return this.focused && this.searchResult && this.showSearchResult;
+    }
+  },
+
  methods: {
    onSelect(express) {
      this.$emit('select-search', express);
@ -42,19 +48,31 @@ export default createComponent({
    },

    genSearchResult() {
-      const { searchResult } = this;
-      const show = this.focused && searchResult && this.showSearchResult;
-      if (show) {
+      const { value, shouldShowSearchResult, searchResult } = this;
+      if (shouldShowSearchResult) {
        return searchResult.map(express => (
          <Cell
            key={express.name + express.address}
-            title={express.name}
-            label={express.address}
-            icon="location-o"
            clickable
+            border={false}
+            icon="location-o"
+            label={express.address}
+            class={bem('search-item')}
            onClick={() => {
              this.onSelect(express);
            }}
+            scopedSlots={{
+              title: () => {
+                if (express.name) {
+                  const text = express.name.replace(
+                    value,
+                    `<span class=${bem('keyword')}>${value}</span>`
+                  );
+
+                  return <div domPropsInnerHTML={text} />;
+                }
+              }
+            }}
          />
        ));
      }
@ -72,6 +90,7 @@ export default createComponent({
          type="textarea"
          value={this.value}
          error={this.error}
+          border={!this.shouldShowSearchResult}
          label={t('label')}
          maxlength={this.detailMaxlength}
          placeholder={t('placeholder')}
--- a/src/address-edit/index.js
+++ b/src/address-edit/index.js
@ -251,64 +251,69 @@ export default createComponent({

    return (
      <div class={bem()}>
-        <Field
-          vModel={data.name}
-          clearable
-          label={t('name')}
-          placeholder={t('namePlaceholder')}
-          error={errorInfo.name}
-          onFocus={onFocus('name')}
-        />
-        <Field
-          vModel={data.tel}
-          clearable
-          type="tel"
-          label={t('tel')}
-          placeholder={t('telPlaceholder')}
-          error={errorInfo.tel}
-          onFocus={onFocus('tel')}
-        />
-        <Field
-          vShow={this.showArea}
-          readonly
-          label={t('area')}
-          placeholder={t('areaPlaceholder')}
-          value={this.areaText}
-          onClick={() => {
-            this.showAreaPopup = true;
-          }}
-        />
-        <Detail
-          vShow={this.showDetail}
-          focused={this.detailFocused}
-          value={data.addressDetail}
-          error={errorInfo.addressDetail}
-          detailRows={this.detailRows}
-          detailMaxlength={this.detailMaxlength}
-          searchResult={this.searchResult}
-          showSearchResult={this.showSearchResult}
-          onFocus={onFocus('addressDetail')}
-          onBlur={this.onDetailBlur}
-          onInput={this.onChangeDetail}
-          onSelect-search={event => {
-            this.$emit('select-search', event);
-          }}
-        />
-        {this.showPostal && (
+        <div class={bem('fields')}>
          <Field
-            vShow={!hideBottomFields}
-            vModel={data.postalCode}
-            type="tel"
-            maxlength="6"
-            label={t('postal')}
-            placeholder={t('postal')}
-            error={errorInfo.postalCode}
-            onFocus={onFocus('postalCode')}
+            vModel={data.name}
+            clearable
+            label={t('name')}
+            placeholder={t('namePlaceholder')}
+            error={errorInfo.name}
+            onFocus={onFocus('name')}
          />
-        )}
-        {this.slots()}
+          <Field
+            vModel={data.tel}
+            clearable
+            type="tel"
+            label={t('tel')}
+            placeholder={t('telPlaceholder')}
+            error={errorInfo.tel}
+            onFocus={onFocus('tel')}
+          />
+          <Field
+            vShow={this.showArea}
+            readonly
+            clickable
+            label={t('area')}
+            placeholder={t('areaPlaceholder')}
+            rightIcon="arrow"
+            value={this.areaText}
+            onClick={() => {
+              this.showAreaPopup = true;
+            }}
+          />
+          <Detail
+            vShow={this.showDetail}
+            focused={this.detailFocused}
+            value={data.addressDetail}
+            error={errorInfo.addressDetail}
+            detailRows={this.detailRows}
+            detailMaxlength={this.detailMaxlength}
+            searchResult={this.searchResult}
+            showSearchResult={this.showSearchResult}
+            onFocus={onFocus('addressDetail')}
+            onBlur={this.onDetailBlur}
+            onInput={this.onChangeDetail}
+            onSelect-search={event => {
+              this.$emit('select-search', event);
+            }}
+          />
+          {this.showPostal && (
+            <Field
+              vShow={!hideBottomFields}
+              vModel={data.postalCode}
+              type="tel"
+              maxlength="6"
+              label={t('postal')}
+              placeholder={t('postal')}
+              error={errorInfo.postalCode}
+              onFocus={onFocus('postalCode')}
+            />
+          )}
+          {this.slots()}
+        </div>
        {this.showSetDefault && (
          <SwitchCell
+            class={bem('default')}
            vModel={data.isDefault}
            vShow={!hideBottomFields}
            title={t('defaultAddress')}
@ -320,6 +325,7 @@ export default createComponent({
        <div vShow={!hideBottomFields} class={bem('buttons')}>
          <Button
            block
+            round
            loading={this.isSaving}
            type="danger"
            text={this.saveButtonText || t('save')}
@ -328,6 +334,7 @@ export default createComponent({
          {this.showDelete && (
            <Button
              block
+              round
              loading={this.isDeleting}
              text={this.deleteButtonText || t('delete')}
              onClick={this.onDelete}
--- a/src/address-edit/index.less
+++ b/src/address-edit/index.less
@ -1,6 +1,19 @@
@import '../style/var';

 .van-address-edit {
+  padding: @address-edit-padding;
+
+  &__fields {
+    overflow: hidden;
+    border-radius: @padding-xs;
+  }
+
+  &__default {
+    margin-top: @padding-sm;
+    overflow: hidden;
+    border-radius: @padding-xs;
+  }
+
  &__buttons {
    padding: @address-edit-buttons-padding;

@ -12,6 +25,14 @@
  &-detail {
    padding: 0;

+    &__search-item {
+      background-color: @gray-2;
+    }
+
+    &__keyword {
+      color: @red;
+    }
+
    &__finish {
      color: @address-edit-detail-finish-color;
      font-size: @address-edit-detail-finish-font-size;
--- a/src/address-edit/test/snapshots/demo.spec.js.snap
+++ b/src/address-edit/test/snapshots/demo.spec.js.snap
@ -4,41 +4,46 @@ exports[`renders demo correctly 1`] = `
 <div>
  <div>
    <div class="van-address-edit">
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>姓名</span></div>
-        <div class="van-cell__value">
-          <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+      <div class="van-address-edit__fields">
+        <div class="van-cell van-field">
+          <div class="van-cell__title van-field__label"><span>姓名</span></div>
+          <div class="van-cell__value">
+            <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+          </div>
        </div>
-      </div>
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>电话</span></div>
-        <div class="van-cell__value">
-          <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+        <div class="van-cell van-field">
+          <div class="van-cell__title van-field__label"><span>电话</span></div>
+          <div class="van-cell__value">
+            <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+          </div>
        </div>
-      </div>
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>地区</span></div>
-        <div class="van-cell__value">
-          <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
-        </div>
-      </div>
-      <div class="van-cell van-address-edit-detail">
-        <div class="van-cell__value van-cell__value--alone">
-          <div class="van-cell van-field">
-            <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-            <div class="van-cell__value">
-              <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+          <div class="van-cell__title van-field__label"><span>地区</span></div>
+          <div class="van-cell__value">
+            <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+              <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+                  <!----></i></div>
            </div>
          </div>
        </div>
-      </div>
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
-        <div class="van-cell__value">
-          <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
+        <div class="van-cell van-address-edit-detail">
+          <div class="van-cell__value van-cell__value--alone">
+            <div class="van-cell van-field">
+              <div class="van-cell__title van-field__label"><span>详细地址</span></div>
+              <div class="van-cell__value">
+                <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="van-cell van-field">
+          <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
+          <div class="van-cell__value">
+            <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
+          </div>
        </div>
      </div>
-      <div class="van-cell van-cell--center van-switch-cell">
+      <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
        <div class="van-cell__title"><span>设为默认收货地址</span></div>
        <div class="van-cell__value">
          <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
@ -46,7 +51,7 @@ exports[`renders demo correctly 1`] = `
          </div>
        </div>
      </div>
-      <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button><button class="van-button van-button--default van-button--normal van-button--block"><span class="van-button__text">删除</span></button></div>
+      <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button><button class="van-button van-button--default van-button--normal van-button--block van-button--round"><span class="van-button__text">删除</span></button></div>
    </div>
  </div>
 </div>
--- a/src/address-edit/test/snapshots/index.spec.js.snap
+++ b/src/address-edit/test/snapshots/index.spec.js.snap
@ -2,75 +2,85 @@

 exports[`create a AddressEdit 1`] = `
 <div class="van-address-edit">
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>姓名</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+  <div class="van-address-edit__fields">
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>姓名</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>电话</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>电话</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>地区</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+      <div class="van-cell__title van-field__label"><span>地区</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+          <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
+        </div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-address-edit-detail">
-    <div class="van-cell__value van-cell__value--alone">
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-        <div class="van-cell__value">
-          <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+    <div class="van-cell van-address-edit-detail">
+      <div class="van-cell__value van-cell__value--alone">
+        <div class="van-cell van-field">
+          <div class="van-cell__title van-field__label"><span>详细地址</span></div>
+          <div class="van-cell__value">
+            <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+          </div>
        </div>
      </div>
    </div>
  </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
 </div>
 `;

 exports[`create a AddressEdit with props 1`] = `
 <div class="van-address-edit">
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>姓名</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+  <div class="van-address-edit__fields">
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>姓名</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>电话</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>电话</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>地区</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
-    </div>
-  </div>
-  <div class="van-cell van-address-edit-detail">
-    <div class="van-cell__value van-cell__value--alone">
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-        <div class="van-cell__value">
-          <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+      <div class="van-cell__title van-field__label"><span>地区</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+          <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
        </div>
      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
+    <div class="van-cell van-address-edit-detail">
+      <div class="van-cell__value van-cell__value--alone">
+        <div class="van-cell van-field">
+          <div class="van-cell__title van-field__label"><span>详细地址</span></div>
+          <div class="van-cell__value">
+            <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
+      </div>
    </div>
  </div>
-  <div class="van-cell van-cell--center van-switch-cell">
+  <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
    <div class="van-cell__title"><span>设为默认收货地址</span></div>
    <div class="van-cell__value">
      <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
@ -78,47 +88,52 @@ exports[`create a AddressEdit with props 1`] = `
      </div>
    </div>
  </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
 </div>
 `;

 exports[`set-default 1`] = `
 <div class="van-address-edit">
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>姓名</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+  <div class="van-address-edit__fields">
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>姓名</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>电话</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>电话</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>地区</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
-    </div>
-  </div>
-  <div class="van-cell van-address-edit-detail">
-    <div class="van-cell__value van-cell__value--alone">
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-        <div class="van-cell__value">
-          <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+      <div class="van-cell__title van-field__label"><span>地区</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+          <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
        </div>
      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
+    <div class="van-cell van-address-edit-detail">
+      <div class="van-cell__value van-cell__value--alone">
+        <div class="van-cell van-field">
+          <div class="van-cell__title van-field__label"><span>详细地址</span></div>
+          <div class="van-cell__value">
+            <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
+      </div>
    </div>
  </div>
-  <div class="van-cell van-cell--center van-switch-cell">
+  <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
    <div class="van-cell__title"><span>设为默认收货地址</span></div>
    <div class="van-cell__value">
      <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
@ -126,47 +141,52 @@ exports[`set-default 1`] = `
      </div>
    </div>
  </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
 </div>
 `;

 exports[`show area component 1`] = `
 <div class="van-address-edit">
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>姓名</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+  <div class="van-address-edit__fields">
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>姓名</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>电话</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>电话</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>地区</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
-    </div>
-  </div>
-  <div class="van-cell van-address-edit-detail">
-    <div class="van-cell__value van-cell__value--alone">
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-        <div class="van-cell__value">
-          <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+      <div class="van-cell__title van-field__label"><span>地区</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+          <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
        </div>
      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
+    <div class="van-cell van-address-edit-detail">
+      <div class="van-cell__value van-cell__value--alone">
+        <div class="van-cell van-field">
+          <div class="van-cell__title van-field__label"><span>详细地址</span></div>
+          <div class="van-cell__value">
+            <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
+      </div>
    </div>
  </div>
-  <div class="van-cell van-cell--center van-switch-cell">
+  <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
    <div class="van-cell__title"><span>设为默认收货地址</span></div>
    <div class="van-cell__value">
      <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
@ -174,47 +194,52 @@ exports[`show area component 1`] = `
      </div>
    </div>
  </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
 </div>
 `;

 exports[`show area component 2`] = `
 <div class="van-address-edit">
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>姓名</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+  <div class="van-address-edit__fields">
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>姓名</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>电话</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>电话</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>地区</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
-    </div>
-  </div>
-  <div class="van-cell van-address-edit-detail">
-    <div class="van-cell__value van-cell__value--alone">
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-        <div class="van-cell__value">
-          <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+      <div class="van-cell__title van-field__label"><span>地区</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+          <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
        </div>
      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
+    <div class="van-cell van-address-edit-detail">
+      <div class="van-cell__value van-cell__value--alone">
+        <div class="van-cell van-field">
+          <div class="van-cell__title van-field__label"><span>详细地址</span></div>
+          <div class="van-cell__value">
+            <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
+      </div>
    </div>
  </div>
-  <div class="van-cell van-cell--center van-switch-cell">
+  <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
    <div class="van-cell__title"><span>设为默认收货地址</span></div>
    <div class="van-cell__value">
      <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
@ -222,40 +247,45 @@ exports[`show area component 2`] = `
      </div>
    </div>
  </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
 </div>
 `;

 exports[`valid area placeholder confirm 1`] = `
 <div class="van-address-edit">
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>姓名</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+  <div class="van-address-edit__fields">
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>姓名</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>电话</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    <div class="van-cell van-field">
+      <div class="van-cell__title van-field__label"><span>电话</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-field">
-    <div class="van-cell__title van-field__label"><span>地区</span></div>
-    <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+      <div class="van-cell__title van-field__label"><span>地区</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+          <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
+        </div>
+      </div>
    </div>
-  </div>
-  <div class="van-cell van-address-edit-detail">
-    <div class="van-cell__value van-cell__value--alone">
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-        <div class="van-cell__value">
-          <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+    <div class="van-cell van-address-edit-detail">
+      <div class="van-cell__value van-cell__value--alone">
+        <div class="van-cell van-field">
+          <div class="van-cell__title van-field__label"><span>详细地址</span></div>
+          <div class="van-cell__value">
+            <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+          </div>
        </div>
      </div>
    </div>
  </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
 </div>
 `;
--- a/src/address-list/Item.tsx
+++ b/src/address-list/Item.tsx
@ -3,6 +3,7 @@ import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
 import Cell from '../cell';
 import Radio from '../radio';
+import Tag from '../tag';

 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@ -13,12 +14,14 @@ export type AddressItemData = {
  tel: string | number;
  name: string;
  address: string;
+  isDefault: boolean;
 };

 export type AddressItemProps = {
  data: AddressItemData;
  disabled?: boolean;
  switchable?: boolean;
+  defaultTagText?: string;
 };

 export type AddressItemEvents = {
@ -60,7 +63,14 @@ function AddressItem(
  const genContent = () => {
    const { data } = props;
    const Info = [
-      <div class={bem('name')}>{`${data.name}，${data.tel}`}</div>,
+      <div class={bem('name')}>
+        {`${data.name} ${data.tel}`}
+        {data.isDefault && props.defaultTagText && (
+          <Tag type="danger" round class={bem('tag')}>
+            {props.defaultTagText}
+          </Tag>
+        )}
+      </div>,
      <div class={bem('address')}>{data.address}</div>
    ];

@ -77,6 +87,7 @@ function AddressItem(
    <Cell
      class={bem({ disabled })}
      valueClass={bem('value')}
+      border={false}
      clickable={switchable && !disabled}
      scopedSlots={{
        default: genContent,
@ -91,7 +102,8 @@ function AddressItem(
 AddressItem.props = {
  data: Object,
  disabled: Boolean,
-  switchable: Boolean
+  switchable: Boolean,
+  defaultTagText: String
 };

 export default createComponent<AddressItemProps, AddressItemEvents>(AddressItem);
--- a/src/address-list/README.md
+++ b/src/address-list/README.md
@ -77,6 +77,7 @@ export default {
 | disabled-text | Disabled text | *string* | - | - |
 | switchable | Whether to allow switch address | *boolean* | `true` | - |
 | add-button-text | Add button text | *string* | `Add new address` | - |
+| default-tag-text | Default tag text | *string* | - | - |

 ### Events

@ -97,6 +98,7 @@ export default {
 | name | Name | *string* |
 | tel | Phone | *string \| number* |
 | address | Address | *string* |
+| isDefault | Is default address | *boolean* |

 ### Slots

--- a/src/address-list/README.zh-CN.md
+++ b/src/address-list/README.zh-CN.md
@ -78,6 +78,7 @@ export default {
 | disabled-text | 不可配送提示文案 | *string* | - | - |
 | switchable | 是否允许切换地址 | *boolean* | `true` | - |
 | add-button-text | 底部按钮文字 | *string* | `新增地址` | - |
+| default-tag-text | 默认地址标签文字 | *string* | - | - |

 ### Events

@ -98,6 +99,7 @@ export default {
 | name | 收货人姓名 | *string* |
 | tel | 收货人手机号 | *string \| number* |
 | address | 收货地址 | *string* |
+| isDefault | 是否为默认地址 | *boolean* |

 ### Slots

--- a/src/address-list/demo/index.vue
+++ b/src/address-list/demo/index.vue
@ -3,6 +3,7 @@
    <demo-block :title="$t('basicUsage')">
      <van-address-list
        v-model="chosenAddressId"
+        :default-tag-text="$t('defaultTagText')"
        :list="$t('list')"
        :disabled-list="$t('disabledList')"
        :disabled-text="$t('disabledText')"
@ -22,7 +23,8 @@ export default {
          id: '1',
          name: '张三',
          tel: '13000000000',
-          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
+          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
+          isDefault: true
        },
        {
          id: '2',
@ -41,7 +43,8 @@ export default {
      ],
      add: '新增地址',
      edit: '编辑地址',
-      disabledText: '以下地址超出配送范围'
+      disabledText: '以下地址超出配送范围',
+      defaultTagText: '默认'
    },
    'en-US': {
      list: [
@ -49,7 +52,8 @@ export default {
          id: '1',
          name: 'John Snow',
          tel: '13000000000',
-          address: 'Somewhere'
+          address: 'Somewhere',
+          isDefault: true
        },
        {
          id: '2',
@ -68,7 +72,8 @@ export default {
      ],
      add: 'Add',
      edit: 'Edit',
-      disabledText: 'The following address is out of range'
+      disabledText: 'The following address is out of range',
+      defaultTagText: 'Default'
    }
  },

--- a/src/address-list/index.less
+++ b/src/address-list/index.less
@ -3,17 +3,26 @@
 .van-address-list {
  box-sizing: border-box;
  height: 100%;
-  padding-bottom: 100px;
+  padding: @address-list-padding;

-  &__add {
+  &__bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: @address-list-add-button-z-index;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 5px @padding-md;
+    background-color: @white;
+  }
+
+  &__add {
+    height: 40px;
+    line-height: 38px;
  }

  &__disabled-text {
-    padding: 0 @padding-md;
+    padding: @address-list-disabled-text-padding;
    color: @address-list-disabled-text-color;
    font-size: @address-list-disabled-text-font-size;
    line-height: @address-list-disabled-text-line-height;
@ -22,16 +31,30 @@

 .van-address-item {
  padding: @address-list-item-padding;
+  border-radius: @border-radius-md;
+
+  &:not(:last-child) {
+    margin-bottom: @padding-sm;
+  }

  &__value {
-    padding-right: @padding-xl;
+    padding-right: 44px;
  }

  &__name {
-    margin-bottom: @padding-base;
-    font-weight: @font-weight-bold;
-    font-size: @font-size-md;
-    line-height: 20px;
+    display: flex;
+    align-items: center;
+    margin-bottom: @padding-xs;
+    font-size: @font-size-lg;
+    line-height: 22px;
+  }
+
+  &__tag {
+    flex: none;
+    margin-left: @padding-xs;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: 1.4em;
  }

  &__address {
@ -51,12 +74,21 @@
    position: absolute;
    top: 50%;
    right: @padding-md;
+    color: @gray-6;
    font-size: @address-list-edit-icon-size;
    transform: translate(0, -50%);
  }

+  .van-radio__label {
+    margin-left: @padding-sm;
+  }
+
  .van-radio__icon--checked .van-icon {
    background-color: @address-list-item-radio-icon-color;
    border-color: @address-list-item-radio-icon-color;
  }
+
+  .van-radio__icon:not(.van-radio__icon--checked) {
+    visibility: hidden;
+  }
 }
--- a/src/address-list/index.tsx
+++ b/src/address-list/index.tsx
@ -15,6 +15,7 @@ export type AddressListProps = {
  addButtonText?: string;
  list?: AddressItemData[];
  disabledList?: AddressItemData[];
+  defaultTagText?: string;
 };

 export type AddressListSlots = DefaultSlots & {
@ -40,6 +41,7 @@ function AddressList(
        key={item.id}
        disabled={disabled}
        switchable={props.switchable}
+        defaultTagText={props.defaultTagText}
        onSelect={() => {
          emit(ctx, disabled ? 'select-disabled' : 'select', item, index);

@ -67,16 +69,18 @@ function AddressList(
      {props.disabledText && <div class={bem('disabled-text')}>{props.disabledText}</div>}
      {DisabledList}
      {slots.default && slots.default()}
-      <Button
-        square
-        size="large"
-        type="danger"
-        class={bem('add')}
-        text={props.addButtonText || t('add')}
-        onClick={() => {
-          emit(ctx, 'add');
-        }}
-      />
+      <div class={bem('bottom')}>
+        <Button
+          round
+          block
+          type="danger"
+          class={bem('add')}
+          text={props.addButtonText || t('add')}
+          onClick={() => {
+            emit(ctx, 'add');
+          }}
+        />
+      </div>
    </div>
  );
 }
@ -90,7 +94,8 @@ AddressList.props = {
  switchable: {
    type: Boolean,
    default: true
-  }
+  },
+  defaultTagText: String
 };

 export default createComponent<AddressListProps>(AddressList);
--- a/src/address-list/test/snapshots/demo.spec.js.snap
+++ b/src/address-list/test/snapshots/demo.spec.js.snap
@ -5,34 +5,37 @@ exports[`renders demo correctly 1`] = `
  <div>
    <div class="van-address-list">
      <div role="radiogroup" class="van-radio-group">
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-address-item">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
          <div class="van-cell__value van-cell__value--alone van-address-item__value">
            <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
              <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success">
-                  <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
+                  <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三 13000000000<span class="van-tag van-tag--round van-tag--danger van-address-item__tag">默认</span>
            </div>
-          </div><i class="van-icon van-icon-edit van-address-item__edit">
-            <!----></i>
-        </div>
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-address-item">
-          <div class="van-cell__value van-cell__value--alone van-address-item__value">
-            <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-              <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
-                  <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
-            </div>
-          </div><i class="van-icon van-icon-edit van-address-item__edit">
-            <!----></i>
-        </div>
-      </div>
-      <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
-      <div class="van-cell van-address-item van-address-item--disabled">
-        <div class="van-cell__value van-cell__value--alone van-address-item__value">
-          <div class="van-address-item__name">王五，1320000000</div>
-          <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
+            <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
+          </div>
        </div><i class="van-icon van-icon-edit van-address-item__edit">
          <!----></i>
-      </div><button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button>
+      </div>
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
+        <div class="van-cell__value van-cell__value--alone van-address-item__value">
+          <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
+            <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
+                <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四 1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
+          </div>
+        </div><i class="van-icon van-icon-edit van-address-item__edit">
+          <!----></i>
+      </div>
    </div>
+    <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
+    <div class="van-cell van-cell--borderless van-address-item van-address-item--disabled">
+      <div class="van-cell__value van-cell__value--alone van-address-item__value">
+        <div class="van-address-item__name">王五 1320000000</div>
+        <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
+      </div><i class="van-icon van-icon-edit van-address-item__edit">
+        <!----></i>
+    </div>
+    <div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
  </div>
 </div>
+</div>
 `;
--- a/src/address-list/test/snapshots/index.spec.js.snap
+++ b/src/address-list/test/snapshots/index.spec.js.snap
@ -3,20 +3,21 @@
 exports[`unswitchable 1`] = `
 <div class="van-address-list">
  <div role="radiogroup" class="van-radio-group">
-    <div class="van-cell van-address-item">
+    <div class="van-cell van-cell--borderless van-address-item">
      <div class="van-cell__value van-cell__value--alone van-address-item__value">
-        <div class="van-address-item__name">张三，13000000000</div>
+        <div class="van-address-item__name">张三 13000000000</div>
        <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div>
      </div><i class="van-icon van-icon-edit van-address-item__edit">
        <!----></i>
    </div>
-    <div class="van-cell van-address-item">
+    <div class="van-cell van-cell--borderless van-address-item">
      <div class="van-cell__value van-cell__value--alone van-address-item__value">
-        <div class="van-address-item__name">李四，1310000000</div>
+        <div class="van-address-item__name">李四 1310000000</div>
        <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div>
      </div><i class="van-icon van-icon-edit van-address-item__edit">
        <!----></i>
    </div>
-  </div><button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button>
+  </div>
+  <div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
 </div>
 `;
--- a/src/card/index.tsx
+++ b/src/card/index.tsx
@ -51,7 +51,7 @@ function Card(
  const showNum = slots.num || isDef(props.num);
  const showPrice = slots.price || isDef(props.price);
  const showOriginPrice = slots['origin-price'] || isDef(props.originPrice);
-  const showBottom = showNum || showPrice || showOriginPrice;
+  const showBottom = showNum || showPrice || showOriginPrice || slots.bottom;

  function onThumbClick(event: MouseEvent) {
    emit(ctx, 'click-thumb', event);
--- a/src/card/test/snapshots/index.spec.js.snap
+++ b/src/card/test/snapshots/index.spec.js.snap
@ -4,9 +4,7 @@ exports[`render bottom slot 1`] = `
 <div class="van-card">
  <div class="van-card__header">
    <div class="van-card__content">
-      <div class="van-card__bottom">
-        <div class="van-card__price">¥ 100</div>Custom Bottom
-      </div>
+      <div class="van-card__bottom">Custom Bottom</div>
    </div>
  </div>
 </div>
--- a/src/card/test/index.spec.js
+++ b/src/card/test/index.spec.js
@ -65,9 +65,6 @@ test('render origin-price slot', () => {

 test('render bottom slot', () => {
  const wrapper = mount(Card, {
-    propsData: {
-      price: 100
-    },
    scopedSlots: {
      bottom: () => 'Custom Bottom'
    }
--- a/src/circle/README.md
+++ b/src/circle/README.md
@ -121,7 +121,8 @@ export default {
 | speed | Animate speed（rate/s）| *number* | `0` | - |
 | text | Text | *string* | - | - |
 | stroke-width | Stroke width | *number* | `40` | - |
-| clockwise | Is clockwise | *boolean* | `true` | - |
+| stroke-linecap | Stroke linecap，can be set to `sqaure` `butt` | *string* | `round` | 2.2.15 |
+| clockwise | Whether to be clockwise | *boolean* | `true` | - |

 ### Slots

--- a/src/circle/README.zh-CN.md
+++ b/src/circle/README.zh-CN.md
@ -133,6 +133,7 @@ export default {
 | speed | 动画速度（单位为 rate/s）| *number* | `0` | - |
 | text | 文字 | *string* | - | - |
 | stroke-width | 进度条宽度 | *number* | `40` | - |
+| stroke-linecap | 进度条端点的形状，可选值为`sqaure` `butt` | *string* | `round` | 2.2.15 |
 | clockwise | 是否顺时针增加 | *boolean* | `true` | - |

 ### Slots
--- a/src/circle/index.js
+++ b/src/circle/index.js
@ -14,12 +14,14 @@ function format(rate) {

 function getPath(clockwise, viewBoxSize) {
  const sweepFlag = clockwise ? 1 : 0;
-  return `M ${viewBoxSize / 2} ${viewBoxSize / 2} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
+  return `M ${viewBoxSize / 2} ${viewBoxSize /
+    2} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
 }

 export default createComponent({
  props: {
    text: String,
+    strokeLinecap: String,
    value: {
      type: Number,
      default: 0
@ -85,6 +87,7 @@ export default createComponent({
      return {
        stroke: `${this.color}`,
        strokeWidth: `${this.strokeWidth + 1}px`,
+        strokeLinecap: this.strokeLinecap,
        strokeDasharray: `${offset}px ${PERIMETER}px`
      };
    },
@ -129,7 +132,9 @@ export default createComponent({
        this.startRate = this.value;
        this.endRate = format(this.rate);
        this.increase = this.endRate > this.startRate;
-        this.duration = Math.abs(((this.startRate - this.endRate) * 1000) / this.speed);
+        this.duration = Math.abs(
+          ((this.startRate - this.endRate) * 1000) / this.speed
+        );

        if (this.speed) {
          cancelRaf(this.rafId);
@ -168,7 +173,8 @@ export default createComponent({
            stroke={this.gradient ? `url(#${this.uid})` : this.color}
          />
        </svg>
-        {this.slots() || (this.text && <div class={bem('text')}>{this.text}</div>)}
+        {this.slots() ||
+          (this.text && <div class={bem('text')}>{this.text}</div>)}
      </div>
    );
  }
--- a/src/circle/test/snapshots/index.spec.js.snap
+++ b/src/circle/test/snapshots/index.spec.js.snap
@ -13,3 +13,10 @@ exports[`speed is 0 1`] = `
    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
  </svg></div>
 `;
+
+exports[`stroke-linecap prop 1`] = `
+<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
+  </svg></div>
+`;
--- a/src/circle/test/index.spec.js
+++ b/src/circle/test/index.spec.js
@ -47,3 +47,13 @@ test('size prop', () => {

  expect(wrapper).toMatchSnapshot();
 });
+
+test('stroke-linecap prop', () => {
+  const wrapper = mount(Circle, {
+    propsData: {
+      strokeLinecap: 'square'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
--- a/src/contact-card/README.md
+++ b/src/contact-card/README.md
@ -155,6 +155,7 @@ export default {
 | v-model | Id of chosen contact | *string \| number* | - | - |
 | list | Contact list | *Contact[]* | `[]` | - |
 | add-text | Add button text | *string* | `Add new contact` | - |
+| default-tag-text | Default tag text | *string* | - | - |

 ### ContactList Events

@ -164,6 +165,7 @@ export default {
 | edit | Triggered when click edit button | item: contact object，index |
 | select | Triggered when select contact | item: contact object |

+
 ### ContactEdit Props

 | Attribute | Description | Type | Default | Version |
@ -173,6 +175,8 @@ export default {
 | is-saving | Whether to show save button loading status | *boolean* | `false` | - |
 | is-deleting | Whether to show delete button loading status | *boolean* | `false` | - |
 | tel-validator | The method to validate tel | *(tel: string) => boolean* | - | - |
+| show-set-default | Whether to show default contact switch | *boolean* | `false` | - |
+| set-default-label | default contact switch label | *string* | - | - |

 ### ContactEdit Events

@ -188,3 +192,4 @@ export default {
 | id | ID | *string \| number* |
 | name | Name | *string* |
 | tel | Phone | *string* |
+| isDefault | Is default contact | *boolean* |
--- a/src/contact-card/README.zh-CN.md
+++ b/src/contact-card/README.zh-CN.md
@ -159,6 +159,7 @@ export default {
 | v-model | 当前选中联系人的 id | *string \| number* | - | - |
 | list | 联系人列表 | *Contact[]* | `[]` | - |
 | add-text | 新建按钮文案 | *string* | `新建联系人` | - |
+| default-tag-text | 默认联系人标签文案 | *string* | - | - |

 ### ContactList Events

@ -177,6 +178,8 @@ export default {
 | is-saving | 是否显示保存按钮加载动画 | *boolean* | `false` | - |
 | is-deleting | 是否显示删除按钮加载动画 | *boolean* | `false` | - |
 | tel-validator | 手机号格式校验函数 | *(tel: string) => boolean* | - | - |
+| show-set-default | 是否显示默认联系人栏 | *boolean* | `false` | - |
+| set-default-label | 默认联系人栏文案 | *string* | - | - |

 ### ContactEdit Events

@ -192,3 +195,4 @@ export default {
 | id | 每位联系人的唯一标识 | *string \| number* |
 | name | 联系人姓名 | *string* |
 | tel | 联系人手机号 | *string \| number* |
+| isDefault | 是否为默认联系人 | *boolean* |
--- a/src/contact-card/demo/index.vue
+++ b/src/contact-card/demo/index.vue
@ -16,6 +16,7 @@
        <van-contact-list
          v-model="chosenContactId"
          :list="list"
+          :default-tag-text="$t('defaultTagText')"
          @add="onAdd"
          @edit="onEdit"
          @select="onSelect"
@ -28,6 +29,8 @@
        :lazy-render="false"
      >
        <van-contact-edit
+          show-set-default
+          :set-default-label="$t('defaultLabel')"
          :contact-info="editingContact"
          :is-edit="isEdit"
          @save="onSave"
@ -51,10 +54,14 @@
 export default {
  i18n: {
    'zh-CN': {
-      name: '张三'
+      name: '张三',
+      defaultLabel: '设为默认联系人',
+      defaultTagText: '默认'
    },
    'en-US': {
-      name: 'John Snow'
+      name: 'John Snow',
+      defaultLabel: 'Set as the default contact',
+      defaultTagText: 'default'
    }
  },

@ -74,7 +81,8 @@ export default {
      return {
        name: this.$t('name'),
        tel: '13000000000',
-        id: 0
+        id: 0,
+        isDefault: 1
      };
    },

--- a/src/contact-card/test/snapshots/demo.spec.js.snap
+++ b/src/contact-card/test/snapshots/demo.spec.js.snap
@ -11,33 +11,43 @@ exports[`renders demo correctly 1`] = `
    <div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
      <div class="van-contact-list">
        <div role="radiogroup" class="van-radio-group van-contact-list__group">
-          <div role="button" tabindex="0" class="van-cell van-cell--clickable van-contact-list__item">
-            <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
-              <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-                <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
-                    <!----></i></div><span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span>
-              </div>
-            </div><i class="van-icon van-icon-edit van-contact-list__edit">
+          <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
              <!----></i>
+            <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">张三，13000000000<span class="van-tag van-tag--round van-tag--danger van-contact-list__item-tag">默认</span></div>
+            <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
+              <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
+                  <!----></i></div>
+            </div>
          </div>
-        </div><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
+        </div>
+        <div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"><span class="van-button__text">新建联系人</span></button></div>
      </div>
    </div>
    <div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
      <div class="van-contact-edit">
-        <div class="van-cell van-field">
-          <div class="van-cell__title van-field__label"><span>张三</span></div>
-          <div class="van-cell__value">
-            <div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></div>
+        <div class="van-contact-edit__fields">
+          <div class="van-cell van-field">
+            <div class="van-cell__title van-field__label"><span>张三</span></div>
+            <div class="van-cell__value">
+              <div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></div>
+            </div>
+          </div>
+          <div class="van-cell van-field">
+            <div class="van-cell__title van-field__label"><span>电话</span></div>
+            <div class="van-cell__value">
+              <div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div>
+            </div>
          </div>
        </div>
-        <div class="van-cell van-field">
-          <div class="van-cell__title van-field__label"><span>电话</span></div>
+        <div class="van-cell van-cell--borderless van-contact-edit__switch-cell">
+          <div class="van-cell__title"><span>设为默认联系人</span></div>
          <div class="van-cell__value">
-            <div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div>
+            <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
+              <div class="van-switch__node"></div>
+            </div>
          </div>
        </div>
-        <div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+        <div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
      </div>
    </div>
  </div>
--- a/src/contact-card/test/snapshots/index.spec.js.snap
+++ b/src/contact-card/test/snapshots/index.spec.js.snap
@ -3,15 +3,15 @@
 exports[`ContactList render 1`] = `
 <div class="van-contact-list">
  <div role="radiogroup" class="van-radio-group van-contact-list__group">
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-contact-list__item">
-      <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
-        <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-          <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
-              <!----></i></div><span class="van-radio__label"><div class="van-contact-list__name">test，123123213</div></span>
-        </div>
-      </div><i class="van-icon van-icon-edit van-contact-list__edit">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
        <!----></i>
+      <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">test，123123213</div>
+      <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
+        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
+            <!----></i></div>
+      </div>
    </div>
-  </div><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
+  </div>
+  <div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"><span class="van-button__text">新建联系人</span></button></div>
 </div>
 `;
--- a/src/contact-edit/index.js
+++ b/src/contact-edit/index.js
@ -3,6 +3,8 @@ import Button from '../button';
 import Field from '../field';
 import Toast from '../toast';
 import Dialog from '../dialog';
+import Switch from '../switch';
+import Cell from '../cell';
 import { isMobile } from '../utils/validate/mobile';

 const [createComponent, bem, t] = createNamespace('contact-edit');
@ -17,6 +19,8 @@ export default createComponent({
    isEdit: Boolean,
    isSaving: Boolean,
    isDeleting: Boolean,
+    showSetDefault: Boolean,
+    setDefaultLabel: String,
    contactInfo: {
      type: Object,
      default: () => ({ ...defaultContact })
@ -94,34 +98,58 @@ export default createComponent({

    return (
      <div class={bem()}>
-        <Field
-          vModel={data.name}
-          clearable
-          maxlength="30"
-          label={t('name')}
-          placeholder={t('nameEmpty')}
-          error={errorInfo.name}
-          onFocus={onFocus('name')}
-        />
-        <Field
-          vModel={data.tel}
-          clearable
-          type="tel"
-          label={t('tel')}
-          placeholder={t('telEmpty')}
-          error={errorInfo.tel}
-          onFocus={onFocus('tel')}
-        />
+        <div class={bem('fields')}>
+          <Field
+            vModel={data.name}
+            clearable
+            maxlength="30"
+            label={t('name')}
+            placeholder={t('nameEmpty')}
+            error={errorInfo.name}
+            onFocus={onFocus('name')}
+          />
+          <Field
+            vModel={data.tel}
+            clearable
+            type="tel"
+            label={t('tel')}
+            placeholder={t('telEmpty')}
+            error={errorInfo.tel}
+            onFocus={onFocus('tel')}
+          />
+        </div>
+        {this.showSetDefault && (
+          <Cell
+            title={this.setDefaultLabel}
+            class={bem('switch-cell')}
+            border={false}
+          >
+            <Switch
+              vModel={data.isDefault}
+              size={24}
+              onChange={event => {
+                this.$emit('change-default', event);
+              }}
+            />
+          </Cell>
+        )}
        <div class={bem('buttons')}>
          <Button
            block
+            round
            type="danger"
            text={t('save')}
            loading={this.isSaving}
            onClick={this.onSave}
          />
          {this.isEdit && (
-            <Button block text={t('delete')} loading={this.isDeleting} onClick={this.onDelete} />
+            <Button
+              block
+              round
+              text={t('delete')}
+              loading={this.isDeleting}
+              onClick={this.onDelete}
+            />
          )}
        </div>
      </div>
--- a/src/contact-edit/index.less
+++ b/src/contact-edit/index.less
@ -1,15 +1,39 @@
@import '../style/var';

 .van-contact-edit {
+  padding: @contact-edit-padding;
+
+  &__fields {
+    overflow: hidden;
+    border-radius: @contact-edit-fields-radius;
+
+    .van-cell__title {
+      max-width: @contact-edit-field-label-width;
+    }
+  }
+
+  &__switch-cell {
+    margin-top: 10px;
+    padding-top: 9px;
+    padding-bottom: 9px;
+    overflow: hidden;
+    border-radius: @contact-edit-fields-radius;
+
+    .van-cell__value {
+      flex: none;
+    }
+
+    .van-switch {
+      vertical-align: top;
+    }
+  }
+
  &__buttons {
    padding: @contact-edit-buttons-padding;
  }

-  .van-cell__title {
-    max-width: @contact-edit-field-label-width;
-  }
-
  .van-button {
    margin-bottom: @contact-edit-button-margin-bottom;
+    font-size: @contact-edit-button-font-size;
  }
 }
--- a/src/contact-list/index.less
+++ b/src/contact-list/index.less
@ -10,7 +10,18 @@
  }

  &__item-value {
+    display: flex;
+    align-items: center;
    padding-right: @padding-xl;
+    padding-left: @padding-xs;
+  }
+
+  &__item-tag {
+    flex: none;
+    margin-left: @padding-xs;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: 1.4em;
  }

  &__group {
@ -20,24 +31,22 @@
    -webkit-overflow-scrolling: touch;
  }

-  &__name {
-    font-weight: @font-weight-bold;
-    font-size: @font-size-md;
-    line-height: 20px;
-  }
-
  &__edit {
-    position: absolute;
-    top: 50%;
-    right: @padding-md;
    font-size: @contact-list-edit-icon-size;
-    transform: translate(0, -50%);
  }

-  &__add {
+  &__bottom {
    position: fixed;
+    right: 0;
    bottom: 0;
    left: 0;
    z-index: @contact-list-add-button-z-index;
+    padding: 5px 16px;
+    background-color: @white;
+  }
+
+  &__add {
+    height: 40px;
+    line-height: 38px;
  }
 }
--- a/src/contact-list/index.tsx
+++ b/src/contact-list/index.tsx
@ -3,24 +3,27 @@ import { RED } from '../utils/constant';
 import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
 import Cell from '../cell';
+import Tag from '../tag';
 import Button from '../button';
 import Radio from '../radio';
 import RadioGroup from '../radio-group';

 // Types
-import { CreateElement, RenderContext } from 'vue/types';
+import { CreateElement, RenderContext, VNode } from 'vue/types';
 import { DefaultSlots } from '../utils/types';

 export type ContactListItem = {
  id: string | number;
  tel: string | number;
  name: string;
+  isDefault: boolean;
 };

 export type ContactListProps = {
  value?: any;
  list?: ContactListItem[];
  addText?: string;
+  defaultTagText?: string;
 };

 const [createComponent, bem, t] = createNamespace('contact-list');
@ -39,15 +42,18 @@ function ContactList(
        emit(ctx, 'select', item, index);
      }

-      function Content() {
+      function RightIcon() {
        return (
-          <Radio name={item.id} iconSize={16} checkedColor={RED} onClick={onClick}>
-            <div class={bem('name')}>{`${item.name}，${item.tel}`}</div>
-          </Radio>
+          <Radio
+            name={item.id}
+            iconSize={16}
+            checkedColor={RED}
+            onClick={onClick}
+          />
        );
      }

-      function RightIcon() {
+      function LeftIcon() {
        return (
          <Icon
            name="edit"
@ -60,15 +66,31 @@ function ContactList(
        );
      }

+      function Content() {
+        const nodes = ([`${item.name}，${item.tel}`] as unknown[]) as VNode[];
+
+        if (item.isDefault && props.defaultTagText) {
+          nodes.push(
+            <Tag type="danger" round class={bem('item-tag')}>
+              {props.defaultTagText}
+            </Tag>
+          );
+        }
+
+        return nodes;
+      }
+
      return (
        <Cell
          key={item.id}
          isLink
+          center
          class={bem('item')}
          valueClass={bem('item-value')}
          scopedSlots={{
+            icon: LeftIcon,
            default: Content,
-            'right-icon': RightIcon
+            'right-icon': RightIcon,
          }}
          onClick={onClick}
        />
@ -80,16 +102,18 @@ function ContactList(
      <RadioGroup value={props.value} class={bem('group')}>
        {List}
      </RadioGroup>
-      <Button
-        square
-        size="large"
-        type="danger"
-        class={bem('add')}
-        text={props.addText || t('addText')}
-        onClick={() => {
-          emit(ctx, 'add');
-        }}
-      />
+      <div class={bem('bottom')}>
+        <Button
+          round
+          block
+          type="danger"
+          class={bem('add')}
+          text={props.addText || t('addText')}
+          onClick={() => {
+            emit(ctx, 'add');
+          }}
+        />
+      </div>
    </div>
  );
 }
@ -97,7 +121,8 @@ function ContactList(
 ContactList.props = {
  value: null as any,
  list: Array,
-  addText: String
+  addText: String,
+  defaultTagText: String
 };

 export default createComponent(ContactList);
--- a/src/coupon/index.less
+++ b/src/coupon/index.less
@ -33,7 +33,7 @@
  }

  p {
-    color: @gray-dark;
+    color: @gray-6;
    font-size: @font-size-sm;
    line-height: 16px;
  }
--- a/src/field/README.md
+++ b/src/field/README.md
@ -152,6 +152,7 @@ Textarea Field can be auto resize when has `autosize` prop
 | clearable | Whether to be clearable | *boolean* | `false` | - |
 | clickable | Whether to show click feedback when clicked | *boolean* | `false` | - |
 | is-link | Whether to show link icon | *boolean* | `false` | - |
+| autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` | - |
 | show-word-limit | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` | 2.2.8 |
 | error | Whether to show error info | *boolean* | `false` | - |
 | arrow-direction | Can be set to `left` `up` `down` | *string* | - | 2.0.4 |
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@ -158,6 +158,7 @@ Vue.use(Field);
 | clearable | 是否启用清除控件 | *boolean* | `false` | - |
 | clickable | 是否开启点击反馈 | *boolean* | `false` | - |
 | is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | - |
+| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` | - |
 | show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` | 2.2.8 |
 | error | 是否将输入内容标红 | *boolean* | `false` | - |
 | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | *string* | - | 2.0.4 |
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@ -123,7 +123,7 @@ export default {
    span {
      display: block;
      padding: 0 5px;
-      color: @gray-darker;
+      color: @gray-7;
      font-size: 12px;
      line-height: 18px;
    }
--- a/src/image/demo/index.vue
+++ b/src/image/demo/index.vue
@ -149,7 +149,7 @@ export default {

  .text {
    margin-top: 5px;
-    color: @gray-darker;
+    color: @gray-7;
    font-size: 14px;
    text-align: center;
  }
--- a/src/list/demo/index.vue
+++ b/src/list/demo/index.vue
@ -130,7 +130,7 @@ export default {
  .page-desc {
    margin: 0;
    padding: 5px 0;
-    color: @gray-darker;
+    color: @gray-7;
    font-size: 14px;
    text-align: center;

@ -144,7 +144,7 @@ export default {
  }

  .van-checkbox__label {
-    color: @gray-darker;
+    color: @gray-7;
  }
 }
 </style>
--- a/src/number-keyboard/index.js
+++ b/src/number-keyboard/index.js
@ -105,7 +105,7 @@ export default createComponent({

  methods: {
    onBlur() {
-      this.$emit('blur');
+      this.show && this.$emit('blur');
    },

    onClose() {
--- a/src/search/README.md
+++ b/src/search/README.md
@ -70,6 +70,7 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
 | maxlength | Max length of value | *string \| number* | - | - |
 | placeholder | Placeholder | *string* | - | - |
 | clearable | Whether to be clearable | *boolean* | `true` | - |
+| autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` | - |
 | show-action | Whether to show right action button | *boolean* | `false` | - |
 | action-text | Text of action button | *boolean* | `Cancel` | 2.2.2 |
 | disabled | Whether to disable field | *boolean* | `false` | - |
--- a/src/search/README.zh-CN.md
+++ b/src/search/README.zh-CN.md
@ -65,6 +65,7 @@ Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘
 | maxlength | 输入的最大字符数 | *string \| number* | - | - |
 | placeholder | 占位提示文字 | *string* | - | - |
 | clearable | 是否启用清除控件 | *boolean* | `true` | - |
+| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` | - |
 | show-action | 是否在搜索框右侧显示取消按钮 | *boolean* | `false` | - |
 | action-text | 取消按钮文字 | *boolean* | `取消` | 2.2.2 |
 | disabled | 是否禁用输入框 | *boolean* | `false` | - |
--- a/src/sidebar/demo/index.vue
+++ b/src/sidebar/demo/index.vue
@ -67,7 +67,7 @@ export default {

  &-title {
    margin-bottom: 16px;
-    color: @gray-dark;
+    color: @gray-6;
    font-weight: normal;
    font-size: 14px;
  }
--- a/src/sku/index.less
+++ b/src/sku/index.less
@ -62,7 +62,7 @@

  &-header-item {
    margin-top: @padding-xs;
-    color: @gray-dark;
+    color: @gray-6;
    font-size: @font-size-sm;
    line-height: 16px;
  }
@ -178,7 +178,7 @@
      }

      &--disabled {
-        color: @gray;
+        color: @gray-5;
        background: @active-color;

        .van-sku-row__item-img {
@ -213,7 +213,7 @@
  &__stock {
    display: inline-block;
    margin-right: @padding-xs;
-    color: @gray-dark;
+    color: @gray-6;
    font-size: @font-size-sm;

    &-num--highlight {
@ -334,11 +334,11 @@
      }

      &--warning {
-        background: linear-gradient(to right, #ffd01e, #ff8917);
+        background: @gradient-orange;
      }

      &--danger {
-        background: linear-gradient(to right, #ff6034, #ee0a24);
+        background: @gradient-red;
      }
    }
  }
--- a/src/style/var.less
+++ b/src/style/var.less
@ -1,27 +1,31 @@
-// Basic Colors
+// Color Palette
@black: #000;
@white: #fff;
+@gray-1: #f7f8fa;
+@gray-2: #f2f3f5;
+@gray-3: #ebedf0;
+@gray-4: #dcdee0;
+@gray-5: #c8c9cc;
+@gray-6: #969799;
+@gray-7: #646566;
+@gray-8: #323233;
@red: #ee0a24;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;
-@gray: #c8c9cc;
-@gray-light: #e5e5e5;
-@gray-darker: #7d7e80;
-@gray-dark: #969799;

 // Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

 // Component Colors
-@text-color: #323233;
-@active-color: #f2f3f5;
+@text-color: @gray-8;
+@active-color: @gray-2;
@active-opacity: .7;
@disabled-opacity: .5;
-@background-color: #f8f8f8;
+@background-color: @gray-1;
@background-color-light: #fafafa;

 // Padding
@ -44,7 +48,7 @@
@animation-duration-fast: .2s;

 // Border
-@border-color: #ebedf0;
+@border-color: @gray-3;
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@ -54,40 +58,43 @@
@action-sheet-max-height: 90%;
@action-sheet-header-height: 44px;
@action-sheet-header-font-size: @font-size-lg;
-@action-sheet-description-color: @gray-darker;
+@action-sheet-description-color: @gray-7;
@action-sheet-description-font-size: @font-size-md;
@action-sheet-description-line-height: 20px;
@action-sheet-item-height: 50px;
@action-sheet-item-background: @white;
@action-sheet-item-font-size: @font-size-lg;
@action-sheet-item-text-color: @text-color;
-@action-sheet-item-disabled-text-color: @gray;
-@action-sheet-subname-color: @gray-darker;
+@action-sheet-item-disabled-text-color: @gray-5;
+@action-sheet-subname-color: @gray-7;
@action-sheet-subname-font-size: @font-size-sm;
@action-sheet-close-icon-size: 18px;
-@action-sheet-close-icon-color: @gray-dark;
+@action-sheet-close-icon-color: @gray-6;
@action-sheet-close-icon-padding: 0 @padding-sm;
@action-sheet-cancel-padding-top: @padding-xs;
@action-sheet-cancel-padding-color: @background-color;

 // AddressEdit
-@address-edit-buttons-padding: @padding-xl @padding-md;
+@address-edit-padding: @padding-sm;
+@address-edit-buttons-padding: @padding-xl @padding-base;
@address-edit-button-margin-bottom: @padding-sm;
@address-edit-detail-finish-color: @blue;
@address-edit-detail-finish-font-size: @font-size-sm;

 // AddressList
-@address-list-disabled-text-color: @gray-dark;
-@address-list-disabled-text-font-size: @font-size-sm;
-@address-list-disabled-text-line-height: 30px;
+@address-list-padding: 12px 7px 100px 17px;
+@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;
+@address-list-disabled-text-line-height: 20px;
@address-list-add-button-z-index: 999;
-@address-list-item-padding: @padding-md;
-@address-list-item-text-color: @gray-darker;
-@address-list-item-disabled-text-color: @gray-dark;
-@address-list-item-font-size: @font-size-sm;
-@address-list-item-line-height: 16px;
+@address-list-item-padding: @padding-sm;
+@address-list-item-text-color: @text-color;
+@address-list-item-disabled-text-color: @gray-5;
+@address-list-item-font-size: 13px;
+@address-list-item-line-height: 18px;
@address-list-item-radio-icon-color: @red;
-@address-list-edit-icon-size: 16px;
+@address-list-edit-icon-size: 18px;

 // Button
@button-mini-height: 22px;
@ -132,10 +139,10 @@
@card-background-color: @background-color-light;
@card-thumb-size: 90px;
@card-title-line-height: 16px;
-@card-desc-color: @gray-darker;
+@card-desc-color: @gray-7;
@card-desc-line-height: 20px;
@card-price-color: @red;
-@card-origin-price-color: @gray-darker;
+@card-origin-price-color: @gray-7;
@card-origin-price-font-size: @font-size-xs;

 // Cell
@ -148,33 +155,33 @@
@cell-border-color: @border-color;
@cell-active-color: @active-color;
@cell-required-color: @red;
-@cell-label-color: @gray-dark;
+@cell-label-color: @gray-6;
@cell-label-font-size: @font-size-sm;
@cell-label-line-height: 18px;
@cell-label-margin-top: 3px;
-@cell-value-color: @gray-dark;
+@cell-value-color: @gray-6;
@cell-icon-size: 16px;
-@cell-right-icon-color: @gray-dark;
+@cell-right-icon-color: @gray-6;
@cell-large-vertical-padding: @padding-sm;
@cell-large-title-font-size: @font-size-lg;
@cell-large-label-font-size: @font-size-md;

 // CellGroup
@cell-group-background-color: @white;
-@cell-group-title-color: @gray-dark;
+@cell-group-title-color: @gray-6;
@cell-group-title-padding: @padding-md @padding-md @padding-xs;
@cell-group-title-font-size: @font-size-md;
@cell-group-title-line-height: 16px;

 // Checkbox
@checkbox-size: 20px;
-@checkbox-border-color: @gray-light;
+@checkbox-border-color: @gray-5;
@checkbox-transition-duration: @animation-duration-fast;
@checkbox-label-margin: @padding-xs;
@checkbox-label-color: @text-color;
@checkbox-checked-icon-color: @blue;
-@checkbox-disabled-icon-color: @gray;
-@checkbox-disabled-label-color: @gray;
+@checkbox-disabled-icon-color: @gray-5;
+@checkbox-disabled-label-color: @gray-5;
@checkbox-disabled-background-color: @border-color;

 // Circle
@ -188,9 +195,9 @@
@collapse-item-content-padding: @padding-md;
@collapse-item-content-font-size: 13px;
@collapse-item-content-line-height: 1.5;
-@collapse-item-content-text-color: @gray-dark;
+@collapse-item-content-text-color: @gray-6;
@collapse-item-content-background-color: @white;
-@collapse-item-title-disabled-color: @gray;
+@collapse-item-title-disabled-color: @gray-5;

 // ContactCard
@contact-card-padding: @padding-md;
@ -199,8 +206,11 @@
@contact-card-value-line-height: 20px;

 // ContactEdit
-@contact-edit-buttons-padding: @padding-xl @padding-md;
+@contact-edit-padding: @padding-md;
+@contact-edit-fields-radius: @border-radius-md;
+@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: 65px;

 // ContactList
@ -226,7 +236,7 @@
@coupon-amount-font-size: 24px;
@coupon-currency-font-size: 50%;
@coupon-name-font-size: @font-size-lg;
-@coupon-disabled-text-color: @gray-dark;
+@coupon-disabled-text-color: @gray-6;
@coupon-description-padding: @padding-xs @padding-md;
@coupon-description-background-color: @background-color-light;
@coupon-description-border-color: @border-color;
@ -239,7 +249,7 @@
@coupon-list-field-padding: @padding-xs @padding-md;
@coupon-list-exchange-button-height: 32px;
@coupon-list-empty-image-size: 200px;
-@coupon-list-empty-tip-color: @gray-dark;
+@coupon-list-empty-tip-color: @gray-6;
@coupon-list-empty-tip-font-size: @font-size-md;
@coupon-list-empty-tip-line-height: 20px;

@ -258,13 +268,13 @@
@dialog-message-font-size: @font-size-md;
@dialog-message-line-height: 20px;
@dialog-message-max-height: 60vh;
-@dialog-has-title-message-text-color: @gray-darker;
+@dialog-has-title-message-text-color: @gray-7;
@dialog-has-title-message-padding-top: @padding-sm;
@dialog-confirm-button-text-color: @blue;

 // Divider
@divider-margin: @padding-md 0;
-@divider-text-color: @gray-dark;
+@divider-text-color: @gray-6;
@divider-font-size: @font-size-md;
@divider-line-height: 24px;
@divider-border-color: @border-color;
@ -278,7 +288,7 @@
@dropdown-menu-title-font-size: 15px;
@dropdown-menu-title-text-color: @text-color;
@dropdown-menu-title-active-text-color: @blue;
-@dropdown-menu-title-disabled-text-color: @gray-dark;
+@dropdown-menu-title-disabled-text-color: @gray-6;
@dropdown-menu-title-padding: 0 @padding-xs;
@dropdown-menu-title-line-height: 18px;
@dropdown-menu-option-active-color: @blue;
@ -288,16 +298,16 @@
@field-label-width: 90px;
@field-input-text-color: @text-color;
@field-input-error-text-color: @red;
-@field-input-disabled-text-color: @gray-dark;
-@field-placeholder-text-color: @gray-dark;
+@field-input-disabled-text-color: @gray-6;
+@field-placeholder-text-color: @gray-6;
@field-icon-size: 16px;
@field-clear-icon-size: 16px;
-@field-clear-icon-color: @gray;
-@field-right-icon-color: @gray-dark;
+@field-clear-icon-color: @gray-5;
+@field-right-icon-color: @gray-6;
@field-error-message-color: @red;
@field-error-message-text-color: 12px;
@field-text-area-min-height: 60px;
-@field-word-limit-color: @gray-darker;
+@field-word-limit-color: @gray-7;
@field-word-limit-font-size: @font-size-sm;
@field-word-limit-line-height: 16px;

@ -306,7 +316,7 @@
@grid-item-content-background-color: @white;
@grid-item-content-active-color: @active-color;
@grid-item-icon-size: 28px;
-@grid-item-text-color: @gray-darker;
+@grid-item-text-color: @gray-7;
@grid-item-text-font-size: @font-size-sm;

 // GoodsAction
@ -317,7 +327,7 @@
@goods-action-icon-size: 18px;
@goods-action-icon-font-size: @font-size-xs;
@goods-action-icon-active-color: @active-color;
-@goods-action-icon-text-color: @gray-darker;
+@goods-action-icon-text-color: @gray-7;
@goods-action-button-height: 40px;
@goods-action-button-warning-color: @gradient-orange;
@goods-action-button-danger-color: @gradient-red;
@ -348,7 +358,7 @@
@info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;

 // Image
-@image-placeholder-text-color: @gray-dark;
+@image-placeholder-text-color: @gray-6;
@image-placeholder-font-size: @font-size-md;
@image-placeholder-background-color: @background-color;

@ -359,14 +369,14 @@

 // List
@list-icon-margin-right: 5px;
-@list-text-color: @gray-dark;
+@list-text-color: @gray-6;
@list-text-font-size: @font-size-md;
@list-text-line-height: 50px;

 // Loading
-@loading-text-color: @gray-dark;
+@loading-text-color: @gray-6;
@loading-text-font-size: @font-size-md;
-@loading-spinner-color: @gray;
+@loading-spinner-color: @gray-5;
@loading-spinner-size: 30px;
@loading-spinner-animation-duration: .8s;

@ -402,11 +412,11 @@
 // NumberKeyboard
@number-keyboard-background-color: @white;
@number-keyboard-key-height: 54px;
-@number-keyboard-key-background: #ebedf0;
+@number-keyboard-key-background: @gray-3;
@number-keyboard-key-font-size: 24px;
@number-keyboard-key-active-color: @active-color;
@number-keyboard-delete-font-size: @font-size-lg;
-@number-keyboard-title-color: @gray-darker;
+@number-keyboard-title-color: @gray-7;
@number-keyboard-title-height: 30px;
@number-keyboard-title-font-size: @font-size-md;
@number-keyboard-close-padding: 0 @padding-md;
@ -427,10 +437,10 @@
@pagination-font-size: @font-size-md;
@pagination-item-width: 36px;
@pagination-item-default-color: @blue;
-@pagination-item-disabled-color: @gray-darker;
+@pagination-item-disabled-color: @gray-7;
@pagination-item-disabled-background-color: @background-color;
@pagination-background-color: @white;
-@pagination-desc-color: @gray-darker;
+@pagination-desc-color: @gray-7;
@pagination-disabled-opacity: @disabled-opacity;

 // Panel
@ -444,7 +454,7 @@
@password-input-font-size: 20px;
@password-input-border-radius: 6px;
@password-input-background-color: @white;
-@password-input-info-color: @gray-dark;
+@password-input-info-color: @gray-6;
@password-input-info-font-size: @font-size-md;
@password-input-error-info-color: @red;
@password-input-dot-size: 10px;
@ -469,14 +479,14 @@
@popup-transition: transform @animation-duration-base ease-out;
@popup-round-border-radius: 20px;
@popup-close-icon-size: 18px;
-@popup-close-icon-color: @gray-dark;
+@popup-close-icon-color: @gray-6;
@popup-close-icon-margin: 16px;
@popup-close-icon-z-index: 1;

 // Progress
@progress-height: 4px;
@progress-color: @blue;
-@progress-background-color: @gray-light;
+@progress-background-color: @gray-3;
@progress-pivot-padding: 0 5px;
@progress-pivot-text-color: @white;
@progress-pivot-font-size: @font-size-xs;
@ -486,17 +496,17 @@
 // PullRefresh
@pull-refresh-head-height: 50px;
@pull-refresh-head-font-size: @font-size-md;
-@pull-refresh-head-text-color: @gray-dark;
+@pull-refresh-head-text-color: @gray-6;

 // Radio
@radio-size: 20px;
-@radio-border-color: @gray-light;
+@radio-border-color: @gray-5;
@radio-transition-duration: @animation-duration-fast;
@radio-label-margin: @padding-xs;
@radio-label-color: @text-color;
@radio-checked-icon-color: @blue;
-@radio-disabled-icon-color: @gray;
-@radio-disabled-label-color: @gray;
+@radio-disabled-icon-color: @gray-5;
+@radio-disabled-label-color: @gray-5;
@radio-disabled-background-color: @border-color;

 // Rate
@ -510,7 +520,7 @@
@search-label-padding: 0 5px;
@search-label-color: @text-color;
@search-label-font-size: @font-size-md;
-@search-left-icon-color: @gray-dark;
+@search-left-icon-color: @gray-6;
@search-action-padding: 0 @padding-xs;
@search-action-text-color: @text-color;
@search-action-font-size: @font-size-md;
@ -522,7 +532,7 @@
@sidebar-font-size: @font-size-md;
@sidebar-line-height: 20px;
@sidebar-text-color: @text-color;
-@sidebar-disabled-text-color: @gray;
+@sidebar-disabled-text-color: @gray-5;
@sidebar-padding: 20px @padding-sm 20px @padding-xs;
@sidebar-active-color: @active-color;
@sidebar-background-color: @background-color-light;
@ -540,7 +550,7 @@

 // Slider
@slider-active-background-color: @blue;
-@slider-inactive-background-color: @gray-light;
+@slider-inactive-background-color: @gray-3;
@slider-disabled-opacity: @disabled-opacity;
@slider-button-width: 24px;
@slider-button-height: 24px;
@ -549,7 +559,7 @@
@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);

 // Step
-@step-text-color: @gray-dark;
+@step-text-color: @gray-6;
@step-process-text-color: @text-color;
@step-font-size: @font-size-md;
@step-line-color: @border-color;
@ -557,7 +567,7 @@
@step-finish-text-color: @text-color;
@step-icon-size: 12px;
@step-circle-size: 5px;
-@step-circle-color: @gray-dark;
+@step-circle-color: @gray-6;
@step-horizontal-title-font-size: @font-size-sm;

 // Steps
@ -570,13 +580,13 @@
@stepper-active-color: #e8e8e8;
@stepper-background-color: @active-color;
@stepper-button-icon-color: @text-color;
-@stepper-button-disabled-color: #f7f8fa;
-@stepper-button-disabled-icon-color: @gray;
+@stepper-button-disabled-color: @background-color;
+@stepper-button-disabled-icon-color: @gray-5;
@stepper-input-width: 32px;
@stepper-input-height: 28px;
@stepper-input-font-size: @font-size-md;
@stepper-input-text-color: @text-color;
-@stepper-input-disabled-text-color: @gray;
+@stepper-input-disabled-text-color: @gray-5;
@stepper-input-disabled-background-color: @active-color;
@stepper-border-radius: @border-radius-md;

@ -631,16 +641,16 @@

 // TabbarItem
@tabbar-item-font-size: @font-size-sm;
-@tabbar-item-text-color: @gray-darker;
+@tabbar-item-text-color: @gray-7;
@tabbar-item-active-color: @blue;
@tabbar-item-line-height: 1;
@tabbar-item-icon-size: 18px;
@tabbar-item-margin-bottom: 5px;

 // Tab
-@tab-text-color: @gray-darker;
+@tab-text-color: @gray-7;
@tab-active-text-color: @text-color;
-@tab-disabled-text-color: @gray;
+@tab-disabled-text-color: @gray-5;
@tab-font-size: @font-size-md;

 // Tabs
@ -663,7 +673,7 @@
@tag-primary-color: @blue;
@tag-success-color: @green;
@tag-warning-color: @orange;
-@tag-default-color: @gray-dark;
+@tag-default-color: @gray-6;
@tag-plain-background-color: @white;

 // Toast
@ -690,29 +700,29 @@
@tree-select-nav-item-padding: @padding-sm @padding-xs @padding-sm @padding-sm;
@tree-select-item-height: 44px;
@tree-select-item-active-color: @red;
-@tree-select-item-disabled-color: @gray;
+@tree-select-item-disabled-color: @gray-5;

 // Uploader
@uploader-size: 80px;
@uploader-icon-size: 24px;
-@uploader-icon-color: @gray-dark;
-@uploader-text-color: @gray-dark;
+@uploader-icon-color: @gray-6;
+@uploader-text-color: @gray-6;
@uploader-text-font-size: @font-size-sm;
-@uploader-upload-border-color: @gray-light;
+@uploader-upload-border-color: @gray-3;
@uploader-upload-border-radius: 4px;
@uploader-upload-background-color: @white;
-@uploader-delete-color: @gray-dark;
+@uploader-delete-color: @gray-6;
@uploader-delete-icon-size: 18px;
@uploader-delete-background-color: @white;
@uploader-file-background-color: @background-color;
@uploader-file-icon-size: 20px;
-@uploader-file-icon-color: @gray-darker;
+@uploader-file-icon-color: @gray-7;
@uploader-file-name-padding: 0 @padding-base;
@uploader-file-name-margin-top: @padding-xs;
@uploader-file-name-font-size: @font-size-sm;
-@uploader-file-name-text-color: @gray-darker;
+@uploader-file-name-text-color: @gray-7;

 // Sku
-@sku-item-background-color: #f7f8fa;
+@sku-item-background-color: @background-color;
@sku-icon-gray-color: #dcdde0;
@sku-upload-mask-color: rgba(50, 50, 51, .8);
--- a/src/swipe/README.md
+++ b/src/swipe/README.md
@ -144,34 +144,34 @@ export default {

 ### Swipe Events

-| Event | Description | Arguments |
-|------|------|------|
-| change | Triggered when current swipe change | index: index of current swipe |
+| Event | Description | Arguments | Version |
+|------|------|------|------|
+| change | Triggered when current swipe change | index: index of current swipe | - |

 ### SwipeItem Events

-| Event | Description | Arguments |
-|------|------|------|
-| click | Triggered when clicked | event: Event |
+| Event | Description | Arguments | Version |
+|------|------|------|------|
+| click | Triggered when clicked | event: Event | - |

 ### Swipe Methods

 Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods

-| Name | Description | Attribute | Return value |
-|------|------|------|------|
-| swipeTo | Swipe to target index | index: target index, options: Options | void |
-| resize | Resize Swipe when container element resized | - | void |
+| Name | Description | Attribute | Return value | Version |
+|------|------|------|------|------|
+| swipeTo | Swipe to target index | index: target index, options: Options | void | - |
+| resize | Resize Swipe when container element resized | - | void | 2.2.14 |

 ### swipeTo Options

 | Name | Description | Type |
-|------|------|------|
+|------|------|------|------|
 | immediate | Whether to skip animation | *boolean* |

 ### Swipe Slots

-| Name | Description |
-|------|------|
-| default | Content |
-| indicator | Custom indicator |
+| Name | Description | Version |
+|------|------|------|
+| default | Content | - |
+| indicator | Custom indicator | - |
--- a/src/swipe/README.zh-CN.md
+++ b/src/swipe/README.zh-CN.md
@ -150,24 +150,24 @@ export default {

 ### Swipe Events

-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| change | 每一页轮播结束后触发 | index, 当前页的索引 |
+| 事件名 | 说明 | 回调参数 | 版本 |
+|------|------|------|------|
+| change | 每一页轮播结束后触发 | index, 当前页的索引 | - |

 ### SwipeItem Events

-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| click | 点击时触发 | event: Event |
+| 事件名 | 说明 | 回调参数 | 版本 |
+|------|------|------|------|
+| click | 点击时触发 | event: Event | - |

 ### Swipe 方法

 通过 [ref](https://cn.vuejs.org/v2/api/#ref) 可以获取到 Swipe 实例并调用实例方法

-| 方法名 | 说明 | 参数 | 返回值 |
-|------|------|------|------|
-| swipeTo | 滚动到目标位置 | index: number, options: Options | void |
-| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | - | void |
+| 方法名 | 说明 | 参数 | 返回值 | 版本 |
+|------|------|------|------|------|
+| swipeTo | 滚动到目标位置 | index: number, options: Options | void | - |
+| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | - | void | 2.2.14 |

 ### swipeTo Options 格式

@ -177,7 +177,7 @@ export default {

 ### Swipe Slots

-| 名称 | 说明 |
-|------|------|
-| default | 轮播内容 |
-| indicator | 自定义指示器 |
+| 名称 | 说明 | 版本 |
+|------|------|------|
+| default | 轮播内容 | - |
+| indicator | 自定义指示器 | - |
--- a/src/switch/index.tsx
+++ b/src/switch/index.tsx
@ -1,5 +1,5 @@
 import { createNamespace, addUnit } from '../utils';
-import { BLUE, GRAY_DARK } from '../utils/constant';
+import { BLUE } from '../utils/constant';
 import { switchProps, SharedSwitchProps } from './shared';
 import { emit, inherit } from '../utils/functional';
 import Loading from '../loading';
@ -38,7 +38,7 @@ function Switch(
    backgroundColor: checked ? activeColor : inactiveColor
  };

-  const loadingColor = checked ? activeColor || BLUE : inactiveColor || GRAY_DARK;
+  const loadingColor = checked ? activeColor || BLUE : inactiveColor || '';

  function onClick(event: PointerEvent) {
    emit(ctx, 'click', event);
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@ -3,8 +3,6 @@ export const RED = '#ee0a24';
 export const BLUE = '#1989fa';
 export const GREEN = '#07c160';
 export const WHITE = '#fff';
-export const GRAY = '#c9c9c9';
-export const GRAY_DARK = '#969799';

 // border
 export const BORDER = 'van-hairline';
--- a/types/toast.d.ts
+++ b/types/toast.d.ts
@ -2,20 +2,23 @@ import Vue from 'vue';
 import { VanPopupMixin } from './mixins/popup';

 type ToastMessage = string | number;
+type ToastType = 'text' | 'loading' | 'success' | 'fail' | 'html';
+type ToastPosition = 'top' | 'middle' | 'bottom';
+type ToastLoadingType = 'circular' | 'spinner';

 export type ToastOptions = {
  icon?: string;
-  type?: string;
+  type?: ToastType;
  mask?: boolean;
  message?: ToastMessage;
  onClose?: () => void;
  onOpened?: () => void;
  overlay?: boolean;
  duration?: number;
-  position?: string;
+  position?: ToastPosition;
  className?: any;
  transition?: string;
-  loadingType?: string;
+  loadingType?: ToastLoadingType;
  forbidClick?: boolean;
  closeOnClick?: boolean;
  closeOnClickOverlay?: boolean;
@ -23,9 +26,9 @@ export type ToastOptions = {
 };

 export interface VanToast extends Vue, VanPopupMixin {
-  type: string;
-  position: string;
-  loadingType: string;
+  type: ToastType;
+  position: ToastPosition;
+  loadingType: ToastLoadingType;
  forbidClick: boolean;
  message: ToastMessage;
  clear(): void;
@ -38,8 +41,8 @@ export interface Toast {
  fail(options?: ToastOptions | ToastMessage): VanToast;
  clear(all?: boolean): void;
  install(): void;
-  setDefaultOptions(options: ToastOptions): void;
-  resetDefaultOptions(): void;
+  setDefaultOptions(options: string | ToastOptions): void;
+  resetDefaultOptions(options?: string): void;
  allowMultiple(allow: boolean): void;
 }