From 782215c94c36fae613d440890b4f971293fd35f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Wed, 8 May 2019 15:52:32 +0800
Subject: [PATCH] [build] optimize demo test

---
 .../test/__snapshots__/demo.spec.js.snap      |  33 +-
 .../area/test/__snapshots__/demo.spec.js.snap | 197 ++++++++-
 .../test/__snapshots__/demo.spec.js.snap      |   4 +-
 .../card/test/__snapshots__/demo.spec.js.snap |   6 +-
 .../cell/test/__snapshots__/demo.spec.js.snap |   2 +-
 .../test/__snapshots__/demo.spec.js.snap      |   2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  12 +-
 .../col/test/__snapshots__/demo.spec.js.snap  |   8 +-
 .../test/__snapshots__/demo.spec.js.snap      |   8 +-
 .../test/__snapshots__/demo.spec.js.snap      | 380 +++++++++++++++++-
 .../test/__snapshots__/demo.spec.js.snap      |   2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  12 +-
 .../test/__snapshots__/demo.spec.js.snap      |  16 +-
 .../test/__snapshots__/demo.spec.js.snap      | 324 ++++++++++++++-
 packages/index-bar/test/index.spec.js         |   2 +-
 .../list/test/__snapshots__/demo.spec.js.snap |  15 +-
 .../test/__snapshots__/demo.spec.js.snap      |  12 +-
 .../test/__snapshots__/demo.spec.js.snap      |   4 +-
 .../test/__snapshots__/demo.spec.js.snap      |  10 +-
 .../test/__snapshots__/demo.spec.js.snap      |   4 +-
 .../test/__snapshots__/demo.spec.js.snap      |   2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  14 +-
 .../test/__snapshots__/demo.spec.js.snap      | 122 +++---
 .../test/__snapshots__/demo.spec.js.snap      |  10 +-
 .../test/__snapshots__/demo.spec.js.snap      |   2 +-
 .../test/__snapshots__/demo.spec.js.snap      |   2 +-
 .../rate/test/__snapshots__/demo.spec.js.snap |  82 ++--
 .../test/__snapshots__/demo.spec.js.snap      |  12 +-
 .../test/__snapshots__/demo.spec.js.snap      |  30 +-
 .../test/__snapshots__/demo.spec.js.snap      |  16 +-
 .../test/__snapshots__/demo.spec.js.snap      |   8 +-
 .../test/__snapshots__/demo.spec.js.snap      |  12 +-
 .../test/__snapshots__/demo.spec.js.snap      |   2 +-
 .../test/__snapshots__/demo.spec.js.snap      |   6 +-
 .../test/__snapshots__/demo.spec.js.snap      |  65 +--
 .../test/__snapshots__/demo.spec.js.snap      |   8 +-
 .../test/__snapshots__/demo.spec.js.snap      |  14 +-
 .../tab/test/__snapshots__/demo.spec.js.snap  | 209 ++++++----
 .../test/__snapshots__/demo.spec.js.snap      |  24 +-
 .../tag/test/__snapshots__/demo.spec.js.snap  |  30 +-
 .../test/__snapshots__/demo.spec.js.snap      |   4 +-
 test/demo-test.ts                             |  14 +-
 42 files changed, 1313 insertions(+), 428 deletions(-)

diff --git a/packages/address-edit/test/__snapshots__/demo.spec.js.snap b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
index b6f53a65a..eb8c5aee7 100644
--- a/packages/address-edit/test/__snapshots__/demo.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
@@ -7,19 +7,19 @@ exports[`renders demo correctly 1`] = `
       <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="收货人姓名" value="" class="van-field__control"></div>
+          <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="收货人手机号" value="" class="van-field__control"></div>
+          <div class="van-field__body"><input type="tel" 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="text" placeholder="选择省 / 市 / 区" readonly="readonly" value="" class="van-field__control"></div>
+          <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">
@@ -27,7 +27,7 @@ exports[`renders demo correctly 1`] = `
           <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" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+              <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
             </div>
           </div>
         </div>
@@ -35,39 +35,18 @@ exports[`renders demo correctly 1`] = `
       <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" maxlength="6" placeholder="邮政编码" value="" class="van-field__control"></div>
+          <div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" class="van-field__control"></div>
         </div>
       </div>
       <div class="van-cell van-cell--center van-switch-cell">
         <div class="van-cell__title"><span>设为默认收货地址</span></div>
         <div class="van-cell__value">
-          <div class="van-switch" style="font-size:24px;">
+          <div class="van-switch" style="font-size: 24px;">
             <div class="van-switch__node"></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><button class="van-button van-button--default van-button--normal van-button--block"><span class="van-button__text">删除</span></button></div>
-      <div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
-        <div class="van-picker van-area">
-          <div class="van-hairline--top-bottom van-picker__toolbar">
-            <div class="van-picker__cancel">取消</div>
-            <div class="van-picker__confirm">确认</div>
-          </div>
-          <!---->
-          <div class="van-picker__columns" style="height:220px;">
-            <div class="van-picker-column" style="height:220px;">
-              <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
-            </div>
-            <div class="van-picker-column" style="height:220px;">
-              <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
-            </div>
-            <div class="van-picker-column" style="height:220px;">
-              <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
-            </div>
-            <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </div>
diff --git a/packages/area/test/__snapshots__/demo.spec.js.snap b/packages/area/test/__snapshots__/demo.spec.js.snap
index 8d0a741b5..840df29d2 100644
--- a/packages/area/test/__snapshots__/demo.spec.js.snap
+++ b/packages/area/test/__snapshots__/demo.spec.js.snap
@@ -9,17 +9,72 @@ exports[`renders demo correctly 1`] = `
         <div class="van-picker__confirm">确认</div>
       </div>
       <!---->
-      <div class="van-picker__columns" style="height:220px;">
-        <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
+          </ul>
         </div>
-        <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+          </ul>
         </div>
-        <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">朝阳区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">丰台区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">石景山区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">海淀区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">门头沟区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">房山区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">通州区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">顺义区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">昌平区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">大兴区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">怀柔区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">平谷区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">密云区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">延庆区</li>
+          </ul>
         </div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
     </div>
   </div>
@@ -30,17 +85,77 @@ exports[`renders demo correctly 1`] = `
         <div class="van-picker__confirm">确认</div>
       </div>
       <!---->
-      <div class="van-picker__columns" style="height:220px;">
-        <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, -352px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
+          </ul>
         </div>
-        <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 0px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波市</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">绍兴市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">金华市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">衢州市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">舟山市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">台州市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">丽水市</li>
+          </ul>
         </div>
-        <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">鹿城区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">龙湾区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">瓯海区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">洞头区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">永嘉县</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">平阳县</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">苍南县</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">文成县</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">泰顺县</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">瑞安市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">乐清市</li>
+          </ul>
         </div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
     </div>
   </div>
@@ -52,14 +167,52 @@ exports[`renders demo correctly 1`] = `
         <div class="van-picker__confirm">确认</div>
       </div>
       <!---->
-      <div class="van-picker__columns" style="height:220px;">
-        <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
+          </ul>
         </div>
-        <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
+          </ul>
         </div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
     </div>
   </div>
diff --git a/packages/button/test/__snapshots__/demo.spec.js.snap b/packages/button/test/__snapshots__/demo.spec.js.snap
index 7108913d7..164553633 100644
--- a/packages/button/test/__snapshots__/demo.spec.js.snap
+++ b/packages/button/test/__snapshots__/demo.spec.js.snap
@@ -9,9 +9,9 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--primary van-button--normal van-button--hairline van-button--plain van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--hairline van-button--plain van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div>
   <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
   <div><button class="van-button van-button--primary van-button--normal van-button--loading">
-      <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:;width:20px;height:20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+      <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
     </button> <button class="van-button van-button--danger van-button--normal van-button--loading">
-      <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color:;width:20px;height:20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div><span class="van-button__loading-text">加载中...</span>
+      <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div><span class="van-button__loading-text">加载中...</span>
     </button></div>
   <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
   <div><button class="van-button van-button--default van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--default van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--default van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
diff --git a/packages/card/test/__snapshots__/demo.spec.js.snap b/packages/card/test/__snapshots__/demo.spec.js.snap
index d3628923f..660a2609f 100644
--- a/packages/card/test/__snapshots__/demo.spec.js.snap
+++ b/packages/card/test/__snapshots__/demo.spec.js.snap
@@ -19,14 +19,14 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-card">
       <div class="van-card__header"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img">
-          <div class="van-card__tag"><span class="van-tag van-tag--mark" style="background-color:#f44;">标签</span></div>
+          <div class="van-card__tag"><span class="van-tag van-tag--mark" style="background-color: rgb(255, 68, 68);">标签</span></div>
         </a>
         <div class="van-card__content">
           <div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
           <div class="van-card__desc van-ellipsis">描述信息</div>
-          <div class="card__tags"><span class="van-tag van-tag--plain van-hairline--surround" style="color:#f44;">
+          <div class="card__tags"><span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
           标签1
-        </span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#f44;">
+        </span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
           标签2
         </span></div>
           <div class="van-card__bottom">
diff --git a/packages/cell/test/__snapshots__/demo.spec.js.snap b/packages/cell/test/__snapshots__/demo.spec.js.snap
index 9d86050ab..094dffc5c 100644
--- a/packages/cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/cell/test/__snapshots__/demo.spec.js.snap
@@ -89,7 +89,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-cell van-cell--clickable"><i class="van-icon van-icon-shop-o van-cell__left-icon">
         <!----></i>
-      <div class="van-cell__title"><span class="custom-text">单元格</span> <span class="van-tag" style="background-color:#f44;">标签</span></div>
+      <div class="van-cell__title"><span class="custom-text">单元格</span> <span class="van-tag" style="background-color: rgb(255, 68, 68);">标签</span></div>
       <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
diff --git a/packages/checkbox/test/__snapshots__/demo.spec.js.snap b/packages/checkbox/test/__snapshots__/demo.spec.js.snap
index c82273a24..5d35f5767 100644
--- a/packages/checkbox/test/__snapshots__/demo.spec.js.snap
+++ b/packages/checkbox/test/__snapshots__/demo.spec.js.snap
@@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-checkbox">
-      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color:#07c160;background-color:#07c160;">
+      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
           <!----></i></div><span class="van-checkbox__label">
       自定义颜色
     </span>
diff --git a/packages/circle/test/__snapshots__/demo.spec.js.snap b/packages/circle/test/__snapshots__/demo.spec.js.snap
index 59cf21ea5..412a16ec4 100644
--- a/packages/circle/test/__snapshots__/demo.spec.js.snap
+++ b/packages/circle/test/__snapshots__/demo.spec.js.snap
@@ -3,15 +3,15 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-circle" style="width:120px;height:120px;"><svg viewBox="0 0 1060 1060">
-        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill:none;stroke:#fff;stroke-width:40px;"></path>
-        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke:#1989fa;stroke-dashoffset:3140px;stroke-width:41px;"></path>
+    <div class="van-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 1060 1060">
+        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
+        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #1989fa; stroke-dashoffset: 3140px; stroke-width: 41px;"></path>
       </svg>
       <div class="van-circle__text">0%</div>
     </div>
-    <div class="van-circle" style="width:120px;height:120px;"><svg viewBox="0 0 1060 1060">
-        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill:#fff;stroke:#ebedf0;stroke-width:60px;"></path>
-        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke:#07c160;stroke-dashoffset:3140px;stroke-width:61px;"></path>
+    <div class="van-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 1060 1060">
+        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill: #fff; stroke: #ebedf0; stroke-width: 60px;"></path>
+        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #07c160; stroke-dashoffset: 3140px; stroke-width: 61px;"></path>
       </svg>
       <div class="van-circle__text">0%</div>
     </div>
diff --git a/packages/col/test/__snapshots__/demo.spec.js.snap b/packages/col/test/__snapshots__/demo.spec.js.snap
index 9aa898eef..12fd3b7fb 100644
--- a/packages/col/test/__snapshots__/demo.spec.js.snap
+++ b/packages/col/test/__snapshots__/demo.spec.js.snap
@@ -21,10 +21,10 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-row" style="margin-left:-10px;margin-right:-10px;">
-      <div class="van-col van-col--8" style="padding-left:10px;padding-right:10px;">span: 8</div>
-      <div class="van-col van-col--8" style="padding-left:10px;padding-right:10px;">span: 8</div>
-      <div class="van-col van-col--8" style="padding-left:10px;padding-right:10px;">span: 8</div>
+    <div class="van-row" style="margin-left: -10px; margin-right: -10px;">
+      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
+      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
+      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
     </div>
   </div>
   <div>
diff --git a/packages/contact-card/test/__snapshots__/demo.spec.js.snap b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
index e81100f26..e204f3f49 100644
--- a/packages/contact-card/test/__snapshots__/demo.spec.js.snap
+++ b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
@@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell__value van-cell__value--alone van-contact-card__value">添加联系人</div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
+    <div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
       <div class="van-contact-list">
         <div class="van-radio-group van-contact-list__group">
           <div class="van-cell van-cell--clickable van-contact-list__item">
@@ -23,18 +23,18 @@ exports[`renders demo correctly 1`] = `
         </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>
-    <div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
+    <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" maxlength="30" placeholder="请填写姓名" value="" class="van-field__control"></div>
+            <div class="van-field__body"><input type="text" maxlength="30" 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="请填写电话" value="" class="van-field__control"></div>
+            <div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></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>
diff --git a/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap b/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
index 3fad684eb..a7fd73288 100644
--- a/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
+++ b/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
@@ -1,3 +1,381 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders demo correctly 1`] = `""`;
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-picker van-datetime-picker">
+      <div class="van-hairline--top-bottom van-picker__toolbar">
+        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__confirm">确认</div>
+      </div>
+      <!---->
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
+          </ul>
+        </div>
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
+          </ul>
+        </div>
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
+          </ul>
+        </div>
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
+          </ul>
+        </div>
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
+          </ul>
+        </div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-picker van-datetime-picker">
+      <div class="van-hairline--top-bottom van-picker__toolbar">
+        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__confirm">确认</div>
+      </div>
+      <!---->
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2021</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2022</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2023</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2024</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2025</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2026</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2027</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2028</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2029</li>
+          </ul>
+        </div>
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
+          </ul>
+        </div>
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
+          </ul>
+        </div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-picker van-datetime-picker">
+      <div class="van-hairline--top-bottom van-picker__toolbar">
+        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__confirm">确认</div>
+      </div>
+      <!---->
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018年</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019年</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020年</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2021年</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2022年</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2023年</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2024年</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2025年</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2026年</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2027年</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2028年</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2029年</li>
+          </ul>
+        </div>
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01月</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02月</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03月</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04月</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05月</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">06月</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07月</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08月</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09月</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10月</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">11月</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">12月</li>
+          </ul>
+        </div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-picker van-datetime-picker">
+      <div class="van-hairline--top-bottom van-picker__toolbar">
+        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__confirm">确认</div>
+      </div>
+      <!---->
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 0px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">12</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+          </ul>
+        </div>
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
+          </ul>
+        </div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/dialog/test/__snapshots__/demo.spec.js.snap b/packages/dialog/test/__snapshots__/demo.spec.js.snap
index 20711ccb3..179486024 100644
--- a/packages/dialog/test/__snapshots__/demo.spec.js.snap
+++ b/packages/dialog/test/__snapshots__/demo.spec.js.snap
@@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">
       组件调用
     </span></button>
-    <div name="van-dialog-bounce" class="van-dialog" style="display:none;">
+    <div class="van-dialog" style="display: none;" name="van-dialog-bounce">
       <div class="van-dialog__header">标题</div>
       <div class="van-dialog__content"><img src="https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg"></div>
       <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">取消</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">确认弹窗</span></button></div>
diff --git a/packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap b/packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap
index e0832281f..70aed59fb 100644
--- a/packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap
+++ b/packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap
@@ -4,20 +4,24 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-dropdown-menu van-hairline--top-bottom">
-      <div class="van-dropdown-item" style="top:0px;z-index:10;display:none;">
+      <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
+      <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">默认排序</span></div>
+      <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
         <!---->
       </div>
-      <div class="van-dropdown-item" style="top:0px;z-index:10;display:none;">
+      <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
         <!---->
       </div>
     </div>
   </div>
   <div>
     <div class="van-dropdown-menu van-hairline--top-bottom">
-      <div class="van-dropdown-item" style="top:0px;z-index:10;display:none;">
+      <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
+      <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">筛选</span></div>
+      <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
         <!---->
       </div>
-      <div class="van-dropdown-item" style="top:0px;z-index:10;display:none;">
+      <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
         <!---->
       </div>
     </div>
diff --git a/packages/field/test/__snapshots__/demo.spec.js.snap b/packages/field/test/__snapshots__/demo.spec.js.snap
index 9a0b36812..cede00a13 100644
--- a/packages/field/test/__snapshots__/demo.spec.js.snap
+++ b/packages/field/test/__snapshots__/demo.spec.js.snap
@@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-cell-group van-hairline--top-bottom">
       <div class="van-cell van-field">
         <div class="van-cell__value van-cell__value--alone">
-          <div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control"></div>
+          <div class="van-field__body"><input type="text" placeholder="请输入用户名" class="van-field__control"></div>
         </div>
       </div>
     </div>
@@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell van-cell--required 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="请输入用户名" value="" class="van-field__control">
+          <div class="van-field__body"><input type="text" placeholder="请输入用户名" class="van-field__control">
             <div class="van-field__right-icon"><i class="van-icon van-icon-question-o">
                 <!----></i></div>
           </div>
@@ -25,7 +25,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell van-cell--required 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="password" placeholder="请输入密码" value="" class="van-field__control"></div>
+          <div class="van-field__body"><input type="password" placeholder="请输入密码" class="van-field__control"></div>
         </div>
       </div>
     </div>
@@ -37,7 +37,7 @@ exports[`renders demo correctly 1`] = `
             <!----></i></div>
         <div class="van-cell__title van-field__label"><span>用户名</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><input type="text" disabled="disabled" value="输入框已禁用" class="van-field__control"></div>
+          <div class="van-field__body"><input type="text" disabled="disabled" class="van-field__control"></div>
         </div>
       </div>
     </div>
@@ -47,13 +47,13 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell van-field van-field--error">
         <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="请输入用户名" value="" class="van-field__control"></div>
+          <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="text" placeholder="请输入手机号" value="1365577" class="van-field__control"></div>
+          <div class="van-field__body"><input type="text" placeholder="请输入手机号" class="van-field__control"></div>
           <div class="van-field__error-message">手机号格式错误</div>
         </div>
       </div>
@@ -64,7 +64,7 @@ exports[`renders demo correctly 1`] = `
       <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 placeholder="请输入留言" rows="1" class="van-field__control"></textarea></div>
+          <div class="van-field__body"><textarea placeholder="请输入留言" rows="1" class="van-field__control" style="height: auto;"></textarea></div>
         </div>
       </div>
     </div>
@@ -74,7 +74,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell van-cell--center 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="请输入短信验证码" value="" class="van-field__control">
+          <div class="van-field__body"><input type="text" placeholder="请输入短信验证码" class="van-field__control">
             <div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">
           发送验证码
         </span></button></div>
diff --git a/packages/index-bar/test/__snapshots__/demo.spec.js.snap b/packages/index-bar/test/__snapshots__/demo.spec.js.snap
index 5f6173977..94b613e45 100644
--- a/packages/index-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/index-bar/test/__snapshots__/demo.spec.js.snap
@@ -5,14 +5,330 @@ exports[`renders demo correctly 1`] = `
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap van-hairline--top-bottom">
       <div class="van-tabs__nav van-tabs__nav--line">
-        <div class="van-tabs__line"></div>
+        <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+        <div class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
+        <div class="van-tab"><span class="van-ellipsis">自定义索引列表</span></div>
       </div>
     </div>
     <div class="van-tabs__content">
-      <div class="van-tab__pane" style="display:none;">
-        <!---->
+      <div class="van-tab__pane" style="">
+        <div class="van-index-bar">
+          <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
+          <div>
+            <div class="van-index-anchor">A</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">B</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">C</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">D</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">E</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">F</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">G</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">H</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">I</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">J</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">K</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">L</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">M</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">N</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">O</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">P</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">Q</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">R</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">S</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">T</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">U</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">V</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">W</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">X</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">Y</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="van-index-anchor">Z</div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+            <div class="van-cell">
+              <div class="van-cell__title"><span>文本</span></div>
+            </div>
+          </div>
+        </div>
       </div>
-      <div class="van-tab__pane" style="display:none;">
+      <div class="van-tab__pane" style="display: none;">
         <!---->
       </div>
     </div>
diff --git a/packages/index-bar/test/index.spec.js b/packages/index-bar/test/index.spec.js
index 7319fa19b..5f5dc5299 100644
--- a/packages/index-bar/test/index.spec.js
+++ b/packages/index-bar/test/index.spec.js
@@ -74,7 +74,7 @@ test('touch and scroll to anchor', () => {
   triggerDrag(sidebar, 100, 0);
   expect(fn).toHaveBeenCalledTimes(0);
 
-  // vertiacl drag
+  // vertical drag
   trigger(sidebar, 'touchstart', 0, 0);
   trigger(sidebar, 'touchmove', 0, 100);
   trigger(sidebar, 'touchmove', 0, 200);
diff --git a/packages/list/test/__snapshots__/demo.spec.js.snap b/packages/list/test/__snapshots__/demo.spec.js.snap
index 5f6173977..d22d4f94c 100644
--- a/packages/list/test/__snapshots__/demo.spec.js.snap
+++ b/packages/list/test/__snapshots__/demo.spec.js.snap
@@ -5,14 +5,21 @@ exports[`renders demo correctly 1`] = `
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap van-hairline--top-bottom">
       <div class="van-tabs__nav van-tabs__nav--line">
-        <div class="van-tabs__line"></div>
+        <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+        <div class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
+        <div class="van-tab"><span class="van-ellipsis">错误提示</span></div>
       </div>
     </div>
     <div class="van-tabs__content">
-      <div class="van-tab__pane" style="display:none;">
-        <!---->
+      <div class="van-tab__pane" style="">
+        <div class="van-pull-refresh">
+          <div class="van-pull-refresh__track" style="transition: 0ms;">
+            <div class="van-pull-refresh__head"></div>
+            <div class="van-list"></div>
+          </div>
+        </div>
       </div>
-      <div class="van-tab__pane" style="display:none;">
+      <div class="van-tab__pane" style="display: none;">
         <!---->
       </div>
     </div>
diff --git a/packages/loading/test/__snapshots__/demo.spec.js.snap b/packages/loading/test/__snapshots__/demo.spec.js.snap
index 6431e0b4c..fa20d2cc0 100644
--- a/packages/loading/test/__snapshots__/demo.spec.js.snap
+++ b/packages/loading/test/__snapshots__/demo.spec.js.snap
@@ -3,20 +3,20 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#c9c9c9;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-    <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color:#c9c9c9;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
+    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+    <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: rgb(201, 201, 201);"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
   </div>
   <div>
-    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#1989fa;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-    <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color:#1989fa;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
+    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+    <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: rgb(25, 137, 250);"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
   </div>
   <div>
-    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#c9c9c9;width:24px;height:24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">
+    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 24px; height: 24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">
       加载中...
     </span></div>
   </div>
   <div>
-    <div class="van-loading van-loading--circular van-loading--vertical"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#c9c9c9;width:24px;height:24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">
+    <div class="van-loading van-loading--circular van-loading--vertical"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 24px; height: 24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">
       加载中...
     </span></div>
   </div>
diff --git a/packages/nav-bar/test/__snapshots__/demo.spec.js.snap b/packages/nav-bar/test/__snapshots__/demo.spec.js.snap
index 881703f85..dfef9f12a 100644
--- a/packages/nav-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/nav-bar/test/__snapshots__/demo.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-nav-bar van-hairline--bottom" style="z-index:1;">
+    <div class="van-nav-bar van-hairline--bottom" style="z-index: 1;">
       <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
           <!----></i><span class="van-nav-bar__text">返回</span></div>
       <div class="van-nav-bar__title van-ellipsis">标题</div>
@@ -11,7 +11,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-nav-bar van-hairline--bottom" style="z-index:1;">
+    <div class="van-nav-bar van-hairline--bottom" style="z-index: 1;">
       <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
           <!----></i><span class="van-nav-bar__text">返回</span></div>
       <div class="van-nav-bar__title van-ellipsis">标题</div>
diff --git a/packages/notice-bar/test/__snapshots__/demo.spec.js.snap b/packages/notice-bar/test/__snapshots__/demo.spec.js.snap
index 040401504..590e50e43 100644
--- a/packages/notice-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/notice-bar/test/__snapshots__/demo.spec.js.snap
@@ -6,20 +6,20 @@ exports[`renders demo correctly 1`] = `
     <div class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon">
         <!----></i>
       <div class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+        <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
     </div>
   </div>
   <div>
     <div class="van-notice-bar">
       <div class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+        <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div><i class="van-icon van-icon-cross van-notice-bar__right-icon">
         <!----></i>
     </div>
     <div class="van-notice-bar">
       <div class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+        <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div><i class="van-icon van-icon-arrow van-notice-bar__right-icon">
         <!----></i>
     </div>
@@ -27,14 +27,14 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-notice-bar">
       <div class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content van-ellipsis" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+        <div class="van-notice-bar__content van-ellipsis" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
     </div>
   </div>
   <div>
     <div class="van-notice-bar van-notice-bar--wrapable">
       <div class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+        <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
     </div>
   </div>
diff --git a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap b/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
index 9777e905a..7366b0ab7 100644
--- a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
+++ b/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">
       弹出默认键盘
     </span></button>
-    <div name="van-slide-up" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
+    <div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
       <div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__close">完成</span></div>
       <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray">.</i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
@@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">
       弹出自定义键盘
     </span></button>
-    <div name="van-slide-up" class="van-number-keyboard van-number-keyboard--custom" style="z-index:100;display:none;">
+    <div class="van-number-keyboard van-number-keyboard--custom" style="z-index: 100; display: none;" name="van-slide-up">
       <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--middle">0</i><i class="van-hairline van-key">.</i></div>
       <div class="van-number-keyboard__sidebar"><i class="van-hairline van-key van-key--delete van-key--big van-key--gray">删除</i><i class="van-hairline van-key van-key--blue van-key--big">完成</i></div>
     </div>
diff --git a/packages/pagination/test/__snapshots__/demo.spec.js.snap b/packages/pagination/test/__snapshots__/demo.spec.js.snap
index 366db70a3..c4e54ef49 100644
--- a/packages/pagination/test/__snapshots__/demo.spec.js.snap
+++ b/packages/pagination/test/__snapshots__/demo.spec.js.snap
@@ -14,7 +14,7 @@ exports[`renders demo correctly 1`] = `
     </ul>
   </div>
   <div>
-    <ul size="small" class="van-pagination van-pagination--simple">
+    <ul class="van-pagination van-pagination--simple" size="small">
       <li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">上一页</li>
       <li class="van-pagination__page-desc">1/12</li>
       <li class="van-pagination__item van-pagination__next van-hairline">下一页</li>
diff --git a/packages/password-input/test/__snapshots__/demo.spec.js.snap b/packages/password-input/test/__snapshots__/demo.spec.js.snap
index a186d6f3c..2c9b73076 100644
--- a/packages/password-input/test/__snapshots__/demo.spec.js.snap
+++ b/packages/password-input/test/__snapshots__/demo.spec.js.snap
@@ -5,16 +5,16 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-password-input">
       <ul class="van-password-input__security van-hairline--surround">
-        <li class="van-hairline"><i style="visibility:visible;"></i></li>
-        <li class="van-hairline"><i style="visibility:visible;"></i></li>
-        <li class="van-hairline"><i style="visibility:visible;"></i></li>
-        <li class="van-hairline"><i style="visibility:hidden;"></i></li>
-        <li class="van-hairline"><i style="visibility:hidden;"></i></li>
-        <li class="van-hairline"><i style="visibility:hidden;"></i></li>
+        <li class="van-hairline"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline"><i style="visibility: hidden;"></i></li>
+        <li class="van-hairline"><i style="visibility: hidden;"></i></li>
+        <li class="van-hairline"><i style="visibility: hidden;"></i></li>
       </ul>
       <div class="van-password-input__info">密码为 6 位数字</div>
     </div>
-    <div name="van-slide-up" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
+    <div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
       <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray"></i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>
diff --git a/packages/picker/test/__snapshots__/demo.spec.js.snap b/packages/picker/test/__snapshots__/demo.spec.js.snap
index e9cd4291a..7d5c821d3 100644
--- a/packages/picker/test/__snapshots__/demo.spec.js.snap
+++ b/packages/picker/test/__snapshots__/demo.spec.js.snap
@@ -5,34 +5,34 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker">
       <!---->
-      <div class="van-picker__columns" style="height:220px;">
-        <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">杭州</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">温州</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
           </ul>
         </div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
     </div>
   </div>
   <div>
     <div class="van-picker">
       <!---->
-      <div class="van-picker__columns" style="height:220px;">
-        <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 0px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">杭州</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">温州</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 0px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
           </ul>
         </div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
     </div>
   </div>
@@ -44,78 +44,78 @@ exports[`renders demo correctly 1`] = `
         <div class="van-picker__confirm">确认</div>
       </div>
       <!---->
-      <div class="van-picker__columns" style="height:220px;">
-        <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">杭州</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">温州</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
           </ul>
         </div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
     </div>
   </div>
   <div>
     <div class="van-picker">
       <!---->
-      <div class="van-picker__columns" style="height:220px;">
-        <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 44px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height:44px;">杭州</li>
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">宁波</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">温州</li>
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 44px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">杭州</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">宁波</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
           </ul>
         </div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
     </div>
   </div>
   <div>
     <div class="van-picker">
       <!---->
-      <div class="van-picker__columns" style="height:220px;">
-        <div class="van-picker-column column1" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">浙江</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">福建</li>
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column column1" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
           </ul>
         </div>
-        <div class="van-picker-column column2" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 0px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">杭州</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">温州</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
+        <div class="van-picker-column column2" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 0px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
           </ul>
         </div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
     </div>
   </div>
   <div>
     <div class="van-picker">
-      <div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#1989fa;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-      <div class="van-picker__columns" style="height:220px;">
-        <div class="van-picker-column column1" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">浙江</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">福建</li>
+      <div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column column1" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
           </ul>
         </div>
-        <div class="van-picker-column column2" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 0px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">杭州</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">温州</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
+        <div class="van-picker-column column2" style="height: 220px;">
+          <ul style="transition: 0ms; transform: translate3d(0, 0px, 0); line-height: 44px;">
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
+            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
           </ul>
         </div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
     </div>
   </div>
diff --git a/packages/progress/test/__snapshots__/demo.spec.js.snap b/packages/progress/test/__snapshots__/demo.spec.js.snap
index 12c10274d..76446820f 100644
--- a/packages/progress/test/__snapshots__/demo.spec.js.snap
+++ b/packages/progress/test/__snapshots__/demo.spec.js.snap
@@ -3,15 +3,15 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:#1989fa;width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#1989fa;">50%</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">50%</span></span></div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:#cacaca;width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">50%</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(202, 202, 202); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(202, 202, 202);">50%</span></span></div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:#f2826a;width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">橙色</span></span></div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:#f44;width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#f44;">红色</span></span></div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:linear-gradient(to right, #be99ff, #7232dd);width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">紫色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(242, 130, 106); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(242, 130, 106);">橙色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(255, 68, 68); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(255, 68, 68);">红色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221);">紫色</span></span></div>
   </div>
 </div>
 `;
diff --git a/packages/pull-refresh/test/__snapshots__/demo.spec.js.snap b/packages/pull-refresh/test/__snapshots__/demo.spec.js.snap
index b83f947f5..239651ba7 100644
--- a/packages/pull-refresh/test/__snapshots__/demo.spec.js.snap
+++ b/packages/pull-refresh/test/__snapshots__/demo.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div class="van-pull-refresh">
-    <div class="van-pull-refresh__track" style="transition:0ms;transform:;">
+    <div class="van-pull-refresh__track" style="transition: 0ms;">
       <div class="van-pull-refresh__head"></div>
       <div>
         <p>刷新次数: 0</p>
diff --git a/packages/radio/test/__snapshots__/demo.spec.js.snap b/packages/radio/test/__snapshots__/demo.spec.js.snap
index 4dcbfd2f9..866c91a55 100644
--- a/packages/radio/test/__snapshots__/demo.spec.js.snap
+++ b/packages/radio/test/__snapshots__/demo.spec.js.snap
@@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="demo-radio-group van-radio">
-      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color:#07c160;background-color:#07c160;">
+      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
           <!----></i></div><span class="van-radio__label">
       单选框
     </span>
diff --git a/packages/rate/test/__snapshots__/demo.spec.js.snap b/packages/rate/test/__snapshots__/demo.spec.js.snap
index e51c3a07c..5349e808a 100644
--- a/packages/rate/test/__snapshots__/demo.spec.js.snap
+++ b/packages/rate/test/__snapshots__/demo.spec.js.snap
@@ -4,106 +4,106 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-rate">
-      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
           <!----></i></div>
     </div>
   </div>
   <div>
     <div class="van-rate">
-      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon" style="color:#ffd21e;font-size:20px;">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon" style="color:#ffd21e;font-size:20px;">
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon" style="color:#ffd21e;font-size:20px;">
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
           <!----></i></div>
     </div>
   </div>
   <div>
     <div class="van-rate">
-      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#f44;font-size:25px;">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#f44;font-size:25px;">
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#f44;font-size:25px;">
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
           <!----></i></div>
     </div>
   </div>
   <div>
     <div class="van-rate">
-      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:25px;">
-          <!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#ffd21e;font-size:25px;">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 25px;">
+          <!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:25px;">
-          <!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#ffd21e;font-size:25px;">
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 25px;">
+          <!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
-          <!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#ffd21e;font-size:25px;">
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
-          <!----></i><i data-score="3.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#eee;font-size:25px;">
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i><i data-score="3.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
-          <!----></i><i data-score="4.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#eee;font-size:25px;">
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i><i data-score="4.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;">
           <!----></i></div>
     </div>
   </div>
   <div>
     <div class="van-rate">
-      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+      <div class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
           <!----></i></div>
     </div>
   </div>
   <div>
     <div class="van-rate">
-      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#bdbdbd;font-size:20px;">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#bdbdbd;font-size:20px;">
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#bdbdbd;font-size:20px;">
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color:#bdbdbd;font-size:20px;">
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#bdbdbd;font-size:20px;">
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
           <!----></i></div>
     </div>
   </div>
   <div>
     <div class="van-rate">
-      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+      <div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+      <div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
+      <div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+      <div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
           <!----></i></div>
-      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
+      <div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
           <!----></i></div>
     </div>
   </div>
diff --git a/packages/search/test/__snapshots__/demo.spec.js.snap b/packages/search/test/__snapshots__/demo.spec.js.snap
index 2f4a2bd18..ceeb94f9b 100644
--- a/packages/search/test/__snapshots__/demo.spec.js.snap
+++ b/packages/search/test/__snapshots__/demo.spec.js.snap
@@ -3,13 +3,13 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-search" style="background:#fff;">
+    <div class="van-search" style="background: rgb(255, 255, 255);">
       <div class="van-search__content van-search__content--square">
         <div class="van-cell van-cell--borderless van-field">
           <div class="van-field__left-icon"><i class="van-icon van-icon-search">
               <!----></i></div>
           <div class="van-cell__value van-cell__value--alone">
-            <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
+            <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" class="van-field__control"></div>
           </div>
         </div>
       </div>
@@ -17,13 +17,13 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <form action="/">
-      <div class="van-search van-search--show-action" style="background:#fff;">
+      <div class="van-search van-search--show-action" style="background: rgb(255, 255, 255);">
         <div class="van-search__content van-search__content--square">
           <div class="van-cell van-cell--borderless van-field">
             <div class="van-field__left-icon"><i class="van-icon van-icon-search">
                 <!----></i></div>
             <div class="van-cell__value van-cell__value--alone">
-              <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
+              <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" class="van-field__control"></div>
             </div>
           </div>
         </div>
@@ -34,14 +34,14 @@ exports[`renders demo correctly 1`] = `
     </form>
   </div>
   <div>
-    <div class="van-search van-search--show-action" style="background:#fff;">
+    <div class="van-search van-search--show-action" style="background: rgb(255, 255, 255);">
       <div class="van-search__content van-search__content--round">
         <div class="van-search__label">地址</div>
         <div class="van-cell van-cell--borderless van-field">
           <div class="van-field__left-icon"><i class="van-icon van-icon-search">
               <!----></i></div>
           <div class="van-cell__value van-cell__value--alone">
-            <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
+            <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" class="van-field__control"></div>
           </div>
         </div>
       </div>
diff --git a/packages/skeleton/test/__snapshots__/demo.spec.js.snap b/packages/skeleton/test/__snapshots__/demo.spec.js.snap
index ba1e1dadb..724d55f6f 100644
--- a/packages/skeleton/test/__snapshots__/demo.spec.js.snap
+++ b/packages/skeleton/test/__snapshots__/demo.spec.js.snap
@@ -5,35 +5,35 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-skeleton van-skeleton--animate">
       <div class="van-skeleton__content">
-        <h3 class="van-skeleton__title" style="width:40%;"></h3>
-        <div class="van-skeleton__row" style="width:100%;"></div>
-        <div class="van-skeleton__row" style="width:100%;"></div>
-        <div class="van-skeleton__row" style="width:60%;"></div>
+        <h3 class="van-skeleton__title" style="width: 40%;"></h3>
+        <div class="van-skeleton__row" style="width: 100%;"></div>
+        <div class="van-skeleton__row" style="width: 100%;"></div>
+        <div class="van-skeleton__row" style="width: 60%;"></div>
       </div>
     </div>
   </div>
   <div>
     <div class="van-skeleton van-skeleton--animate">
-      <div class="van-skeleton__avatar van-skeleton__avatar--round" style="width:32px;height:32px;"></div>
+      <div class="van-skeleton__avatar van-skeleton__avatar--round" style="width: 32px; height: 32px;"></div>
       <div class="van-skeleton__content">
-        <h3 class="van-skeleton__title" style="width:40%;"></h3>
-        <div class="van-skeleton__row" style="width:100%;"></div>
-        <div class="van-skeleton__row" style="width:100%;"></div>
-        <div class="van-skeleton__row" style="width:60%;"></div>
+        <h3 class="van-skeleton__title" style="width: 40%;"></h3>
+        <div class="van-skeleton__row" style="width: 100%;"></div>
+        <div class="van-skeleton__row" style="width: 100%;"></div>
+        <div class="van-skeleton__row" style="width: 60%;"></div>
       </div>
     </div>
   </div>
   <div>
-    <div class="van-switch" style="font-size:24px;">
+    <div class="van-switch" style="font-size: 24px;">
       <div class="van-switch__node"></div>
     </div>
     <div class="van-skeleton van-skeleton--animate">
-      <div class="van-skeleton__avatar van-skeleton__avatar--round" style="width:32px;height:32px;"></div>
+      <div class="van-skeleton__avatar van-skeleton__avatar--round" style="width: 32px; height: 32px;"></div>
       <div class="van-skeleton__content">
-        <h3 class="van-skeleton__title" style="width:40%;"></h3>
-        <div class="van-skeleton__row" style="width:100%;"></div>
-        <div class="van-skeleton__row" style="width:100%;"></div>
-        <div class="van-skeleton__row" style="width:60%;"></div>
+        <h3 class="van-skeleton__title" style="width: 40%;"></h3>
+        <div class="van-skeleton__row" style="width: 100%;"></div>
+        <div class="van-skeleton__row" style="width: 100%;"></div>
+        <div class="van-skeleton__row" style="width: 60%;"></div>
       </div>
     </div>
   </div>
diff --git a/packages/slider/test/__snapshots__/demo.spec.js.snap b/packages/slider/test/__snapshots__/demo.spec.js.snap
index b59eebc3a..63441973e 100644
--- a/packages/slider/test/__snapshots__/demo.spec.js.snap
+++ b/packages/slider/test/__snapshots__/demo.spec.js.snap
@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-slider">
-      <div class="van-slider__bar" style="width:50%;height:2px;">
+      <div class="van-slider__bar" style="width: 50%; height: 2px;">
         <div class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
@@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-slider">
-      <div class="van-slider__bar" style="width:50%;height:2px;">
+      <div class="van-slider__bar" style="width: 50%; height: 2px;">
         <div class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
@@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-slider van-slider--disabled">
-      <div class="van-slider__bar" style="width:50%;height:2px;">
+      <div class="van-slider__bar" style="width: 50%; height: 2px;">
         <div class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
@@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-slider">
-      <div class="van-slider__bar" style="width:50%;height:2px;">
+      <div class="van-slider__bar" style="width: 50%; height: 2px;">
         <div class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
@@ -40,7 +40,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-slider">
-      <div class="van-slider__bar" style="width:50%;height:4px;background:#f44;">
+      <div class="van-slider__bar" style="width: 50%; height: 4px; background: rgb(255, 68, 68);">
         <div class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
@@ -49,7 +49,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-slider">
-      <div class="van-slider__bar" style="width:50%;height:2px;background:#f44;">
+      <div class="van-slider__bar" style="width: 50%; height: 2px; background: rgb(255, 68, 68);">
         <div class="van-slider__button-wrapper">
           <div class="custom-button">
             50
@@ -59,9 +59,9 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div style="height:120px;padding-left:30px;">
+    <div style="height: 120px; padding-left: 30px;">
       <div class="van-slider van-slider--vertical">
-        <div class="van-slider__bar" style="height:50%;width:2px;">
+        <div class="van-slider__bar" style="height: 50%; width: 2px;">
           <div class="van-slider__button-wrapper">
             <div class="van-slider__button"></div>
           </div>
diff --git a/packages/stepper/test/__snapshots__/demo.spec.js.snap b/packages/stepper/test/__snapshots__/demo.spec.js.snap
index cbd3647d1..a152e6292 100644
--- a/packages/stepper/test/__snapshots__/demo.spec.js.snap
+++ b/packages/stepper/test/__snapshots__/demo.spec.js.snap
@@ -3,16 +3,16 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" value="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
   </div>
   <div>
-    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" disabled="disabled" value="1" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>
+    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>
   </div>
   <div>
-    <div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" value="10" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+    <div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
   </div>
   <div>
-    <div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" value="9" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+    <div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
   </div>
 </div>
 `;
diff --git a/packages/steps/test/__snapshots__/demo.spec.js.snap b/packages/steps/test/__snapshots__/demo.spec.js.snap
index 1a65d658d..2aaf48fbd 100644
--- a/packages/steps/test/__snapshots__/demo.spec.js.snap
+++ b/packages/steps/test/__snapshots__/demo.spec.js.snap
@@ -11,8 +11,8 @@ exports[`renders demo correctly 1`] = `
           <div class="van-step__line"></div>
         </div>
         <div class="van-hairline van-step van-step--horizontal van-step--process">
-          <div class="van-step__title" style="color:#07c160;">商家接单</div>
-          <div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon" style="color:#07c160;">
+          <div class="van-step__title" style="color: rgb(7, 193, 96);">商家接单</div>
+          <div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon" style="color: rgb(7, 193, 96);">
               <!----></i></div>
           <div class="van-step__line"></div>
         </div>
@@ -39,8 +39,8 @@ exports[`renders demo correctly 1`] = `
           <div class="van-step__line"></div>
         </div>
         <div class="van-hairline van-step van-step--horizontal van-step--process">
-          <div class="van-step__title" style="color:#38f;">商家接单</div>
-          <div class="van-step__circle-container"><i class="van-icon van-icon-success van-step__icon" style="color:#38f;">
+          <div class="van-step__title" style="color: rgb(51, 136, 255);">商家接单</div>
+          <div class="van-step__circle-container"><i class="van-icon van-icon-success van-step__icon" style="color: rgb(51, 136, 255);">
               <!----></i></div>
           <div class="van-step__line"></div>
         </div>
@@ -63,11 +63,11 @@ exports[`renders demo correctly 1`] = `
     <div class="van-steps van-steps--vertical">
       <div class="van-steps__items">
         <div class="van-hairline van-step van-step--vertical van-step--process">
-          <div class="van-step__title" style="color:#07c160;">
+          <div class="van-step__title" style="color: rgb(7, 193, 96);">
             <h3>【城市】物流状态1</h3>
             <p>2016-07-12 12:40</p>
           </div>
-          <div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon" style="color:#07c160;">
+          <div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon" style="color: rgb(7, 193, 96);">
               <!----></i></div>
           <div class="van-step__line"></div>
         </div>
diff --git a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
index 822cd2d00..6dedd0d37 100644
--- a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
@@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-submit-bar">
       <div class="van-submit-bar__bar">
         <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--loading van-button--square">
-          <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:;width:20px;height:20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+          <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
         </button>
       </div>
     </div>
diff --git a/packages/swipe-cell/test/__snapshots__/demo.spec.js.snap b/packages/swipe-cell/test/__snapshots__/demo.spec.js.snap
index 71c37bc82..aca40e877 100644
--- a/packages/swipe-cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/swipe-cell/test/__snapshots__/demo.spec.js.snap
@@ -5,12 +5,12 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-notice-bar">
       <div class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">建议在手机模式下浏览本示例</div>
+        <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">建议在手机模式下浏览本示例</div>
       </div>
     </div>
     <div>
       <div class="van-swipe-cell">
-        <div class="van-swipe-cell__wrapper" style="transform:translate3d(0px, 0, 0);transition:.6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+        <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
           <div class="van-swipe-cell__left"><span>选择</span></div>
           <div class="van-cell-group van-hairline--top-bottom">
             <div class="van-cell">
@@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div>
       <div class="van-swipe-cell">
-        <div class="van-swipe-cell__wrapper" style="transform:translate3d(0px, 0, 0);transition:.6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+        <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
           <div class="van-swipe-cell__left"><span>选择</span></div>
           <div class="van-cell-group van-hairline--top-bottom">
             <div class="van-cell">
diff --git a/packages/swipe/test/__snapshots__/demo.spec.js.snap b/packages/swipe/test/__snapshots__/demo.spec.js.snap
index 8b5f3d7a3..52a5fe297 100644
--- a/packages/swipe/test/__snapshots__/demo.spec.js.snap
+++ b/packages/swipe/test/__snapshots__/demo.spec.js.snap
@@ -4,61 +4,66 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-swipe">
-      <div class="van-swipe__track" style="width:0px;height:;transition-duration:500ms;transform:translateX(0px);">
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">1</div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">2</div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">3</div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">4</div>
+      <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);">
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">1</div>
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">2</div>
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">3</div>
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">4</div>
       </div>
+      <div class="van-swipe__indicators"><i class="van-swipe__indicator van-swipe__indicator--active" style="background-color: white;"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
     </div>
   </div>
   <div>
     <div class="van-swipe">
-      <div class="van-swipe__track" style="width:0px;height:;transition-duration:500ms;transform:translateX(0px);">
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);"><img></div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);"><img></div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);"><img></div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);"><img></div>
+      <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);">
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
       </div>
+      <div class="van-swipe__indicators"><i class="van-swipe__indicator van-swipe__indicator--active"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
     </div>
   </div>
   <div>
     <div class="van-swipe">
-      <div class="van-swipe__track" style="width:0px;height:;transition-duration:500ms;transform:translateX(0px);">
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">1</div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">2</div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">3</div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">4</div>
+      <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);">
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">1</div>
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">2</div>
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">3</div>
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">4</div>
       </div>
+      <div class="van-swipe__indicators"><i class="van-swipe__indicator van-swipe__indicator--active" style="background-color: white;"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
     </div>
   </div>
   <div>
     <div class="demo-swipe--vertical van-swipe">
-      <div class="van-swipe__track" style="height:0px;width:;transition-duration:500ms;transform:translateY(0px);">
-        <div class="van-swipe-item" style="width:0px;height:0px;transform:translateY(0px);">1</div>
-        <div class="van-swipe-item" style="width:0px;height:0px;transform:translateY(0px);">2</div>
-        <div class="van-swipe-item" style="width:0px;height:0px;transform:translateY(0px);">3</div>
-        <div class="van-swipe-item" style="width:0px;height:0px;transform:translateY(0px);">4</div>
+      <div class="van-swipe__track" style="height: 0px; transition-duration: 0ms; transform: translateY(0px);">
+        <div class="van-swipe-item" style="width: 0px; height: 0px; transform: translateY(0px);">1</div>
+        <div class="van-swipe-item" style="width: 0px; height: 0px; transform: translateY(0px);">2</div>
+        <div class="van-swipe-item" style="width: 0px; height: 0px; transform: translateY(0px);">3</div>
+        <div class="van-swipe-item" style="width: 0px; height: 0px; transform: translateY(0px);">4</div>
       </div>
+      <div class="van-swipe__indicators van-swipe__indicators--vertical"><i class="van-swipe__indicator van-swipe__indicator--active" style="background-color: white;"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
     </div>
   </div>
   <div>
     <div class="van-swipe">
-      <div class="van-swipe__track" style="width:0px;height:;transition-duration:500ms;transform:translateX(0px);">
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">1</div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">2</div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">3</div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">4</div>
+      <div class="van-swipe__track" style="width: 1200px; transition-duration: 0ms; transform: translateX(0px);">
+        <div class="van-swipe-item" style="width: 300px; height: 100%; transform: translateX(0px);">1</div>
+        <div class="van-swipe-item" style="width: 300px; height: 100%; transform: translateX(0px);">2</div>
+        <div class="van-swipe-item" style="width: 300px; height: 100%; transform: translateX(0px);">3</div>
+        <div class="van-swipe-item" style="width: 300px; height: 100%; transform: translateX(0px);">4</div>
       </div>
+      <div class="van-swipe__indicators"><i class="van-swipe__indicator van-swipe__indicator--active" style="background-color: white;"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
     </div>
   </div>
   <div>
     <div class="van-swipe">
-      <div class="van-swipe__track" style="width:0px;height:;transition-duration:500ms;transform:translateX(0px);">
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">1</div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">2</div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">3</div>
-        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">4</div>
+      <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);">
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">1</div>
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">2</div>
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">3</div>
+        <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">4</div>
       </div>
       <div class="custom-indicator">
         1/4
diff --git a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
index 5595bd871..2e775007a 100644
--- a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
@@ -7,7 +7,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell van-cell--center van-switch-cell">
         <div class="van-cell__title"><span>标题</span></div>
         <div class="van-cell__value">
-          <div class="van-switch van-switch--on" style="font-size:24px;">
+          <div class="van-switch van-switch--on" style="font-size: 24px;">
             <div class="van-switch__node"></div>
           </div>
         </div>
@@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell van-cell--center van-switch-cell">
         <div class="van-cell__title"><span>标题</span></div>
         <div class="van-cell__value">
-          <div class="van-switch van-switch--on van-switch--disabled" style="font-size:24px;">
+          <div class="van-switch van-switch--on van-switch--disabled" style="font-size: 24px;">
             <div class="van-switch__node"></div>
           </div>
         </div>
@@ -31,9 +31,9 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell van-cell--center van-switch-cell">
         <div class="van-cell__title"><span>标题</span></div>
         <div class="van-cell__value">
-          <div class="van-switch van-switch--on" style="font-size:24px;">
+          <div class="van-switch van-switch--on" style="font-size: 24px;">
             <div class="van-switch__node">
-              <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#c9c9c9;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+              <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
             </div>
           </div>
         </div>
diff --git a/packages/switch/test/__snapshots__/demo.spec.js.snap b/packages/switch/test/__snapshots__/demo.spec.js.snap
index c73aef99b..8046a37e9 100644
--- a/packages/switch/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch/test/__snapshots__/demo.spec.js.snap
@@ -3,34 +3,34 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-switch van-switch--on" style="font-size:30px;">
+    <div class="van-switch van-switch--on" style="font-size: 30px;">
       <div class="van-switch__node"></div>
     </div>
   </div>
   <div>
-    <div class="van-switch van-switch--on van-switch--disabled" style="font-size:30px;">
+    <div class="van-switch van-switch--on van-switch--disabled" style="font-size: 30px;">
       <div class="van-switch__node"></div>
     </div>
   </div>
   <div>
-    <div class="van-switch van-switch--on" style="font-size:30px;">
+    <div class="van-switch van-switch--on" style="font-size: 30px;">
       <div class="van-switch__node">
-        <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#c9c9c9;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+        <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
       </div>
     </div>
   </div>
   <div>
-    <div class="van-switch van-switch--on" style="font-size:24px;">
+    <div class="van-switch van-switch--on" style="font-size: 24px;">
       <div class="van-switch__node"></div>
     </div>
   </div>
   <div>
-    <div class="van-switch van-switch--on" style="font-size:30px;background-color:#07c160;">
+    <div class="van-switch van-switch--on" style="font-size: 30px; background-color: rgb(7, 193, 96);">
       <div class="van-switch__node"></div>
     </div>
   </div>
   <div>
-    <div class="van-switch van-switch--on" style="font-size:30px;">
+    <div class="van-switch van-switch--on" style="font-size: 30px;">
       <div class="van-switch__node"></div>
     </div>
   </div>
diff --git a/packages/tab/test/__snapshots__/demo.spec.js.snap b/packages/tab/test/__snapshots__/demo.spec.js.snap
index 2a40308de..e424e5b00 100644
--- a/packages/tab/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tab/test/__snapshots__/demo.spec.js.snap
@@ -6,20 +6,67 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 1</span></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 2</span></div>
+          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 4</span></div>
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="">
+          内容 3
+        </div>
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display:none;">
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-tabs van-tabs--line">
+      <div class="van-tabs__wrap van-tabs__wrap--scrollable van-hairline--top-bottom">
+        <div class="van-tabs__nav van-tabs__nav--line">
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tab van-tab--active" style="flex-basis: 22%;"><span class="van-ellipsis">标签 1</span></div>
+          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 2</span></div>
+          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 3</span></div>
+          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 4</span></div>
+          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 5</span></div>
+          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 6</span></div>
+          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 7</span></div>
+          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 8</span></div>
+        </div>
+      </div>
+      <div class="van-tabs__content">
+        <div class="van-tab__pane" style="">
+          内容 1
+        </div>
+        <div class="van-tab__pane" style="display: none;">
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display: none;">
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display: none;">
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display: none;">
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display: none;">
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display: none;">
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -29,52 +76,20 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
+          <div class="van-tab van-tab--disabled"><span class="van-ellipsis">标签 2</span></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 3</span></div>
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="">
+          内容 1
+        </div>
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -83,16 +98,20 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--card">
       <div class="van-tabs__wrap">
-        <div class="van-tabs__nav van-tabs__nav--card"></div>
+        <div class="van-tabs__nav van-tabs__nav--card">
+          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 2</span></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 3</span></div>
+        </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="">
+          内容 1
+        </div>
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -102,14 +121,16 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 2</span></div>
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
+        <div class="van-tab__pane" style="">
+          内容 1
         </div>
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -119,20 +140,24 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 1</span></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 2</span></div>
+          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 4</span></div>
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
+        <div class="van-tab__pane" style="">
+          内容 3
         </div>
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -142,40 +167,48 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <div>
-            <div><i class="van-icon van-icon-more-o">
-                <!----></i>标签
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tab van-tab--active">
+            <div>
+              <div><i class="van-icon van-icon-more-o">
+                  <!----></i>标签
+              </div>
             </div>
           </div>
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <div>
-            <div><i class="van-icon van-icon-more-o">
-                <!----></i>标签
+          <div class="van-tab">
+            <div>
+              <div><i class="van-icon van-icon-more-o">
+                  <!----></i>标签
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <div class="van-tabs__content">
+        <div class="van-tab__pane" style="">
+          内容 1
+        </div>
+        <div class="van-tab__pane" style="display: none;">
+          <!---->
+        </div>
+      </div>
     </div>
   </div>
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 2</span></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 3</span></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 4</span></div>
         </div>
       </div>
       <div class="van-tabs__content van-tabs__content--animated">
-        <div class="van-tabs__track" style="left:0%;transition-duration:0.3s;">
+        <div class="van-tabs__track" style="left: 0%; transition-duration: 0.3s;">
           <div class="van-tab__pane">
-            <!---->
+            内容 1
           </div>
           <div class="van-tab__pane">
             <!---->
@@ -194,20 +227,24 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 1</span></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 2</span></div>
+          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
+          <div class="van-tab"><span class="van-ellipsis">标签 4</span></div>
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
+        <div class="van-tab__pane" style="">
+          内容 3
         </div>
-        <div class="van-tab__pane" style="display:none;">
+        <div class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
diff --git a/packages/tabbar/test/__snapshots__/demo.spec.js.snap b/packages/tabbar/test/__snapshots__/demo.spec.js.snap
index 6d6ccc52d..eeb8cfaca 100644
--- a/packages/tabbar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -3,8 +3,8 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
-      <div class="van-tabbar-item">
+    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+      <div class="van-tabbar-item van-tabbar-item--active">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
             <!----></i>
           <!---->
@@ -35,8 +35,8 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
-      <div class="van-tabbar-item">
+    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+      <div class="van-tabbar-item van-tabbar-item--active">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
             <!----></i>
           <!---->
@@ -73,9 +73,9 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
-      <div class="van-tabbar-item">
-        <div class="van-tabbar-item__icon"><img src="https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png">
+    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+      <div class="van-tabbar-item van-tabbar-item--active">
+        <div class="van-tabbar-item__icon"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png">
           <div class="van-info">3</div>
         </div>
         <div class="van-tabbar-item__text"><span>自定义</span></div>
@@ -97,29 +97,29 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
-      <div class="van-tabbar-item" style="color:#000;">
+    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+      <div class="van-tabbar-item van-tabbar-item--active" style="color: rgb(7, 193, 96);">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
             <!----></i>
           <!---->
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
-      <div class="van-tabbar-item" style="color:#000;">
+      <div class="van-tabbar-item" style="color: rgb(0, 0, 0);">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
             <!----></i>
           <!---->
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
-      <div class="van-tabbar-item" style="color:#000;">
+      <div class="van-tabbar-item" style="color: rgb(0, 0, 0);">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
             <!----></i>
           <!---->
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
-      <div class="van-tabbar-item" style="color:#000;">
+      <div class="van-tabbar-item" style="color: rgb(0, 0, 0);">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
             <!----></i>
           <!---->
diff --git a/packages/tag/test/__snapshots__/demo.spec.js.snap b/packages/tag/test/__snapshots__/demo.spec.js.snap
index bb9b716c5..49e60835c 100644
--- a/packages/tag/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tag/test/__snapshots__/demo.spec.js.snap
@@ -2,38 +2,38 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><span class="van-tag" style="background-color:#969799;">标签</span> <span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag" style="background-color:#1989fa;">标签</span> <span class="van-tag" style="background-color:#07c160;">标签</span></div>
-  <div><span class="van-tag van-tag--plain van-hairline--surround" style="color:#969799;">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color:#f44;">
+  <div><span class="van-tag" style="background-color: rgb(150, 151, 153);">标签</span> <span class="van-tag" style="background-color: rgb(255, 68, 68);">标签</span> <span class="van-tag" style="background-color: rgb(25, 137, 250);">标签</span> <span class="van-tag" style="background-color: rgb(7, 193, 96);">标签</span></div>
+  <div><span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(150, 151, 153);">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color: rgb(255, 68, 68);">
       标签
-    </span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color:#1989fa;">
+    </span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color: rgb(25, 137, 250);">
       标签
-    </span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#07c160;">
+    </span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(7, 193, 96);">
       标签
     </span></div>
-  <div><span class="van-tag van-tag--round" style="background-color:#969799;">标签</span> <span class="van-tag van-tag--round" style="background-color:#f44;">
+  <div><span class="van-tag van-tag--round" style="background-color: rgb(150, 151, 153);">标签</span> <span class="van-tag van-tag--round" style="background-color: rgb(255, 68, 68);">
       标签
-    </span> <span class="van-tag van-tag--round" style="background-color:#1989fa;">
+    </span> <span class="van-tag van-tag--round" style="background-color: rgb(25, 137, 250);">
       标签
-    </span> <span class="van-tag van-tag--round" style="background-color:#07c160;">
+    </span> <span class="van-tag van-tag--round" style="background-color: rgb(7, 193, 96);">
       标签
     </span></div>
-  <div><span class="van-tag van-tag--mark" style="background-color:#969799;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#f44;">
+  <div><span class="van-tag van-tag--mark" style="background-color: rgb(150, 151, 153);">标签</span> <span class="van-tag van-tag--mark" style="background-color: rgb(255, 68, 68);">
       标签
-    </span> <span class="van-tag van-tag--mark" style="background-color:#1989fa;">
+    </span> <span class="van-tag van-tag--mark" style="background-color: rgb(25, 137, 250);">
       标签
-    </span> <span class="van-tag van-tag--mark" style="background-color:#07c160;">
+    </span> <span class="van-tag van-tag--mark" style="background-color: rgb(7, 193, 96);">
       标签
     </span></div>
-  <div><span class="van-tag" style="background-color:#f2826a;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#f2826a;">
+  <div><span class="van-tag" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(242, 130, 106);">
       标签
-    </span> <span class="van-tag" style="background-color:#7232dd;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#7232dd;">
+    </span> <span class="van-tag" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(114, 50, 221);">
       标签
-    </span> <span class="van-tag" style="background-color:#ffe1e1;color:#ad0000;">
+    </span> <span class="van-tag" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">
       标签
     </span></div>
-  <div><span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--medium" style="background-color:#f44;">
+  <div><span class="van-tag" style="background-color: rgb(255, 68, 68);">标签</span> <span class="van-tag van-tag--medium" style="background-color: rgb(255, 68, 68);">
       标签
-    </span> <span class="van-tag van-tag--large" style="background-color:#f44;">
+    </span> <span class="van-tag van-tag--large" style="background-color: rgb(255, 68, 68);">
       标签
     </span></div>
 </div>
diff --git a/packages/tree-select/test/__snapshots__/demo.spec.js.snap b/packages/tree-select/test/__snapshots__/demo.spec.js.snap
index b179c3c4b..6a7d1d145 100644
--- a/packages/tree-select/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tree-select/test/__snapshots__/demo.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-tree-select" style="height:300px;">
+    <div class="van-tree-select" style="height: 300px;">
       <div class="van-tree-select__nav">
         <div class="van-ellipsis van-tree-select__nitem van-tree-select__nitem--active">所有城市</div>
         <div class="van-ellipsis van-tree-select__nitem">浙江</div>
@@ -11,7 +11,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-ellipsis van-tree-select__nitem van-tree-select__nitem--disabled">福建</div>
       </div>
       <div class="van-tree-select__content">
-        <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">杭州<i class="van-icon van-icon-checked van-tree-select__selected" style="font-size:16px;">
+        <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">杭州<i class="van-icon van-icon-checked van-tree-select__selected" style="font-size: 16px;">
             <!----></i></div>
         <div class="van-ellipsis van-tree-select__item">温州</div>
         <div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">宁波</div>
diff --git a/test/demo-test.ts b/test/demo-test.ts
index 480049c42..15ef2d3d0 100644
--- a/test/demo-test.ts
+++ b/test/demo-test.ts
@@ -1,10 +1,12 @@
 import Vue from 'vue';
 import '../docs/src/demo-common';
 import Locale from '../packages/locale';
-import { renderToString } from '@vue/server-test-utils';
+import { mount, later } from './utils';
 
 const empty = {
-  template: '<div><slot></slot></div>',
+  render(h) {
+    return h('div', [this.$slots.default]);
+  },
   inheritAttrs: false
 };
 
@@ -12,11 +14,15 @@ Vue.component('demo-block', empty);
 Vue.component('demo-section', empty);
 
 export default function (Demo: any) {
-  test('renders demo correctly', () => {
+  test('renders demo correctly', async () => {
     if (Demo.i18n) {
       Locale.add(Demo.i18n);
     }
 
-    expect(renderToString(Demo)).toMatchSnapshot();
+    const wrapper = mount(Demo);
+
+    await later();
+
+    expect(wrapper).toMatchSnapshot();
   });
 }