From 24c4896a11dcac5c9b8ac68642330f54a6a77482 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 8 Nov 2020 20:30:51 +0800
Subject: [PATCH] test: enable all demo snapshots

---
 a.js                                          |    8 +
 .../test/__snapshots__/demo.legacy.js.snap    |   91 -
 .../test/__snapshots__/demo.spec.js.snap      |  134 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   37 -
 .../test/__snapshots__/demo.spec.js.snap      |   95 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   60 -
 .../test/__snapshots__/demo.spec.js.snap      |  126 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   49 -
 .../test/__snapshots__/demo.spec.js.snap      |   76 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  643 -------
 src/area/test/__snapshots__/demo.spec.js.snap |  649 +++++++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   86 -
 .../test/__snapshots__/demo.spec.js.snap      |  176 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  183 --
 .../test/__snapshots__/demo.spec.js.snap      |  174 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   93 -
 src/card/test/__snapshots__/demo.spec.js.snap |  117 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  110 --
 src/cell/test/__snapshots__/demo.spec.js.snap |  191 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  150 --
 .../test/__snapshots__/demo.spec.js.snap      |  186 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   57 -
 .../test/__snapshots__/demo.spec.js.snap      |   66 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   58 -
 src/col/test/__snapshots__/demo.spec.js.snap  |   47 +
 src/col/test/{demo.legacy.js => demo.spec.js} |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  102 --
 .../test/__snapshots__/demo.spec.js.snap      |  183 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   32 -
 .../test/__snapshots__/demo.spec.js.snap      |   47 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   35 -
 .../test/__snapshots__/demo.spec.js.snap      |   70 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   31 -
 .../test/__snapshots__/demo.spec.js.snap      |   49 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   14 -
 .../test/__snapshots__/demo.spec.js.snap      |   23 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    | 1618 ----------------
 .../test/__snapshots__/demo.spec.js.snap      | 1632 +++++++++++++++++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   51 -
 .../test/__snapshots__/demo.spec.js.snap      |  110 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   32 -
 .../test/__snapshots__/demo.spec.js.snap      |   22 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   96 -
 .../test/__snapshots__/demo.spec.js.snap      |  124 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   55 -
 .../test/__snapshots__/demo.spec.js.snap      |   59 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  151 --
 .../test/__snapshots__/demo.spec.js.snap      |  346 ++++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  224 ---
 src/form/test/__snapshots__/demo.spec.js.snap |  450 +++++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  196 --
 src/grid/test/__snapshots__/demo.spec.js.snap |  271 +++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  129 --
 .../test/__snapshots__/demo.spec.js.snap      |  174 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  389 ----
 .../test/__snapshots__/demo.spec.js.snap      |  857 +++++++++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   32 -
 src/list/test/__snapshots__/demo.spec.js.snap |   34 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   28 -
 .../test/__snapshots__/demo.spec.js.snap      |   34 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   27 -
 .../test/__snapshots__/demo.spec.js.snap      |   31 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   71 -
 .../test/__snapshots__/demo.spec.js.snap      |   91 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   47 -
 .../test/__snapshots__/demo.spec.js.snap      |  104 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 ...{demo.legacy.js.snap => demo.spec.js.snap} |  149 +-
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   20 -
 .../test/__snapshots__/demo.spec.js.snap      |   24 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   47 -
 .../test/__snapshots__/demo.spec.js.snap      |   52 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 ...{demo.legacy.js.snap => demo.spec.js.snap} |  185 +-
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  295 ---
 .../test/__snapshots__/demo.spec.js.snap      |  325 ++++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   65 -
 .../test/__snapshots__/demo.spec.js.snap      |  180 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   20 -
 .../test/__snapshots__/demo.spec.js.snap      |   18 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   32 -
 .../test/__snapshots__/demo.spec.js.snap      |   32 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  132 --
 .../test/__snapshots__/demo.spec.js.snap      |  162 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  125 --
 src/rate/test/__snapshots__/demo.spec.js.snap |  287 +++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   91 -
 .../test/__snapshots__/demo.spec.js.snap      |  170 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   34 -
 .../test/__snapshots__/demo.spec.js.snap      |   80 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   77 -
 .../test/__snapshots__/demo.spec.js.snap      |   77 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   41 -
 .../test/__snapshots__/demo.spec.js.snap      |   42 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   93 -
 .../test/__snapshots__/demo.spec.js.snap      |   91 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   66 -
 .../test/__snapshots__/demo.spec.js.snap      |  114 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   96 -
 .../test/__snapshots__/demo.spec.js.snap      |  109 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   35 -
 .../test/__snapshots__/demo.spec.js.snap      |   36 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   55 -
 .../test/__snapshots__/demo.spec.js.snap      |   87 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   72 -
 .../test/__snapshots__/demo.spec.js.snap      |  106 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   72 -
 .../test/__snapshots__/demo.spec.js.snap      |   78 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   46 -
 .../test/__snapshots__/demo.spec.js.snap      |   63 +
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  349 ----
 src/tab/test/__snapshots__/demo.spec.js.snap  |  340 ++++
 src/tab/test/{demo.legacy.js => demo.spec.js} |    0
 src/tabbar-item/index.js                      |    4 +-
 .../test/__snapshots__/demo.legacy.js.snap    |  202 --
 .../test/__snapshots__/demo.spec.js.snap      |  234 +++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   72 -
 src/tag/test/__snapshots__/demo.spec.js.snap  |  166 ++
 src/tag/test/{demo.legacy.js => demo.spec.js} |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   54 -
 .../test/__snapshots__/demo.spec.js.snap      |  122 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |   90 -
 .../test/__snapshots__/demo.spec.js.snap      |  117 ++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 .../test/__snapshots__/demo.legacy.js.snap    |  147 --
 .../test/__snapshots__/demo.spec.js.snap      |  213 +++
 .../test/{demo.legacy.js => demo.spec.js}     |    0
 test/demo.ts                                  |    2 +-
 181 files changed, 10306 insertions(+), 7520 deletions(-)
 create mode 100644 a.js
 delete mode 100644 src/action-bar/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/action-bar/test/__snapshots__/demo.spec.js.snap
 rename src/action-bar/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/action-sheet/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/action-sheet/test/__snapshots__/demo.spec.js.snap
 rename src/action-sheet/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/address-edit/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/address-edit/test/__snapshots__/demo.spec.js.snap
 rename src/address-edit/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/address-list/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/address-list/test/__snapshots__/demo.spec.js.snap
 rename src/address-list/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/area/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/area/test/__snapshots__/demo.spec.js.snap
 rename src/area/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/button/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/button/test/__snapshots__/demo.spec.js.snap
 rename src/button/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/calendar/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/calendar/test/__snapshots__/demo.spec.js.snap
 rename src/calendar/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/card/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/card/test/__snapshots__/demo.spec.js.snap
 rename src/card/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/cell/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/cell/test/__snapshots__/demo.spec.js.snap
 rename src/cell/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/checkbox/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/checkbox/test/__snapshots__/demo.spec.js.snap
 rename src/checkbox/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/circle/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/circle/test/__snapshots__/demo.spec.js.snap
 rename src/circle/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/col/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/col/test/__snapshots__/demo.spec.js.snap
 rename src/col/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/collapse/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/collapse/test/__snapshots__/demo.spec.js.snap
 rename src/collapse/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/contact-card/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/contact-card/test/__snapshots__/demo.spec.js.snap
 rename src/contact-card/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/contact-edit/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/contact-edit/test/__snapshots__/demo.spec.js.snap
 rename src/contact-edit/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/contact-list/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/contact-list/test/__snapshots__/demo.spec.js.snap
 rename src/contact-list/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/coupon-list/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/coupon-list/test/__snapshots__/demo.spec.js.snap
 rename src/coupon-list/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/datetime-picker/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/datetime-picker/test/__snapshots__/demo.spec.js.snap
 rename src/datetime-picker/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/dialog/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/dialog/test/__snapshots__/demo.spec.js.snap
 rename src/dialog/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/divider/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/divider/test/__snapshots__/demo.spec.js.snap
 rename src/divider/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/dropdown-menu/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
 rename src/dropdown-menu/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/empty/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/empty/test/__snapshots__/demo.spec.js.snap
 rename src/empty/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/field/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/field/test/__snapshots__/demo.spec.js.snap
 rename src/field/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/form/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/form/test/__snapshots__/demo.spec.js.snap
 rename src/form/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/grid/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/grid/test/__snapshots__/demo.spec.js.snap
 rename src/grid/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/image/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/image/test/__snapshots__/demo.spec.js.snap
 rename src/image/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/index-bar/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/index-bar/test/__snapshots__/demo.spec.js.snap
 rename src/index-bar/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/list/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/list/test/__snapshots__/demo.spec.js.snap
 rename src/list/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/loading/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/loading/test/__snapshots__/demo.spec.js.snap
 rename src/loading/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/nav-bar/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/nav-bar/test/__snapshots__/demo.spec.js.snap
 rename src/nav-bar/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/notice-bar/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/notice-bar/test/__snapshots__/demo.spec.js.snap
 rename src/notice-bar/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/notify/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/notify/test/__snapshots__/demo.spec.js.snap
 rename src/notify/test/{demo.legacy.js => demo.spec.js} (100%)
 rename src/number-keyboard/test/__snapshots__/{demo.legacy.js.snap => demo.spec.js.snap} (85%)
 rename src/number-keyboard/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/overlay/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/overlay/test/__snapshots__/demo.spec.js.snap
 rename src/overlay/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/pagination/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/pagination/test/__snapshots__/demo.spec.js.snap
 rename src/pagination/test/{demo.legacy.js => demo.spec.js} (100%)
 rename src/password-input/test/__snapshots__/{demo.legacy.js.snap => demo.spec.js.snap} (50%)
 rename src/password-input/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/picker/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/picker/test/__snapshots__/demo.spec.js.snap
 rename src/picker/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/popup/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/popup/test/__snapshots__/demo.spec.js.snap
 rename src/popup/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/progress/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/progress/test/__snapshots__/demo.spec.js.snap
 rename src/progress/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/pull-refresh/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/pull-refresh/test/__snapshots__/demo.spec.js.snap
 rename src/pull-refresh/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/radio/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/radio/test/__snapshots__/demo.spec.js.snap
 rename src/radio/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/rate/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/rate/test/__snapshots__/demo.spec.js.snap
 rename src/rate/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/search/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/search/test/__snapshots__/demo.spec.js.snap
 rename src/search/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/share-sheet/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/share-sheet/test/__snapshots__/demo.spec.js.snap
 rename src/share-sheet/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/sidebar/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/sidebar/test/__snapshots__/demo.spec.js.snap
 rename src/sidebar/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/skeleton/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/skeleton/test/__snapshots__/demo.spec.js.snap
 rename src/skeleton/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/slider/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/slider/test/__snapshots__/demo.spec.js.snap
 rename src/slider/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/stepper/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/stepper/test/__snapshots__/demo.spec.js.snap
 rename src/stepper/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/steps/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/steps/test/__snapshots__/demo.spec.js.snap
 rename src/steps/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/sticky/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/sticky/test/__snapshots__/demo.spec.js.snap
 rename src/sticky/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/submit-bar/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/submit-bar/test/__snapshots__/demo.spec.js.snap
 rename src/submit-bar/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/swipe-cell/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/swipe-cell/test/__snapshots__/demo.spec.js.snap
 rename src/swipe-cell/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/swipe/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/swipe/test/__snapshots__/demo.spec.js.snap
 rename src/swipe/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/switch/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/switch/test/__snapshots__/demo.spec.js.snap
 rename src/switch/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/tab/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/tab/test/__snapshots__/demo.spec.js.snap
 rename src/tab/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/tabbar/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/tabbar/test/__snapshots__/demo.spec.js.snap
 rename src/tabbar/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/tag/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/tag/test/__snapshots__/demo.spec.js.snap
 rename src/tag/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/toast/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/toast/test/__snapshots__/demo.spec.js.snap
 rename src/toast/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/tree-select/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/tree-select/test/__snapshots__/demo.spec.js.snap
 rename src/tree-select/test/{demo.legacy.js => demo.spec.js} (100%)
 delete mode 100644 src/uploader/test/__snapshots__/demo.legacy.js.snap
 create mode 100644 src/uploader/test/__snapshots__/demo.spec.js.snap
 rename src/uploader/test/{demo.legacy.js => demo.spec.js} (100%)

diff --git a/a.js b/a.js
new file mode 100644
index 000000000..67c54792a
--- /dev/null
+++ b/a.js
@@ -0,0 +1,8 @@
+const glob = require('glob');
+const fs = require('fs');
+
+const legacy = glob.sync('src/**/demo.legacy.js');
+
+legacy.forEach((item) => {
+  fs.renameSync(item, item.replace('demo.legacy.js', 'demo.spec.js'));
+});
diff --git a/src/action-bar/test/__snapshots__/demo.legacy.js.snap b/src/action-bar/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index eb1a3881d..000000000
--- a/src/action-bar/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-action-bar">
-      <div role="button" tabindex="0" class="van-action-bar-icon">
-        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
-          <!---->
-        </div>客服
-      </div>
-      <div role="button" tabindex="0" class="van-action-bar-icon">
-        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
-          <!---->
-        </div>购物车
-      </div>
-      <div role="button" tabindex="0" class="van-action-bar-icon">
-        <div class="van-icon van-icon-shop-o van-action-bar-icon__icon">
-          <!---->
-        </div>店铺
-      </div> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--last van-action-bar-button--danger">
-        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
-      </button>
-    </div>
-  </div>
-  <div>
-    <div class="van-action-bar">
-      <div role="button" tabindex="0" class="van-action-bar-icon">
-        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
-          <div class="van-badge van-badge--dot"></div>
-        </div>客服
-      </div>
-      <div role="button" tabindex="0" class="van-action-bar-icon">
-        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
-          <div class="van-badge">5</div>
-        </div>购物车
-      </div>
-      <div role="button" tabindex="0" class="van-action-bar-icon">
-        <div class="van-icon van-icon-shop-o van-action-bar-icon__icon">
-          <div class="van-badge">12</div>
-        </div>店铺
-      </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning">
-        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
-      </button> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--last van-action-bar-button--danger">
-        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
-      </button>
-    </div>
-  </div>
-  <div>
-    <div class="van-action-bar">
-      <div role="button" tabindex="0" class="van-action-bar-icon">
-        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon" style="color: rgb(7, 193, 96);">
-          <!---->
-        </div>客服
-      </div>
-      <div role="button" tabindex="0" class="van-action-bar-icon">
-        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
-          <!---->
-        </div>购物车
-      </div>
-      <div role="button" tabindex="0" class="van-action-bar-icon">
-        <div class="van-icon van-icon-star van-action-bar-icon__icon" style="color: rgb(255, 80, 0);">
-          <!---->
-        </div>已收藏
-      </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning">
-        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
-      </button> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--last van-action-bar-button--danger">
-        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
-      </button>
-    </div>
-  </div>
-  <div>
-    <div class="van-action-bar">
-      <div role="button" tabindex="0" class="van-action-bar-icon">
-        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
-          <!---->
-        </div>客服
-      </div>
-      <div role="button" tabindex="0" class="van-action-bar-icon">
-        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
-          <!---->
-        </div>购物车
-      </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning" style="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;">
-        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
-      </button> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--last van-action-bar-button--danger" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
-        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
-      </button>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/action-bar/test/__snapshots__/demo.spec.js.snap b/src/action-bar/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..bd5fc6ec4
--- /dev/null
+++ b/src/action-bar/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-action-bar">
+    <div role="button" class="van-action-bar-icon" tabindex="0">
+      <div class="van-badge__wrapper van-icon van-icon-chat-o van-action-bar-icon__icon">
+        <!---->
+        <!---->
+        <!---->
+      </div>客服
+    </div>
+    <div role="button" class="van-action-bar-icon" tabindex="0">
+      <div class="van-badge__wrapper van-icon van-icon-cart-o van-action-bar-icon__icon">
+        <!---->
+        <!---->
+        <!---->
+      </div>购物车
+    </div>
+    <div role="button" class="van-action-bar-icon" tabindex="0">
+      <div class="van-badge__wrapper van-icon van-icon-shop-o van-action-bar-icon__icon">
+        <!---->
+        <!---->
+        <!---->
+      </div>店铺
+    </div><button type="button" class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--danger van-action-bar-button--last van-action-bar-button--first">
+      <div class="van-button__content">
+        <!----><span class="van-button__text">立即购买</span>
+        <!---->
+      </div>
+    </button>
+  </div>
+</div>
+<div>
+  <div class="van-action-bar">
+    <div role="button" class="van-action-bar-icon" tabindex="0">
+      <div class="van-badge__wrapper van-icon van-icon-chat-o van-action-bar-icon__icon">
+        <!---->
+        <!---->
+        <div class="van-badge van-badge--dot van-badge--fixed">
+          <!---->
+        </div>
+      </div>客服
+    </div>
+    <div role="button" class="van-action-bar-icon" tabindex="0">
+      <div class="van-badge__wrapper van-icon van-icon-cart-o van-action-bar-icon__icon">
+        <!---->
+        <!---->
+        <div class="van-badge van-badge--fixed">5</div>
+      </div>购物车
+    </div>
+    <div role="button" class="van-action-bar-icon" tabindex="0">
+      <div class="van-badge__wrapper van-icon van-icon-shop-o van-action-bar-icon__icon">
+        <!---->
+        <!---->
+        <div class="van-badge van-badge--fixed">12</div>
+      </div>店铺
+    </div><button type="button" class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--warning van-action-bar-button--first">
+      <div class="van-button__content">
+        <!----><span class="van-button__text">加入购物车</span>
+        <!---->
+      </div>
+    </button><button type="button" class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--danger van-action-bar-button--last">
+      <div class="van-button__content">
+        <!----><span class="van-button__text">立即购买</span>
+        <!---->
+      </div>
+    </button>
+  </div>
+</div>
+<div>
+  <div class="van-action-bar">
+    <div role="button" class="van-action-bar-icon" tabindex="0">
+      <div class="van-badge__wrapper van-icon van-icon-chat-o van-action-bar-icon__icon" style="color: rgb(7, 193, 96);">
+        <!---->
+        <!---->
+        <!---->
+      </div>客服
+    </div>
+    <div role="button" class="van-action-bar-icon" tabindex="0">
+      <div class="van-badge__wrapper van-icon van-icon-cart-o van-action-bar-icon__icon">
+        <!---->
+        <!---->
+        <!---->
+      </div>购物车
+    </div>
+    <div role="button" class="van-action-bar-icon" tabindex="0">
+      <div class="van-badge__wrapper van-icon van-icon-star van-action-bar-icon__icon" style="color: rgb(255, 80, 0);">
+        <!---->
+        <!---->
+        <!---->
+      </div>已收藏
+    </div><button type="button" class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--warning van-action-bar-button--first">
+      <div class="van-button__content">
+        <!----><span class="van-button__text">加入购物车</span>
+        <!---->
+      </div>
+    </button><button type="button" class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--danger van-action-bar-button--last">
+      <div class="van-button__content">
+        <!----><span class="van-button__text">立即购买</span>
+        <!---->
+      </div>
+    </button>
+  </div>
+</div>
+<div>
+  <div class="van-action-bar">
+    <div role="button" class="van-action-bar-icon" tabindex="0">
+      <div class="van-badge__wrapper van-icon van-icon-chat-o van-action-bar-icon__icon">
+        <!---->
+        <!---->
+        <!---->
+      </div>客服
+    </div>
+    <div role="button" class="van-action-bar-icon" tabindex="0">
+      <div class="van-badge__wrapper van-icon van-icon-cart-o van-action-bar-icon__icon">
+        <!---->
+        <!---->
+        <!---->
+      </div>购物车
+    </div><button type="button" class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--warning van-action-bar-button--first" style="color: rgb(255, 255, 255); border-color: #be99ff; background: rgb(190, 153, 255);">
+      <div class="van-button__content">
+        <!----><span class="van-button__text">加入购物车</span>
+        <!---->
+      </div>
+    </button><button type="button" class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--danger van-action-bar-button--last" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
+      <div class="van-button__content">
+        <!----><span class="van-button__text">立即购买</span>
+        <!---->
+      </div>
+    </button>
+  </div>
+</div>
+`;
diff --git a/src/action-bar/test/demo.legacy.js b/src/action-bar/test/demo.spec.js
similarity index 100%
rename from src/action-bar/test/demo.legacy.js
rename to src/action-bar/test/demo.spec.js
diff --git a/src/action-sheet/test/__snapshots__/demo.legacy.js.snap b/src/action-sheet/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 0b0f77f33..000000000
--- a/src/action-sheet/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>基础用法</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>展示取消按钮</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>展示描述信息</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>选项状态</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <!---->
-  <!---->
-  <!---->
-  <!---->
-  <!---->
-</div>
-`;
diff --git a/src/action-sheet/test/__snapshots__/demo.spec.js.snap b/src/action-sheet/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..831013eee
--- /dev/null
+++ b/src/action-sheet/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>基础用法</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>展示取消按钮</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>展示描述信息</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>选项状态</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>自定义面板</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<transition-stub>
+  <!---->
+</transition-stub>
+<transition-stub>
+  <!---->
+</transition-stub>
+<transition-stub>
+  <!---->
+</transition-stub>
+<transition-stub>
+  <!---->
+</transition-stub>
+<transition-stub>
+  <!---->
+</transition-stub>
+<transition-stub>
+  <!---->
+</transition-stub>
+<transition-stub>
+  <!---->
+</transition-stub>
+<transition-stub>
+  <!---->
+</transition-stub>
+<transition-stub>
+  <!---->
+</transition-stub>
+<transition-stub>
+  <!---->
+</transition-stub>
+`;
diff --git a/src/action-sheet/test/demo.legacy.js b/src/action-sheet/test/demo.spec.js
similarity index 100%
rename from src/action-sheet/test/demo.legacy.js
rename to src/action-sheet/test/demo.spec.js
diff --git a/src/address-edit/test/__snapshots__/demo.legacy.js.snap b/src/address-edit/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index dfe3136ad..000000000
--- a/src/address-edit/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-address-edit">
-      <div class="van-address-edit__fields">
-        <div class="van-cell van-field">
-          <div class="van-cell__title van-field__label"><span>姓名</span></div>
-          <div class="van-cell__value van-field__value">
-            <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
-          </div>
-        </div>
-        <div class="van-cell van-field">
-          <div class="van-cell__title van-field__label"><span>电话</span></div>
-          <div class="van-cell__value van-field__value">
-            <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
-          </div>
-        </div>
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
-          <div class="van-cell__title van-field__label"><span>地区</span></div>
-          <div class="van-cell__value van-field__value">
-            <div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
-              <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
-                  <!----></i></div>
-            </div>
-          </div>
-        </div>
-        <div class="van-cell van-address-edit-detail">
-          <div class="van-cell__value van-cell__value--alone">
-            <div class="van-cell van-field">
-              <div class="van-cell__title van-field__label"><span>详细地址</span></div>
-              <div class="van-cell__value van-field__value">
-                <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="van-cell van-field">
-          <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
-          <div class="van-cell__value van-field__value">
-            <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
-          </div>
-        </div>
-      </div>
-      <div class="van-cell van-cell--center van-address-edit__default">
-        <div class="van-cell__title"><span>设为默认收货地址</span></div>
-        <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
-          <div class="van-switch__node"></div>
-        </div>
-      </div>
-      <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
-          <div class="van-button__content"><span class="van-button__text">保存</span></div>
-        </button><button class="van-button van-button--default van-button--normal van-button--block van-button--round">
-          <div class="van-button__content"><span class="van-button__text">删除</span></div>
-        </button></div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/address-edit/test/__snapshots__/demo.spec.js.snap b/src/address-edit/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..2ef83f6e2
--- /dev/null
+++ b/src/address-edit/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-address-edit">
+    <div class="van-address-edit__fields">
+      <div class="van-cell van-field">
+        <!---->
+        <div class="van-cell__title van-field__label"><span>姓名</span>
+          <!---->
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body"><input type="text" class="van-field__control" placeholder="收货人姓名">
+            <!---->
+            <!---->
+            <!---->
+          </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 van-field__value">
+          <div class="van-field__body"><input type="tel" class="van-field__control" placeholder="收货人手机号">
+            <!---->
+            <!---->
+            <!---->
+          </div>
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <div class="van-cell van-cell--clickable van-field" role="button" tabindex="0">
+        <!---->
+        <div class="van-cell__title van-field__label"><span>地区</span>
+          <!---->
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body"><input type="text" class="van-field__control" readonly="" placeholder="选择省 / 市 / 区">
+            <!---->
+            <div class="van-field__right-icon"><i class="van-badge__wrapper van-icon van-icon-arrow">
+                <!---->
+                <!---->
+                <!----></i></div>
+            <!---->
+          </div>
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <div class="van-cell van-field van-address-edit-detail">
+        <!---->
+        <div class="van-cell__title van-field__label"><span>详细地址</span>
+          <!---->
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body"><textarea rows="1" class="van-field__control" placeholder="街道门牌、楼层房间号等信息" style="height: auto;"></textarea>
+            <!---->
+            <!---->
+            <!---->
+          </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 van-field__value">
+          <div class="van-field__body"><input type="tel" class="van-field__control" placeholder="邮政编码">
+            <!---->
+            <!---->
+            <!---->
+          </div>
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <div class="van-cell van-cell--center van-address-edit__default">
+      <!---->
+      <div class="van-cell__title"><span>设为默认收货地址</span>
+        <!---->
+      </div>
+      <!---->
+      <div role="switch" class="van-switch" style="font-size: 24px;" aria-checked="false">
+        <div class="van-switch__node">
+          <!---->
+        </div>
+      </div>
+      <!---->
+    </div>
+    <div class="van-address-edit__buttons"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round">
+        <div class="van-button__content">
+          <!----><span class="van-button__text">保存</span>
+          <!---->
+        </div>
+      </button><button type="button" class="van-button van-button--default van-button--normal van-button--block van-button--round">
+        <div class="van-button__content">
+          <!----><span class="van-button__text">删除</span>
+          <!---->
+        </div>
+      </button></div>
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+</div>
+`;
diff --git a/src/address-edit/test/demo.legacy.js b/src/address-edit/test/demo.spec.js
similarity index 100%
rename from src/address-edit/test/demo.legacy.js
rename to src/address-edit/test/demo.spec.js
diff --git a/src/address-list/test/__snapshots__/demo.legacy.js.snap b/src/address-list/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index d52ece63a..000000000
--- a/src/address-list/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-address-list">
-      <div role="radiogroup" class="van-radio-group">
-        <div class="van-address-item">
-          <div class="van-cell van-cell--borderless">
-            <div class="van-cell__value van-cell__value--alone van-address-item__value">
-              <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-                <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 18px;"><i class="van-icon van-icon-success">
-                    <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三 13000000000<span class="van-tag van-tag--round van-tag--danger van-address-item__tag">默认</span>
-              </div>
-              <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
-            </div>
-          </div><i class="van-icon van-icon-edit van-address-item__edit">
-            <!----></i>
-        </div>
-      </div>
-      <div class="van-address-item">
-        <div class="van-cell van-cell--borderless">
-          <div class="van-cell__value van-cell__value--alone van-address-item__value">
-            <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-              <div class="van-radio__icon van-radio__icon--round" style="font-size: 18px;"><i class="van-icon van-icon-success">
-                  <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四 1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
-            </div>
-          </div><i class="van-icon van-icon-edit van-address-item__edit">
-            <!----></i>
-        </div>
-      </div>
-    </div>
-    <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
-    <div class="van-address-item van-address-item--disabled">
-      <div class="van-cell van-cell--borderless">
-        <div class="van-cell__value van-cell__value--alone van-address-item__value">
-          <div class="van-address-item__name">王五 1320000000</div>
-          <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
-        </div><i class="van-icon van-icon-edit van-address-item__edit">
-          <!----></i>
-      </div>
-    </div>
-    <div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add">
-        <div class="van-button__content"><span class="van-button__text">新增地址</span></div>
-      </button></div>
-  </div>
-</div>
-</div>
-`;
diff --git a/src/address-list/test/__snapshots__/demo.spec.js.snap b/src/address-list/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..435851403
--- /dev/null
+++ b/src/address-list/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-address-list">
+    <!---->
+    <div class="van-radio-group" role="radiogroup">
+      <div class="van-address-item">
+        <div class="van-cell van-cell--borderless">
+          <!---->
+          <!---->
+          <div class="van-cell__value van-cell__value--alone van-address-item__value">
+            <div role="radio" class="van-radio" tabindex="0" aria-checked="true">
+              <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 18px;"><i class="van-badge__wrapper van-icon van-icon-success">
+                  <!---->
+                  <!---->
+                  <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三 13000000000<transition-stub class="van-address-item__tag"><span class="van-tag van-tag--round van-tag--danger">默认<!----></span></transition-stub>
+            </div>
+            <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
+          </div>
+        </div><i class="van-badge__wrapper van-icon van-icon-edit van-address-item__edit">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <div class="van-address-item">
+      <div class="van-cell van-cell--borderless">
+        <!---->
+        <!---->
+        <div class="van-cell__value van-cell__value--alone van-address-item__value">
+          <div role="radio" class="van-radio" tabindex="0" aria-checked="false">
+            <div class="van-radio__icon van-radio__icon--round" style="font-size: 18px;"><i class="van-badge__wrapper van-icon van-icon-success">
+                <!---->
+                <!---->
+                <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四 1310000000<!----></div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
+          </div>
+        </div><i class="van-badge__wrapper van-icon van-icon-edit van-address-item__edit">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+  <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
+  <div class="van-address-item van-address-item--disabled">
+    <div class="van-cell van-cell--borderless">
+      <!---->
+      <!---->
+      <div class="van-cell__value van-cell__value--alone van-address-item__value">
+        <div class="van-address-item__name">王五 1320000000
+          <!---->
+        </div>
+        <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
+      </div><i class="van-badge__wrapper van-icon van-icon-edit van-address-item__edit">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <!---->
+  </div>
+  <!---->
+  <div class="van-address-list__bottom"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add">
+      <div class="van-button__content">
+        <!----><span class="van-button__text">新增地址</span>
+        <!---->
+      </div>
+    </button></div>
+</div>
+</div>
+`;
diff --git a/src/address-list/test/demo.legacy.js b/src/address-list/test/demo.spec.js
similarity index 100%
rename from src/address-list/test/demo.legacy.js
rename to src/address-list/test/demo.spec.js
diff --git a/src/area/test/__snapshots__/demo.legacy.js.snap b/src/area/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 984178494..000000000
--- a/src/area/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,643 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-picker van-area">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">北京市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">天津市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">河北省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">山西省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">内蒙古自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">辽宁省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">吉林省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">黑龙江省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">上海市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">江苏省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">浙江省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">安徽省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">福建省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">江西省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">山东省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">河南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">湖北省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">湖南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">广东省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">广西壮族自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">海南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">重庆市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">四川省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">贵州省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">云南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">西藏自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">陕西省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">甘肃省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">青海省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">宁夏回族自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">新疆维吾尔自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">台湾省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">香港特别行政区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">澳门特别行政区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">海外</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">北京市</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">东城区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">西城区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">朝阳区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">丰台区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">石景山区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">海淀区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">门头沟区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">房山区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">通州区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">顺义区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">昌平区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">大兴区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">怀柔区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">平谷区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">密云区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">延庆区</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker van-area">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -330px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">北京市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">天津市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">河北省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">山西省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">内蒙古自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">辽宁省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">吉林省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">黑龙江省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">上海市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">江苏省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">浙江省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">安徽省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">福建省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">江西省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">山东省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">河南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">湖北省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">湖南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">广东省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">广西壮族自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">海南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">重庆市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">四川省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">贵州省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">云南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">西藏自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">陕西省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">甘肃省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">青海省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">宁夏回族自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">新疆维吾尔自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">台湾省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">香港特别行政区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">澳门特别行政区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">海外</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">杭州市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">宁波市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">温州市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">嘉兴市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">湖州市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">绍兴市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">金华市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">衢州市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">舟山市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">台州市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">丽水市</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">鹿城区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">龙湾区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">瓯海区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">洞头区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">永嘉县</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">平阳县</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">苍南县</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">文成县</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">泰顺县</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">瑞安市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">乐清市</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker van-area">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">北京市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">天津市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">河北省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">山西省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">内蒙古自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">辽宁省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">吉林省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">黑龙江省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">上海市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">江苏省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">浙江省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">安徽省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">福建省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">江西省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">山东省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">河南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">湖北省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">湖南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">广东省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">广西壮族自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">海南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">重庆市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">四川省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">贵州省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">云南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">西藏自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">陕西省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">甘肃省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">青海省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">宁夏回族自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">新疆维吾尔自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">台湾省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">香港特别行政区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">澳门特别行政区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">海外</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">北京市</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker van-area">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">请选择</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">北京市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">天津市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">河北省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">山西省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">内蒙古自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">辽宁省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">吉林省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">黑龙江省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">上海市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">江苏省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">浙江省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">安徽省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">福建省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">江西省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">山东省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">河南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">湖北省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">湖南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">广东省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">广西壮族自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">海南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">重庆市</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">四川省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">贵州省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">云南省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">西藏自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">陕西省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">甘肃省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">青海省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">宁夏回族自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">新疆维吾尔自治区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">台湾省</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">香港特别行政区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">澳门特别行政区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">海外</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"></ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"></ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/area/test/__snapshots__/demo.spec.js.snap b/src/area/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..bbaf02dc8
--- /dev/null
+++ b/src/area/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,649 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-picker van-area">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">标题</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">北京市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">天津市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">河北省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">山西省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">内蒙古自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">辽宁省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">吉林省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">黑龙江省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">上海市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">江苏省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">浙江省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">安徽省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">福建省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">江西省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">山东省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">河南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">湖北省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">湖南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">广东省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">广西壮族自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">海南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">重庆市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">四川省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">贵州省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">云南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">西藏自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">陕西省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">甘肃省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">青海省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">宁夏回族自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">新疆维吾尔自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">台湾省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">香港特别行政区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">澳门特别行政区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">海外</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">北京市</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">东城区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">西城区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">朝阳区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">丰台区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">石景山区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">海淀区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">门头沟区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">房山区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">通州区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">顺义区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">昌平区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">大兴区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">怀柔区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">平谷区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">密云区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">延庆区</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker van-area">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">标题</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, -330px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">北京市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">天津市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">河北省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">山西省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">内蒙古自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">辽宁省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">吉林省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">黑龙江省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">上海市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">江苏省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">浙江省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">安徽省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">福建省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">江西省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">山东省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">河南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">湖北省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">湖南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">广东省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">广西壮族自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">海南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">重庆市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">四川省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">贵州省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">云南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">西藏自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">陕西省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">甘肃省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">青海省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">宁夏回族自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">新疆维吾尔自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">台湾省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">香港特别行政区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">澳门特别行政区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">海外</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">杭州市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">宁波市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">温州市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">嘉兴市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">湖州市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">绍兴市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">金华市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">衢州市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">舟山市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">台州市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">丽水市</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">鹿城区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">龙湾区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">瓯海区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">洞头区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">永嘉县</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">平阳县</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">苍南县</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">文成县</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">泰顺县</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">瑞安市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">乐清市</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker van-area">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">标题</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">北京市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">天津市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">河北省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">山西省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">内蒙古自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">辽宁省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">吉林省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">黑龙江省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">上海市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">江苏省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">浙江省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">安徽省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">福建省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">江西省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">山东省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">河南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">湖北省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">湖南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">广东省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">广西壮族自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">海南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">重庆市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">四川省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">贵州省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">云南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">西藏自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">陕西省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">甘肃省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">青海省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">宁夏回族自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">新疆维吾尔自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">台湾省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">香港特别行政区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">澳门特别行政区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">海外</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">北京市</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker van-area">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">标题</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">请选择</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">北京市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">天津市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">河北省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">山西省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">内蒙古自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">辽宁省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">吉林省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">黑龙江省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">上海市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">江苏省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">浙江省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">安徽省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">福建省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">江西省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">山东省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">河南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">湖北省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">湖南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">广东省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">广西壮族自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">海南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">重庆市</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">四川省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">贵州省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">云南省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">西藏自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">陕西省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">甘肃省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">青海省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">宁夏回族自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">新疆维吾尔自治区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">台湾省</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">香港特别行政区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">澳门特别行政区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">海外</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper"></ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper"></ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+`;
diff --git a/src/area/test/demo.legacy.js b/src/area/test/demo.spec.js
similarity index 100%
rename from src/area/test/demo.legacy.js
rename to src/area/test/demo.spec.js
diff --git a/src/button/test/__snapshots__/demo.legacy.js.snap b/src/button/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 466a4c918..000000000
--- a/src/button/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="demo-button-row"><button class="van-button van-button--primary van-button--normal">
-        <div class="van-button__content"><span class="van-button__text">主要按钮</span></div>
-      </button> <button class="van-button van-button--info van-button--normal">
-        <div class="van-button__content"><span class="van-button__text">信息按钮</span></div>
-      </button> <button class="van-button van-button--default van-button--normal">
-        <div class="van-button__content"><span class="van-button__text">默认按钮</span></div>
-      </button></div> <button class="van-button van-button--danger van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">危险按钮</span></div>
-    </button> <button class="van-button van-button--warning van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">警告按钮</span></div>
-    </button>
-  </div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--plain">
-      <div class="van-button__content"><span class="van-button__text">朴素按钮</span></div>
-    </button> <button class="van-button van-button--info van-button--normal van-button--plain">
-      <div class="van-button__content"><span class="van-button__text">朴素按钮</span></div>
-    </button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround">
-      <div class="van-button__content"><span class="van-button__text">细边框按钮</span></div>
-    </button> <button class="van-button van-button--info van-button--normal van-button--plain van-button--hairline van-hairline--surround">
-      <div class="van-button__content"><span class="van-button__text">细边框按钮</span></div>
-    </button></div>
-  <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled">
-      <div class="van-button__content"><span class="van-button__text">禁用状态</span></div>
-    </button> <button disabled="disabled" class="van-button van-button--info van-button--normal van-button--disabled">
-      <div class="van-button__content"><span class="van-button__text">禁用状态</span></div>
-    </button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--loading">
-      <div class="van-button__content">
-        <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; 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>
-    </button> <button class="van-button van-button--primary van-button--normal van-button--loading">
-      <div class="van-button__content">
-        <div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: currentColor; 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>
-      </div>
-    </button> <button class="van-button van-button--info van-button--normal van-button--loading">
-      <div class="van-button__content">
-        <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; 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><span class="van-button__text">加载中...</span>
-      </div>
-    </button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--square">
-      <div class="van-button__content"><span class="van-button__text">方形按钮</span></div>
-    </button> <button class="van-button van-button--info van-button--normal van-button--round">
-      <div class="van-button__content"><span class="van-button__text">圆形按钮</span></div>
-    </button></div>
-  <div><button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><i class="van-icon van-icon-plus van-button__icon">
-          <!----></i></div>
-    </button> <button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><i class="van-icon van-icon-plus van-button__icon">
-          <!----></i><span class="van-button__text">按钮</span></div>
-    </button> <button class="van-button van-button--info van-button--normal van-button--plain">
-      <div class="van-button__content"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/user-active.png" class="van-icon__image">
-          <!----></i><span class="van-button__text">按钮</span></div>
-    </button></div>
-  <div><button class="van-button van-button--primary van-button--large">
-      <div class="van-button__content"><span class="van-button__text">大号按钮</span></div>
-    </button> <button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">普通按钮</span></div>
-    </button> <button class="van-button van-button--primary van-button--small">
-      <div class="van-button__content"><span class="van-button__text">小型按钮</span></div>
-    </button> <button class="van-button van-button--primary van-button--mini">
-      <div class="van-button__content"><span class="van-button__text">迷你按钮</span></div>
-    </button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--block">
-      <div class="van-button__content"><span class="van-button__text">块级元素</span></div>
-    </button></div>
-  <div><button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">URL 跳转</span></div>
-    </button> <button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">路由跳转</span></div>
-    </button></div>
-  <div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
-      <div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
-    </button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;">
-      <div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
-    </button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;">
-      <div class="van-button__content"><span class="van-button__text">渐变色按钮</span></div>
-    </button></div>
-</div>
-`;
diff --git a/src/button/test/__snapshots__/demo.spec.js.snap b/src/button/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..d847cc8f1
--- /dev/null
+++ b/src/button/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="demo-button-row"><button type="button" class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content">
+        <!----><span class="van-button__text">主要按钮</span>
+        <!---->
+      </div>
+    </button><button type="button" class="van-button van-button--success van-button--normal">
+      <div class="van-button__content">
+        <!----><span class="van-button__text">成功按钮</span>
+        <!---->
+      </div>
+    </button><button type="button" class="van-button van-button--default van-button--normal">
+      <div class="van-button__content">
+        <!----><span class="van-button__text">默认按钮</span>
+        <!---->
+      </div>
+    </button></div><button type="button" class="van-button van-button--danger van-button--normal">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">危险按钮</span>
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--warning van-button--normal">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">警告按钮</span>
+      <!---->
+    </div>
+  </button>
+</div>
+<div><button type="button" class="van-button van-button--primary van-button--normal van-button--plain">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">朴素按钮</span>
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--success van-button--normal van-button--plain">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">朴素按钮</span>
+      <!---->
+    </div>
+  </button></div>
+<div><button type="button" class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">细边框按钮</span>
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--success van-button--normal van-button--plain van-button--hairline van-hairline--surround">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">细边框按钮</span>
+      <!---->
+    </div>
+  </button></div>
+<div><button type="button" class="van-button van-button--primary van-button--normal van-button--disabled" disabled="">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">禁用状态</span>
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--success van-button--normal van-button--disabled" disabled="">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">禁用状态</span>
+      <!---->
+    </div>
+  </button></div>
+<div><button type="button" class="van-button van-button--primary van-button--normal van-button--loading">
+    <div class="van-button__content">
+      <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--primary van-button--normal van-button--loading">
+    <div class="van-button__content">
+      <div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: currentColor; 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>
+      <!---->
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--success van-button--normal van-button--loading">
+    <div class="van-button__content">
+      <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span>
+        <!---->
+      </div><span class="van-button__text">加载中...</span>
+      <!---->
+    </div>
+  </button></div>
+<div><button type="button" class="van-button van-button--primary van-button--normal van-button--square">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">方形按钮</span>
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--success van-button--normal van-button--round">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">圆形按钮</span>
+      <!---->
+    </div>
+  </button></div>
+<div><button type="button" class="van-button van-button--primary van-button--normal">
+    <div class="van-button__content"><i class="van-badge__wrapper van-icon van-icon-plus van-button__icon">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--primary van-button--normal">
+    <div class="van-button__content"><i class="van-badge__wrapper van-icon van-icon-plus van-button__icon">
+        <!---->
+        <!---->
+        <!----></i><span class="van-button__text">按钮</span>
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--primary van-button--normal van-button--plain">
+    <div class="van-button__content"><i class="van-badge__wrapper van-icon van-button__icon">
+        <!----><img class="van-icon__image" src="https://img.yzcdn.cn/vant/user-active.png">
+        <!----></i><span class="van-button__text">按钮</span>
+      <!---->
+    </div>
+  </button></div>
+<div><button type="button" class="van-button van-button--primary van-button--large">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">大号按钮</span>
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--primary van-button--normal">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">普通按钮</span>
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--primary van-button--small">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">小型按钮</span>
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--primary van-button--mini">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">迷你按钮</span>
+      <!---->
+    </div>
+  </button></div>
+<div><button type="button" class="van-button van-button--primary van-button--normal van-button--block">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">块级元素</span>
+      <!---->
+    </div>
+  </button></div>
+<div><button type="button" class="van-button van-button--primary van-button--normal">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">URL 跳转</span>
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--primary van-button--normal">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">路由跳转</span>
+      <!---->
+    </div>
+  </button></div>
+<div><button type="button" class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">单色按钮</span>
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">单色按钮</span>
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">渐变色按钮</span>
+      <!---->
+    </div>
+  </button></div>
+`;
diff --git a/src/button/test/demo.legacy.js b/src/button/test/demo.spec.js
similarity index 100%
rename from src/button/test/demo.legacy.js
rename to src/button/test/demo.spec.js
diff --git a/src/calendar/test/__snapshots__/demo.legacy.js.snap b/src/calendar/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index b0a56dda3..000000000
--- a/src/calendar/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,183 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>选择单个日期</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>选择多个日期</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>选择日期区间</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>选择单个日期</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>选择日期区间</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义颜色</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义日期范围</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义按钮文字</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义日期文案</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义弹出位置</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>日期区间最大范围</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义周起始日</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div class="van-calendar" style="height: 500px;">
-      <div class="van-calendar__header">
-        <div class="van-calendar__header-title">日历</div>
-        <div class="van-calendar__header-subtitle">2012年1月</div>
-        <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
-      </div>
-      <div class="van-calendar__body">
-        <div class="van-calendar__month" style="padding-bottom: 0px;">
-          <div role="grid" class="van-calendar__days">
-            <div class="van-calendar__month-mark">1</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 0%;">1</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">
-              <div class="van-calendar__selected-day">10</div>
-            </div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">21</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">22</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">23</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">24</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">25</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">26</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">27</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">28</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">29</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">30</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">31</div>
-          </div>
-        </div>
-        <div class="van-calendar__month" style="padding-bottom: 0px;">
-          <div class="van-calendar__month-title">2012年2月</div>
-          <div role="grid" class="van-calendar__days">
-            <div class="van-calendar__month-mark">2</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day" style="margin-left: 42.857142857142854%;">1</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">2</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">3</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">4</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">5</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">8</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">9</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">10</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">21</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">22</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">23</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">24</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">25</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">26</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">27</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">28</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">29</div>
-          </div>
-        </div>
-        <div class="van-calendar__month" style="padding-bottom: 0px;">
-          <div class="van-calendar__month-title">2012年3月</div>
-          <div role="grid" class="van-calendar__days">
-            <div class="van-calendar__month-mark">3</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">2</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">3</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">4</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">5</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">8</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">9</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">10</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
-          </div>
-        </div>
-      </div>
-      <div class="van-calendar__footer"></div>
-    </div>
-  </div>
-  <!---->
-</div>
-`;
diff --git a/src/calendar/test/__snapshots__/demo.spec.js.snap b/src/calendar/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..a17c78aed
--- /dev/null
+++ b/src/calendar/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,174 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>选择单个日期</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>选择多个日期</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>选择日期区间</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>选择单个日期</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>选择日期区间</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>自定义颜色</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>自定义日期范围</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>自定义按钮文字</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>自定义日期文案</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>自定义弹出位置</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>日期区间最大范围</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>自定义周起始日</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-calendar" style="height: 500px;">
+    <div class="van-calendar__header">
+      <div class="van-calendar__header-title">日历</div>
+      <div class="van-calendar__header-subtitle"></div>
+      <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
+    </div>
+    <div class="van-calendar__body">
+      <div class="van-calendar__month" style="padding-bottom: 0px;">
+        <!---->
+        <div></div>
+      </div>
+      <div class="van-calendar__month" style="padding-bottom: 0px;">
+        <div class="van-calendar__month-title">2012年2月</div>
+        <div></div>
+      </div>
+      <div class="van-calendar__month" style="padding-bottom: 0px;">
+        <div class="van-calendar__month-title">2012年3月</div>
+        <div></div>
+      </div>
+    </div>
+    <div class="van-calendar__footer">
+      <!---->
+    </div>
+  </div>
+</div>
+<transition-stub>
+  <!---->
+</transition-stub>
+<transition-stub>
+  <!---->
+</transition-stub>
+`;
diff --git a/src/calendar/test/demo.legacy.js b/src/calendar/test/demo.spec.js
similarity index 100%
rename from src/calendar/test/demo.legacy.js
rename to src/calendar/test/demo.spec.js
diff --git a/src/card/test/__snapshots__/demo.legacy.js.snap b/src/card/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 327abe557..000000000
--- a/src/card/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,93 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-card">
-      <div class="van-card__header"><a class="van-card__thumb">
-          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                <!----></i></div>
-          </div>
-        </a>
-        <div class="van-card__content">
-          <div>
-            <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
-            <div class="van-card__desc van-ellipsis">描述信息</div>
-          </div>
-          <div class="van-card__bottom">
-            <div class="van-card__price">
-              <div><span class="van-card__price-currency">¥</span><span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
-            </div>
-            <div class="van-card__num">x2</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-card">
-      <div class="van-card__header"><a class="van-card__thumb">
-          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                <!----></i></div>
-          </div>
-          <div class="van-card__tag"><span class="van-tag van-tag--mark van-tag--danger">标签</span></div>
-        </a>
-        <div class="van-card__content">
-          <div>
-            <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
-            <div class="van-card__desc van-ellipsis">描述信息</div>
-          </div>
-          <div class="van-card__bottom">
-            <div class="van-card__price">
-              <div><span class="van-card__price-currency">¥</span><span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
-            </div>
-            <div class="van-card__origin-price">¥ 10.00</div>
-            <div class="van-card__num">x2</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-card">
-      <div class="van-card__header"><a class="van-card__thumb">
-          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                <!----></i></div>
-          </div>
-        </a>
-        <div class="van-card__content">
-          <div>
-            <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
-            <div class="van-card__desc van-ellipsis">描述信息</div>
-            <div><span class="van-tag van-tag--plain van-tag--danger" style="margin-right: 5px;">
-            标签
-          </span> <span class="van-tag van-tag--plain van-tag--danger">
-            标签
-          </span></div>
-          </div>
-          <div class="van-card__bottom">
-            <div class="van-card__price">
-              <div><span class="van-card__price-currency">¥</span><span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
-            </div>
-            <div class="van-card__num">x2</div>
-          </div>
-        </div>
-      </div>
-      <div class="van-card__footer">
-        <div><button class="van-button van-button--default van-button--mini van-button--round">
-            <div class="van-button__content"><span class="van-button__text">
-            按钮
-          </span></div>
-          </button> <button class="van-button van-button--default van-button--mini van-button--round">
-            <div class="van-button__content"><span class="van-button__text">
-            按钮
-          </span></div>
-          </button></div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/card/test/__snapshots__/demo.spec.js.snap b/src/card/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..9e03c521f
--- /dev/null
+++ b/src/card/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-card">
+    <div class="van-card__header"><a class="van-card__thumb">
+        <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+        <!---->
+      </a>
+      <div class="van-card__content">
+        <div>
+          <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
+          <div class="van-card__desc van-ellipsis">描述信息</div>
+          <!---->
+        </div>
+        <div class="van-card__bottom">
+          <!---->
+          <div class="van-card__price">
+            <div><span class="van-card__price-currency">¥</span><span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
+          </div>
+          <!---->
+          <div class="van-card__num">x2</div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-card">
+    <div class="van-card__header"><a class="van-card__thumb">
+        <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+        <div class="van-card__tag">
+          <transition-stub><span class="van-tag van-tag--mark van-tag--danger">标签<!----></span></transition-stub>
+        </div>
+      </a>
+      <div class="van-card__content">
+        <div>
+          <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
+          <div class="van-card__desc van-ellipsis">描述信息</div>
+          <!---->
+        </div>
+        <div class="van-card__bottom">
+          <!---->
+          <div class="van-card__price">
+            <div><span class="van-card__price-currency">¥</span><span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
+          </div>
+          <div class="van-card__origin-price">¥ 10.00</div>
+          <div class="van-card__num">x2</div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-card">
+    <div class="van-card__header"><a class="van-card__thumb">
+        <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+        <!---->
+      </a>
+      <div class="van-card__content">
+        <div>
+          <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
+          <div class="van-card__desc van-ellipsis">描述信息</div>
+          <div>
+            <transition-stub style="margin-right: 5px;"><span class="van-tag van-tag--plain van-tag--danger"> 标签 <!----></span></transition-stub>
+            <transition-stub><span class="van-tag van-tag--plain van-tag--danger"> 标签 <!----></span></transition-stub>
+          </div>
+        </div>
+        <div class="van-card__bottom">
+          <!---->
+          <div class="van-card__price">
+            <div><span class="van-card__price-currency">¥</span><span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
+          </div>
+          <!---->
+          <div class="van-card__num">x2</div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <div class="van-card__footer">
+      <div><button type="button" class="van-button van-button--default van-button--mini van-button--round">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">按钮</span>
+            <!---->
+          </div>
+        </button><button type="button" class="van-button van-button--default van-button--mini van-button--round">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">按钮</span>
+            <!---->
+          </div>
+        </button></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/card/test/demo.legacy.js b/src/card/test/demo.spec.js
similarity index 100%
rename from src/card/test/demo.legacy.js
rename to src/card/test/demo.spec.js
diff --git a/src/cell/test/__snapshots__/demo.legacy.js.snap b/src/cell/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index aa03c8674..000000000
--- a/src/cell/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,110 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-cell-group van-hairline--top-bottom">
-      <div class="van-cell">
-        <div class="van-cell__title"><span>单元格</span></div>
-        <div class="van-cell__value"><span>内容</span></div>
-      </div>
-      <div class="van-cell">
-        <div class="van-cell__title"><span>单元格</span>
-          <div class="van-cell__label">描述信息</div>
-        </div>
-        <div class="van-cell__value"><span>内容</span></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell van-cell--large">
-      <div class="van-cell__title"><span>单元格</span></div>
-      <div class="van-cell__value"><span>内容</span></div>
-    </div>
-    <div class="van-cell van-cell--large">
-      <div class="van-cell__title"><span>单元格</span>
-        <div class="van-cell__label">描述信息</div>
-      </div>
-      <div class="van-cell__value"><span>内容</span></div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell"><i class="van-icon van-icon-location-o van-cell__left-icon">
-        <!----></i>
-      <div class="van-cell__title"><span>单元格</span></div>
-      <div class="van-cell__value"><span>内容</span></div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell">
-      <div class="van-cell__value van-cell__value--alone"><span>内容</span></div>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>单元格</span></div>
-      <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>单元格</span></div>
-      <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow-down van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>URL 跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>路由跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div>
-      <div class="van-cell-group__title">分组 1</div>
-      <div class="van-cell-group van-hairline--top-bottom">
-        <div class="van-cell">
-          <div class="van-cell__title"><span>单元格</span></div>
-          <div class="van-cell__value"><span>内容</span></div>
-        </div>
-      </div>
-    </div>
-    <div>
-      <div class="van-cell-group__title">分组 2</div>
-      <div class="van-cell-group van-hairline--top-bottom">
-        <div class="van-cell">
-          <div class="van-cell__title"><span>单元格</span></div>
-          <div class="van-cell__value"><span>内容</span></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span class="custom-title">单元格</span> <span class="van-tag van-tag--danger">标签</span></div>
-      <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div class="van-cell"><i class="van-icon van-icon-shop-o van-cell__left-icon">
-        <!----></i>
-      <div class="van-cell__title"><span>单元格</span></div><i class="search-icon van-icon van-icon-search">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell van-cell--center">
-      <div class="van-cell__title"><span>单元格</span>
-        <div class="van-cell__label">描述信息</div>
-      </div>
-      <div class="van-cell__value"><span>内容</span></div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/cell/test/__snapshots__/demo.spec.js.snap b/src/cell/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..49a94d16d
--- /dev/null
+++ b/src/cell/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,191 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-cell-group van-hairline--top-bottom">
+    <div class="van-cell">
+      <!---->
+      <div class="van-cell__title"><span>单元格</span>
+        <!---->
+      </div>
+      <div class="van-cell__value"><span>内容</span></div>
+      <!---->
+      <!---->
+    </div>
+    <div class="van-cell">
+      <!---->
+      <div class="van-cell__title"><span>单元格</span>
+        <div class="van-cell__label">描述信息</div>
+      </div>
+      <div class="van-cell__value"><span>内容</span></div>
+      <!---->
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--large">
+    <!---->
+    <div class="van-cell__title"><span>单元格</span>
+      <!---->
+    </div>
+    <div class="van-cell__value"><span>内容</span></div>
+    <!---->
+    <!---->
+  </div>
+  <div class="van-cell van-cell--large">
+    <!---->
+    <div class="van-cell__title"><span>单元格</span>
+      <div class="van-cell__label">描述信息</div>
+    </div>
+    <div class="van-cell__value"><span>内容</span></div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell"><i class="van-badge__wrapper van-icon van-icon-location-o van-cell__left-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <div class="van-cell__title"><span>单元格</span>
+      <!---->
+    </div>
+    <div class="van-cell__value"><span>内容</span></div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell">
+    <!---->
+    <!---->
+    <div class="van-cell__value van-cell__value--alone"><span>内容</span></div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>单元格</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>单元格</span>
+      <!---->
+    </div>
+    <div class="van-cell__value"><span>内容</span></div><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>单元格</span>
+      <!---->
+    </div>
+    <div class="van-cell__value"><span>内容</span></div><i class="van-badge__wrapper van-icon van-icon-arrow-down van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>URL 跳转</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>路由跳转</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell-group__title">分组 1</div>
+  <div class="van-cell-group van-hairline--top-bottom">
+    <div class="van-cell">
+      <!---->
+      <div class="van-cell__title"><span>单元格</span>
+        <!---->
+      </div>
+      <div class="van-cell__value"><span>内容</span></div>
+      <!---->
+      <!---->
+    </div>
+  </div>
+  <div class="van-cell-group__title">分组 2</div>
+  <div class="van-cell-group van-hairline--top-bottom">
+    <div class="van-cell">
+      <!---->
+      <div class="van-cell__title"><span>单元格</span>
+        <!---->
+      </div>
+      <div class="van-cell__value"><span>内容</span></div>
+      <!---->
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span class="custom-title">单元格</span>
+      <transition-stub><span class="van-tag van-tag--danger">标签<!----></span></transition-stub>
+      <!---->
+    </div>
+    <div class="van-cell__value"><span>内容</span></div><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell"><i class="van-badge__wrapper van-icon van-icon-shop-o van-cell__left-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <div class="van-cell__title"><span>单元格</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-search search-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--center">
+    <!---->
+    <div class="van-cell__title"><span>单元格</span>
+      <div class="van-cell__label">描述信息</div>
+    </div>
+    <div class="van-cell__value"><span>内容</span></div>
+    <!---->
+    <!---->
+  </div>
+</div>
+`;
diff --git a/src/cell/test/demo.legacy.js b/src/cell/test/demo.spec.js
similarity index 100%
rename from src/cell/test/demo.legacy.js
rename to src/cell/test/demo.spec.js
diff --git a/src/checkbox/test/__snapshots__/demo.legacy.js.snap b/src/checkbox/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index d0eee0534..000000000
--- a/src/checkbox/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,150 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
-      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
-          <!----></i></div><span class="van-checkbox__label">复选框</span>
-    </div>
-  </div>
-  <div>
-    <div role="checkbox" tabindex="-1" aria-checked="false" class="van-checkbox van-checkbox--disabled">
-      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled"><i class="van-icon van-icon-success">
-          <!----></i></div><span class="van-checkbox__label van-checkbox__label--disabled">
-      复选框
-    </span>
-    </div>
-    <div role="checkbox" tabindex="-1" aria-checked="true" class="van-checkbox van-checkbox--disabled">
-      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked"><i class="van-icon van-icon-success">
-          <!----></i></div><span class="van-checkbox__label van-checkbox__label--disabled">
-      复选框
-    </span>
-    </div>
-  </div>
-  <div>
-    <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
-      <div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"><i class="van-icon van-icon-success">
-          <!----></i></div><span class="van-checkbox__label">
-      自定义颜色
-    </span>
-    </div>
-  </div>
-  <div>
-    <div role="checkbox" tabindex="0" aria-checked="true" 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: rgb(7, 193, 96);">
-          <!----></i></div><span class="van-checkbox__label">
-      自定义颜色
-    </span>
-    </div>
-  </div>
-  <div>
-    <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
-      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked" style="font-size: 24px;"><i class="van-icon van-icon-success">
-          <!----></i></div><span class="van-checkbox__label">
-      自定义大小
-    </span>
-    </div>
-  </div>
-  <div>
-    <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
-      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><img src="https://img.yzcdn.cn/vant/user-active.png"></div><span class="van-checkbox__label">
-      自定义图标
-      </span>
-    </div>
-  </div>
-  <div>
-    <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-checkbox--label-disabled">
-      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
-          <!----></i></div><span class="van-checkbox__label">
-      复选框
-    </span>
-    </div>
-  </div>
-  <div>
-    <div class="van-checkbox-group">
-      <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
-        <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-checkbox__label">复选框 a</span>
-      </div>
-      <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
-        <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-checkbox__label">复选框 b</span>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-checkbox-group van-checkbox-group--horizontal">
-      <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
-        <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-checkbox__label">复选框 a</span>
-      </div>
-      <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
-        <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-checkbox__label">复选框 b</span>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-checkbox-group">
-      <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
-        <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-checkbox__label">复选框 a</span>
-      </div>
-      <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
-        <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-checkbox__label">复选框 b</span>
-      </div>
-      <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
-        <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-checkbox__label">复选框 c</span>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-checkbox-group">
-      <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
-        <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-checkbox__label">复选框 a</span>
-      </div>
-      <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
-        <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-checkbox__label">复选框 b</span>
-      </div>
-      <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
-        <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-checkbox__label">复选框 c</span>
-      </div>
-    </div>
-    <div class="demo-checkbox-buttons"><button class="van-button van-button--primary van-button--normal">
-        <div class="van-button__content"><span class="van-button__text">
-        全选
-      </span></div>
-      </button> <button class="van-button van-button--info van-button--normal">
-        <div class="van-button__content"><span class="van-button__text">
-        反选
-      </span></div>
-      </button></div>
-  </div>
-  <div>
-    <div class="van-checkbox-group">
-      <div class="van-cell-group van-hairline--top-bottom">
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-          <div class="van-cell__title"><span>复选框 a</span></div>
-          <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
-            <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
-                <!----></i></div>
-          </div>
-        </div>
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-          <div class="van-cell__title"><span>复选框 b</span></div>
-          <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
-            <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
-                <!----></i></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/checkbox/test/__snapshots__/demo.spec.js.snap b/src/checkbox/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..755ccbf91
--- /dev/null
+++ b/src/checkbox/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="true" bindgroup="true">
+    <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+        <!---->
+        <!---->
+        <!----></i></div><span class="van-checkbox__label">复选框</span>
+  </div>
+</div>
+<div>
+  <div role="checkbox" class="van-checkbox van-checkbox--disabled" tabindex="-1" aria-checked="false" bindgroup="true">
+    <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled"><i class="van-badge__wrapper van-icon van-icon-success">
+        <!---->
+        <!---->
+        <!----></i></div><span class="van-checkbox__label van-checkbox__label--disabled">复选框</span>
+  </div>
+  <div role="checkbox" class="van-checkbox van-checkbox--disabled" tabindex="-1" aria-checked="true" bindgroup="true">
+    <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+        <!---->
+        <!---->
+        <!----></i></div><span class="van-checkbox__label van-checkbox__label--disabled">复选框</span>
+  </div>
+</div>
+<div>
+  <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="true" bindgroup="true">
+    <div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+        <!---->
+        <!---->
+        <!----></i></div><span class="van-checkbox__label">自定义颜色</span>
+  </div>
+</div>
+<div>
+  <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="true" bindgroup="true">
+    <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
+        <!---->
+        <!---->
+        <!----></i></div><span class="van-checkbox__label">自定义颜色</span>
+  </div>
+</div>
+<div>
+  <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="true" bindgroup="true">
+    <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked" style="font-size: 24px;"><i class="van-badge__wrapper van-icon van-icon-success">
+        <!---->
+        <!---->
+        <!----></i></div><span class="van-checkbox__label">自定义大小</span>
+  </div>
+</div>
+<div>
+  <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="true" bindgroup="true">
+    <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><img src="https://img.yzcdn.cn/vant/user-active.png"></div><span class="van-checkbox__label">自定义图标 </span>
+  </div>
+</div>
+<div>
+  <div role="checkbox" class="van-checkbox van-checkbox--label-disabled" tabindex="0" aria-checked="true" bindgroup="true">
+    <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+        <!---->
+        <!---->
+        <!----></i></div><span class="van-checkbox__label">复选框</span>
+  </div>
+</div>
+<div>
+  <div class="van-checkbox-group">
+    <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="true" bindgroup="true">
+      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-checkbox__label">复选框 a</span>
+    </div>
+    <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="true" bindgroup="true">
+      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-checkbox__label">复选框 b</span>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-checkbox-group van-checkbox-group--horizontal">
+    <div role="checkbox" class="van-checkbox van-checkbox--horizontal" tabindex="0" aria-checked="false" bindgroup="true">
+      <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-checkbox__label">复选框 a</span>
+    </div>
+    <div role="checkbox" class="van-checkbox van-checkbox--horizontal" tabindex="0" aria-checked="false" bindgroup="true">
+      <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-checkbox__label">复选框 b</span>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-checkbox-group">
+    <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="false" bindgroup="true">
+      <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-checkbox__label">复选框 a</span>
+    </div>
+    <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="false" bindgroup="true">
+      <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-checkbox__label">复选框 b</span>
+    </div>
+    <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="false" bindgroup="true">
+      <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-checkbox__label">复选框 c</span>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-checkbox-group">
+    <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="false" bindgroup="true">
+      <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-checkbox__label">复选框 a</span>
+    </div>
+    <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="false" bindgroup="true">
+      <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-checkbox__label">复选框 b</span>
+    </div>
+    <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="false" bindgroup="true">
+      <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-checkbox__label">复选框 c</span>
+    </div>
+  </div>
+  <div class="demo-checkbox-buttons"><button type="button" class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content">
+        <!----><span class="van-button__text">全选</span>
+        <!---->
+      </div>
+    </button><button type="button" class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content">
+        <!----><span class="van-button__text">反选</span>
+        <!---->
+      </div>
+    </button></div>
+</div>
+<div>
+  <div class="van-checkbox-group">
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+        <!---->
+        <div class="van-cell__title"><span>复选框 a</span>
+          <!---->
+        </div>
+        <!---->
+        <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="false" bindgroup="true">
+          <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+        <!---->
+        <div class="van-cell__title"><span>复选框 b</span>
+          <!---->
+        </div>
+        <!---->
+        <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="false" bindgroup="true">
+          <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/checkbox/test/demo.legacy.js b/src/checkbox/test/demo.spec.js
similarity index 100%
rename from src/checkbox/test/demo.legacy.js
rename to src/checkbox/test/demo.spec.js
diff --git a/src/circle/test/__snapshots__/demo.legacy.js.snap b/src/circle/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 6e0db1b94..000000000
--- a/src/circle/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
-      </svg>
-      <div class="van-circle__text">70%</div>
-    </div>
-  </div>
-  <div>
-    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
-        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 60px;"></path>
-        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></path>
-      </svg>
-      <div class="van-circle__text">宽度定制</div>
-    </div>
-    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#ee0a24" class="van-circle__layer" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
-      </svg>
-      <div class="van-circle__text">颜色定制</div>
-    </div>
-    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
-        <defs>
-          <linearGradient id="van-circle-gradient-3" x1="100%" y1="0%" x2="0%" y2="0%">
-            <stop offset="0%" stop-color="#3fecff"></stop>
-            <stop offset="100%" stop-color="#6149f6"></stop>
-          </linearGradient>
-        </defs>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="url(#van-circle-gradient-3)" class="van-circle__layer" style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
-      </svg>
-      <div class="van-circle__text">渐变色</div>
-    </div>
-    <div class="van-circle" style="width: 100px; height: 100px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__layer" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
-      </svg>
-      <div class="van-circle__text">逆时针</div>
-    </div>
-    <div class="van-circle" style="width: 120px; height: 120px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#7232dd" class="van-circle__layer" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
-      </svg>
-      <div class="van-circle__text">大小定制</div>
-    </div>
-  </div>
-  <div style="margin-top: 15px;"><button class="van-button van-button--primary van-button--small">
-      <div class="van-button__content"><span class="van-button__text">增加</span></div>
-    </button> <button class="van-button van-button--danger van-button--small">
-      <div class="van-button__content"><span class="van-button__text">减少</span></div>
-    </button></div>
-</div>
-`;
diff --git a/src/circle/test/__snapshots__/demo.spec.js.snap b/src/circle/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..5daa89459
--- /dev/null
+++ b/src/circle/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+      <!---->
+      <path class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;" d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"></path>
+      <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 2198px 3140px;" class="van-circle__layer" stroke="#1989fa"></path>
+    </svg>
+    <div class="van-circle__text">70%</div>
+  </div>
+</div>
+<div>
+  <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
+      <!---->
+      <path class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 60px;" d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"></path>
+      <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" style="stroke: #1989fa; stroke-width: 61px; stroke-dasharray: 2198px 3140px;" class="van-circle__layer" stroke="#1989fa"></path>
+    </svg>
+    <div class="van-circle__text">宽度定制</div>
+  </div>
+  <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+      <!---->
+      <path class="van-circle__hover" style="fill: none; stroke: #ebedf0; stroke-width: 40px;" d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"></path>
+      <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;" class="van-circle__layer" stroke="#ee0a24"></path>
+    </svg>
+    <div class="van-circle__text">颜色定制</div>
+  </div>
+  <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+      <defs>
+        <linearGradient id="van-circle-3" x1="100%" y1="0%" x2="0%" y2="0%">
+          <stop offset="0%" stop-color="#3fecff"></stop>
+          <stop offset="100%" stop-color="#6149f6"></stop>
+        </linearGradient>
+      </defs>
+      <path class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;" d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"></path>
+      <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;" class="van-circle__layer" stroke="url(#van-circle-3)"></path>
+    </svg>
+    <div class="van-circle__text">渐变色</div>
+  </div>
+  <div class="van-circle" style="width: 100px; height: 100px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
+      <!---->
+      <path class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;" d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000"></path>
+      <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;" class="van-circle__layer" stroke="#07c160"></path>
+    </svg>
+    <div class="van-circle__text">逆时针</div>
+  </div>
+  <div class="van-circle" style="width: 120px; height: 120px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
+      <!---->
+      <path class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;" d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000"></path>
+      <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;" class="van-circle__layer" stroke="#7232dd"></path>
+    </svg>
+    <div class="van-circle__text">大小定制</div>
+  </div>
+</div>
+<div style="margin-top: 15px;"><button type="button" class="van-button van-button--primary van-button--small">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">增加</span>
+      <!---->
+    </div>
+  </button><button type="button" class="van-button van-button--danger van-button--small">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">减少</span>
+      <!---->
+    </div>
+  </button></div>
+`;
diff --git a/src/circle/test/demo.legacy.js b/src/circle/test/demo.spec.js
similarity index 100%
rename from src/circle/test/demo.legacy.js
rename to src/circle/test/demo.spec.js
diff --git a/src/col/test/__snapshots__/demo.legacy.js.snap b/src/col/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 7c04f9b40..000000000
--- a/src/col/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,58 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-row">
-      <div class="van-col van-col--8">span: 8</div>
-      <div class="van-col van-col--8">span: 8</div>
-      <div class="van-col van-col--8">span: 8</div>
-    </div>
-    <div class="van-row">
-      <div class="van-col van-col--4">span: 4</div>
-      <div class="van-col van-col--10 van-col--offset-4">
-        offset: 4, span: 10
-      </div>
-    </div>
-    <div class="van-row">
-      <div class="van-col van-col--12 van-col--offset-12">
-        offset: 12, span: 12
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-row">
-      <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">span: 8</div>
-      <div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">span: 8</div>
-      <div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">span: 8</div>
-    </div>
-  </div>
-  <div>
-    <div class="van-row van-row--flex">
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-    </div>
-    <div class="van-row van-row--flex van-row--justify-center">
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-    </div>
-    <div class="van-row van-row--flex van-row--justify-end">
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-    </div>
-    <div class="van-row van-row--flex van-row--justify-space-between">
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-    </div>
-    <div class="van-row van-row--flex van-row--justify-space-around">
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-      <div class="van-col van-col--6">span: 6</div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/col/test/__snapshots__/demo.spec.js.snap b/src/col/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..0a829387c
--- /dev/null
+++ b/src/col/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-row">
+    <div class="van-col van-col--8">span: 8</div>
+    <div class="van-col van-col--8">span: 8</div>
+    <div class="van-col van-col--8">span: 8</div>
+  </div>
+  <div class="van-row">
+    <div class="van-col van-col--4">span: 4</div>
+    <div class="van-col van-col--10 van-col--offset-4"> offset: 4, span: 10 </div>
+  </div>
+  <div class="van-row">
+    <div class="van-col van-col--12 van-col--offset-12"> offset: 12, span: 12 </div>
+  </div>
+</div>
+<div>
+  <div class="van-row">
+    <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">span: 8</div>
+    <div style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;" class="van-col van-col--8">span: 8</div>
+    <div style="padding-left: 13.333333333333332px;" class="van-col van-col--8">span: 8</div>
+  </div>
+</div>
+<div>
+  <div class="van-row van-row--justify-center">
+    <div class="van-col van-col--6">span: 6</div>
+    <div class="van-col van-col--6">span: 6</div>
+    <div class="van-col van-col--6">span: 6</div>
+  </div>
+  <div class="van-row van-row--justify-end">
+    <div class="van-col van-col--6">span: 6</div>
+    <div class="van-col van-col--6">span: 6</div>
+    <div class="van-col van-col--6">span: 6</div>
+  </div>
+  <div class="van-row van-row--justify-space-between">
+    <div class="van-col van-col--6">span: 6</div>
+    <div class="van-col van-col--6">span: 6</div>
+    <div class="van-col van-col--6">span: 6</div>
+  </div>
+  <div class="van-row van-row--justify-space-around">
+    <div class="van-col van-col--6">span: 6</div>
+    <div class="van-col van-col--6">span: 6</div>
+    <div class="van-col van-col--6">span: 6</div>
+  </div>
+</div>
+`;
diff --git a/src/col/test/demo.legacy.js b/src/col/test/demo.spec.js
similarity index 100%
rename from src/col/test/demo.legacy.js
rename to src/col/test/demo.spec.js
diff --git a/src/collapse/test/__snapshots__/demo.legacy.js.snap b/src/collapse/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 7cf23c149..000000000
--- a/src/collapse/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,102 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-collapse van-hairline--top-bottom">
-      <div class="van-collapse-item">
-        <div role="button" tabindex="0" aria-expanded="true" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
-          <div class="van-cell__title"><span>标题1</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-            <!----></i>
-        </div>
-        <div class="van-collapse-item__wrapper">
-          <div class="van-collapse-item__content">
-            代码是写出来给人看的，附带能在机器上运行
-          </div>
-        </div>
-      </div>
-      <div class="van-collapse-item van-collapse-item--border">
-        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
-          <div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-            <!----></i>
-        </div>
-      </div>
-      <div class="van-collapse-item van-collapse-item--border">
-        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
-          <div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-            <!----></i>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-collapse van-hairline--top-bottom">
-      <div class="van-collapse-item">
-        <div role="button" tabindex="0" aria-expanded="true" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
-          <div class="van-cell__title"><span>标题1</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-            <!----></i>
-        </div>
-        <div class="van-collapse-item__wrapper">
-          <div class="van-collapse-item__content">
-            代码是写出来给人看的，附带能在机器上运行
-          </div>
-        </div>
-      </div>
-      <div class="van-collapse-item van-collapse-item--border">
-        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
-          <div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-            <!----></i>
-        </div>
-      </div>
-      <div class="van-collapse-item van-collapse-item--border">
-        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
-          <div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-            <!----></i>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-collapse van-hairline--top-bottom">
-      <div class="van-collapse-item">
-        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
-          <div class="van-cell__title"><span>标题1</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-            <!----></i>
-        </div>
-      </div>
-      <div class="van-collapse-item van-collapse-item--border">
-        <div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
-          <div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-            <!----></i>
-        </div>
-      </div>
-      <div class="van-collapse-item van-collapse-item--border">
-        <div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
-          <div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-            <!----></i>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-collapse van-hairline--top-bottom">
-      <div class="van-collapse-item">
-        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
-          <div class="van-cell__title">
-            标题1<i class="van-icon van-icon-question-o">
-              <!----></i></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-            <!----></i>
-        </div>
-      </div>
-      <div class="van-collapse-item van-collapse-item--border">
-        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title"><i class="van-icon van-icon-shop-o van-cell__left-icon">
-            <!----></i>
-          <div class="van-cell__title"><span>标题2</span></div>
-          <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-            <!----></i>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/collapse/test/__snapshots__/demo.spec.js.snap b/src/collapse/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..901ab2698
--- /dev/null
+++ b/src/collapse/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-collapse van-hairline--top-bottom">
+    <div class="van-collapse-item">
+      <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded" role="button" tabindex="0" aria-expanded="true" disabled="false">
+        <!---->
+        <div class="van-cell__title"><span>标题1</span>
+          <!---->
+        </div>
+        <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-collapse-item__wrapper">
+        <div class="van-collapse-item__content">代码是写出来给人看的，附带能在机器上运行</div>
+      </div>
+    </div>
+    <div class="van-collapse-item van-collapse-item--border">
+      <div class="van-cell van-cell--clickable van-collapse-item__title" role="button" tabindex="0" aria-expanded="false" disabled="false">
+        <!---->
+        <div class="van-cell__title"><span>标题2</span>
+          <!---->
+        </div>
+        <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <div class="van-collapse-item van-collapse-item--border">
+      <div class="van-cell van-cell--clickable van-collapse-item__title" role="button" tabindex="0" aria-expanded="false" disabled="false">
+        <!---->
+        <div class="van-cell__title"><span>标题3</span>
+          <!---->
+        </div>
+        <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-collapse van-hairline--top-bottom">
+    <div class="van-collapse-item">
+      <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded" role="button" tabindex="0" aria-expanded="true" disabled="false">
+        <!---->
+        <div class="van-cell__title"><span>标题1</span>
+          <!---->
+        </div>
+        <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-collapse-item__wrapper">
+        <div class="van-collapse-item__content">代码是写出来给人看的，附带能在机器上运行</div>
+      </div>
+    </div>
+    <div class="van-collapse-item van-collapse-item--border">
+      <div class="van-cell van-cell--clickable van-collapse-item__title" role="button" tabindex="0" aria-expanded="false" disabled="false">
+        <!---->
+        <div class="van-cell__title"><span>标题2</span>
+          <!---->
+        </div>
+        <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <div class="van-collapse-item van-collapse-item--border">
+      <div class="van-cell van-cell--clickable van-collapse-item__title" role="button" tabindex="0" aria-expanded="false" disabled="false">
+        <!---->
+        <div class="van-cell__title"><span>标题3</span>
+          <!---->
+        </div>
+        <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-collapse van-hairline--top-bottom">
+    <div class="van-collapse-item">
+      <div class="van-cell van-cell--clickable van-collapse-item__title" role="button" tabindex="0" aria-expanded="false" disabled="false">
+        <!---->
+        <div class="van-cell__title"><span>标题1</span>
+          <!---->
+        </div>
+        <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <div class="van-collapse-item van-collapse-item--border">
+      <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled" role="button" tabindex="-1" aria-expanded="false" disabled="true">
+        <!---->
+        <div class="van-cell__title"><span>标题2</span>
+          <!---->
+        </div>
+        <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <div class="van-collapse-item van-collapse-item--border">
+      <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled" role="button" tabindex="-1" aria-expanded="false" disabled="true">
+        <!---->
+        <div class="van-cell__title"><span>标题3</span>
+          <!---->
+        </div>
+        <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-collapse van-hairline--top-bottom">
+    <div class="van-collapse-item">
+      <div class="van-cell van-cell--clickable van-collapse-item__title" role="button" tabindex="0" aria-expanded="false" disabled="false">
+        <!---->
+        <div class="van-cell__title">标题1<i class="van-badge__wrapper van-icon van-icon-question-o">
+            <!---->
+            <!---->
+            <!----></i>
+          <!---->
+        </div>
+        <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <div class="van-collapse-item van-collapse-item--border">
+      <div class="van-cell van-cell--clickable van-collapse-item__title" role="button" tabindex="0" aria-expanded="false" disabled="false"><i class="van-badge__wrapper van-icon van-icon-shop-o van-cell__left-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <div class="van-cell__title"><span>标题2</span>
+          <!---->
+        </div>
+        <div class="van-cell__value"><span>内容</span></div><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/collapse/test/demo.legacy.js b/src/collapse/test/demo.spec.js
similarity index 100%
rename from src/collapse/test/demo.legacy.js
rename to src/collapse/test/demo.spec.js
diff --git a/src/contact-card/test/__snapshots__/demo.legacy.js.snap b/src/contact-card/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 080c4b76f..000000000
--- a/src/contact-card/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--add"><i class="van-icon van-icon-add-square van-cell__left-icon">
-        <!----></i>
-      <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>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit"><i class="van-icon van-icon-contact van-cell__left-icon">
-        <!----></i>
-      <div class="van-cell__value van-cell__value--alone van-contact-card__value">
-        <div>张三：张三</div>
-        <div>电话：13000000000</div>
-      </div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell van-cell--center van-cell--borderless van-contact-card van-contact-card--edit"><i class="van-icon van-icon-contact van-cell__left-icon">
-        <!----></i>
-      <div class="van-cell__value van-cell__value--alone van-contact-card__value">
-        <div>张三：张三</div>
-        <div>电话：13000000000</div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/contact-card/test/__snapshots__/demo.spec.js.snap b/src/contact-card/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..e6654b778
--- /dev/null
+++ b/src/contact-card/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-cell van-cell--center van-cell--clickable van-cell--borderless van-contact-card van-contact-card--add" role="button" tabindex="0"><i class="van-badge__wrapper van-icon van-icon-add-square van-cell__left-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+    <div class="van-cell__value van-cell__value--alone van-contact-card__value">添加联系人</div><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--center van-cell--clickable van-cell--borderless van-contact-card van-contact-card--edit" role="button" tabindex="0"><i class="van-badge__wrapper van-icon van-icon-contact van-cell__left-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+    <div class="van-cell__value van-cell__value--alone van-contact-card__value">
+      <div>张三：张三</div>
+      <div>电话：13000000000</div>
+    </div><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--center van-cell--borderless van-contact-card van-contact-card--edit"><i class="van-badge__wrapper van-icon van-icon-contact van-cell__left-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+    <div class="van-cell__value van-cell__value--alone van-contact-card__value">
+      <div>张三：张三</div>
+      <div>电话：13000000000</div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+`;
diff --git a/src/contact-card/test/demo.legacy.js b/src/contact-card/test/demo.spec.js
similarity index 100%
rename from src/contact-card/test/demo.legacy.js
rename to src/contact-card/test/demo.spec.js
diff --git a/src/contact-edit/test/__snapshots__/demo.legacy.js.snap b/src/contact-edit/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index c185ae53b..000000000
--- a/src/contact-edit/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-contact-edit">
-      <div class="van-contact-edit__fields">
-        <div class="van-cell van-field">
-          <div class="van-cell__title van-field__label"><span>姓名</span></div>
-          <div class="van-cell__value van-field__value">
-            <div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></div>
-          </div>
-        </div>
-        <div class="van-cell van-field">
-          <div class="van-cell__title van-field__label"><span>电话</span></div>
-          <div class="van-cell__value van-field__value">
-            <div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div>
-          </div>
-        </div>
-      </div>
-      <div class="van-cell van-cell--borderless van-contact-edit__switch-cell">
-        <div class="van-cell__title"><span>设为默认联系人</span></div>
-        <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
-          <div class="van-switch__node"></div>
-        </div>
-      </div>
-      <div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
-          <div class="van-button__content"><span class="van-button__text">保存</span></div>
-        </button><button class="van-button van-button--default van-button--normal van-button--block van-button--round">
-          <div class="van-button__content"><span class="van-button__text">删除</span></div>
-        </button></div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/contact-edit/test/__snapshots__/demo.spec.js.snap b/src/contact-edit/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..9c0d20a47
--- /dev/null
+++ b/src/contact-edit/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div>
+    <div class="van-contact-edit">
+      <div class="van-contact-edit__fields">
+        <div class="van-cell van-field">
+          <!---->
+          <div class="van-cell__title van-field__label"><span>姓名</span>
+            <!---->
+          </div>
+          <div class="van-cell__value van-field__value">
+            <div class="van-field__body"><input type="text" class="van-field__control" placeholder="请填写姓名">
+              <!---->
+              <!---->
+              <!---->
+            </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 van-field__value">
+            <div class="van-field__body"><input type="tel" class="van-field__control" placeholder="请填写电话">
+              <!---->
+              <!---->
+              <!---->
+            </div>
+            <!---->
+            <!---->
+          </div>
+          <!---->
+          <!---->
+        </div>
+      </div>
+      <div class="van-cell van-cell--borderless van-contact-edit__switch-cell">
+        <!---->
+        <div class="van-cell__title"><span>设为默认联系人</span>
+          <!---->
+        </div>
+        <!---->
+        <div role="switch" class="van-switch" style="font-size: 24px;" aria-checked="false">
+          <div class="van-switch__node">
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div class="van-contact-edit__buttons"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">保存</span>
+            <!---->
+          </div>
+        </button><button type="button" class="van-button van-button--default van-button--normal van-button--block van-button--round">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">删除</span>
+            <!---->
+          </div>
+        </button></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/contact-edit/test/demo.legacy.js b/src/contact-edit/test/demo.spec.js
similarity index 100%
rename from src/contact-edit/test/demo.legacy.js
rename to src/contact-edit/test/demo.spec.js
diff --git a/src/contact-list/test/__snapshots__/demo.legacy.js.snap b/src/contact-list/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index e0365b24f..000000000
--- a/src/contact-list/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-contact-list">
-      <div role="radiogroup" class="van-radio-group van-contact-list__group">
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
-            <!----></i>
-          <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">张三，13000000000<span class="van-tag van-tag--round van-tag--danger van-contact-list__item-tag">默认</span></div>
-          <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-            <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
-                <!----></i></div>
-          </div>
-        </div>
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
-            <!----></i>
-          <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">李四，1310000000</div>
-          <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-            <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
-                <!----></i></div>
-          </div>
-        </div>
-      </div>
-      <div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
-          <div class="van-button__content"><span class="van-button__text">新建联系人</span></div>
-        </button></div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/contact-list/test/__snapshots__/demo.spec.js.snap b/src/contact-list/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..70f2a3455
--- /dev/null
+++ b/src/contact-list/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div>
+    <div class="van-contact-list">
+      <div class="van-radio-group van-contact-list__group" role="radiogroup">
+        <div class="van-cell van-cell--center van-cell--clickable van-contact-list__item" role="button" tabindex="0"><i class="van-badge__wrapper van-icon van-icon-edit van-contact-list__edit">
+            <!---->
+            <!---->
+            <!----></i>
+          <!---->
+          <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">张三，13000000000<transition-stub class="van-contact-list__item-tag"><span class="van-tag van-tag--round van-tag--danger">默认<!----></span></transition-stub>
+          </div>
+          <div role="radio" class="van-radio" tabindex="0" aria-checked="true">
+            <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
+                <!---->
+                <!---->
+                <!----></i></div>
+            <!---->
+          </div>
+          <!---->
+        </div>
+        <div class="van-cell van-cell--center van-cell--clickable van-contact-list__item" role="button" tabindex="0"><i class="van-badge__wrapper van-icon van-icon-edit van-contact-list__edit">
+            <!---->
+            <!---->
+            <!----></i>
+          <!---->
+          <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">李四，1310000000</div>
+          <div role="radio" class="van-radio" tabindex="0" aria-checked="false">
+            <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-badge__wrapper van-icon van-icon-success">
+                <!---->
+                <!---->
+                <!----></i></div>
+            <!---->
+          </div>
+          <!---->
+        </div>
+      </div>
+      <div class="van-contact-list__bottom"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">新建联系人</span>
+            <!---->
+          </div>
+        </button></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/contact-list/test/demo.legacy.js b/src/contact-list/test/demo.spec.js
similarity index 100%
rename from src/contact-list/test/demo.legacy.js
rename to src/contact-list/test/demo.spec.js
diff --git a/src/coupon-list/test/__snapshots__/demo.legacy.js.snap b/src/coupon-list/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 8c2fdd67d..000000000
--- a/src/coupon-list/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-coupon-cell">
-      <div class="van-cell__title"><span>优惠券</span></div>
-      <div class="van-cell__value van-coupon-cell__value"><span>2张可用</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <!---->
-  </div>
-</div>
-`;
diff --git a/src/coupon-list/test/__snapshots__/demo.spec.js.snap b/src/coupon-list/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..d81ac4631
--- /dev/null
+++ b/src/coupon-list/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-cell van-cell--clickable van-coupon-cell" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>优惠券</span>
+      <!---->
+    </div>
+    <div class="van-cell__value van-coupon-cell__value"><span>2张可用</span></div><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+</div>
+`;
diff --git a/src/coupon-list/test/demo.legacy.js b/src/coupon-list/test/demo.spec.js
similarity index 100%
rename from src/coupon-list/test/demo.legacy.js
rename to src/coupon-list/test/demo.spec.js
diff --git a/src/datetime-picker/test/__snapshots__/demo.legacy.js.snap b/src/datetime-picker/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 39071a4ab..000000000
--- a/src/datetime-picker/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,1618 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-picker van-datetime-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">选择年月日</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">2020</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2021</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2022</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2023</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2024</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2025</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">21</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">22</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">23</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">24</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">25</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">26</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">27</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">28</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">29</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">30</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">31</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker van-datetime-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">选择年月</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">2020年</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2021年</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2022年</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2023年</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2024年</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2025年</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">01月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12月</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker van-datetime-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">选择月日</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">01月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12月</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">01日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">21日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">22日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">23日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">24日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">25日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">26日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">27日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">28日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">29日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">30日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">31日</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker van-datetime-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">选择时间</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">00</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">21</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">22</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">23</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">24</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">25</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">26</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">27</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">28</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">29</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">30</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">31</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">32</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">33</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">34</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">35</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">36</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">37</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">38</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">39</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">40</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">41</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">42</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">43</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">44</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">45</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">46</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">47</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">48</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">49</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">50</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">51</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">52</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">53</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">54</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">55</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">56</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">57</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">58</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">59</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker van-datetime-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">选择完整时间</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">2020</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2021</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2022</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2023</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2024</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2025</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">21</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">22</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">23</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">24</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">25</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">26</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">27</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">28</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">29</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">30</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">31</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">00</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">21</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">22</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">23</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">00</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">21</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">22</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">23</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">24</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">25</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">26</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">27</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">28</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">29</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">30</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">31</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">32</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">33</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">34</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">35</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">36</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">37</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">38</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">39</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">40</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">41</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">42</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">43</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">44</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">45</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">46</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">47</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">48</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">49</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">50</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">51</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">52</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">53</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">54</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">55</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">56</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">57</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">58</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">59</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker van-datetime-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">选择年月日小时</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">2020</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2021</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2022</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2023</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2024</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2025</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">21</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">22</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">23</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">24</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">25</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">26</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">27</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">28</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">29</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">30</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">31</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">00</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">21</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">22</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">23</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker van-datetime-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">选项过滤器</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -418px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">00</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">21</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">22</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">23</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">00</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">25</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">30</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">35</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">40</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">45</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">50</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">55</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker van-datetime-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">自定义列排序</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">01月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11月</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12月</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">01日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">21日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">22日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">23日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">24日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">25日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">26日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">27日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">28日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">29日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">30日</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">31日</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">2020年</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2021年</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2022年</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2023年</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2024年</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2025年</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/datetime-picker/test/__snapshots__/demo.spec.js.snap b/src/datetime-picker/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..83661e4d8
--- /dev/null
+++ b/src/datetime-picker/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,1632 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-picker van-datetime-picker" minhour="0" maxhour="23" minminute="0" maxminute="59">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">选择年月日</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">2020</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2021</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2022</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2023</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2024</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2025</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">01</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">01</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">13</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">14</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">15</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">16</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">17</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">18</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">19</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">20</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">21</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">22</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">23</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">24</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">25</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">26</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">27</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">28</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">29</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">30</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">31</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker van-datetime-picker" minhour="0" maxhour="23" minminute="0" maxminute="59">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">选择年月</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">2020年</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2021年</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2022年</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2023年</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2024年</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2025年</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">01月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12月</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker van-datetime-picker" minhour="0" maxhour="23" minminute="0" maxminute="59">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">选择月日</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">01月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12月</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">01日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">13日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">14日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">15日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">16日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">17日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">18日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">19日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">20日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">21日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">22日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">23日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">24日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">25日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">26日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">27日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">28日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">29日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">30日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">31日</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker van-datetime-picker" type="time" mindate="Fri Jan 01 2010 00:00:00 GMT+0800 (GMT+08:00)" maxdate="Tue Dec 31 2030 00:00:00 GMT+0800 (GMT+08:00)">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">选择时间</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">12</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">13</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">14</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">15</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">16</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">17</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">18</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">19</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">20</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">00</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">01</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">13</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">14</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">15</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">16</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">17</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">18</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">19</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">20</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">21</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">22</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">23</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">24</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">25</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">26</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">27</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">28</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">29</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">30</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">31</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">32</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">33</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">34</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">35</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">36</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">37</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">38</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">39</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">40</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">41</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">42</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">43</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">44</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">45</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">46</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">47</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">48</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">49</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">50</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">51</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">52</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">53</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">54</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">55</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">56</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">57</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">58</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">59</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker van-datetime-picker" minhour="0" maxhour="23" minminute="0" maxminute="59">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">选择完整时间</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">2020</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2021</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2022</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2023</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2024</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2025</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">01</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">01</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">13</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">14</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">15</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">16</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">17</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">18</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">19</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">20</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">21</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">22</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">23</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">24</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">25</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">26</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">27</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">28</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">29</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">30</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">31</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">00</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">01</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">13</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">14</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">15</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">16</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">17</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">18</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">19</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">20</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">21</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">22</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">23</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">00</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">01</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">13</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">14</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">15</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">16</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">17</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">18</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">19</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">20</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">21</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">22</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">23</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">24</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">25</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">26</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">27</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">28</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">29</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">30</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">31</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">32</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">33</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">34</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">35</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">36</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">37</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">38</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">39</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">40</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">41</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">42</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">43</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">44</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">45</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">46</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">47</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">48</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">49</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">50</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">51</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">52</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">53</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">54</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">55</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">56</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">57</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">58</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">59</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker van-datetime-picker" minhour="0" maxhour="23" minminute="0" maxminute="59">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">选择年月日小时</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">2020</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2021</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2022</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2023</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2024</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2025</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">01</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">01</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">13</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">14</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">15</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">16</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">17</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">18</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">19</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">20</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">21</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">22</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">23</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">24</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">25</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">26</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">27</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">28</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">29</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">30</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">31</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">00</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">01</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">13</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">14</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">15</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">16</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">17</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">18</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">19</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">20</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">21</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">22</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">23</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker van-datetime-picker" type="time" mindate="Fri Jan 01 2010 00:00:00 GMT+0800 (GMT+08:00)" maxdate="Tue Dec 31 2030 00:00:00 GMT+0800 (GMT+08:00)">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">选项过滤器</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, -418px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">00</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">01</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">12</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">13</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">14</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">15</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">16</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">17</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">18</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">19</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">20</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">21</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">22</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">23</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">00</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">15</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">20</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">25</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">30</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">35</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">40</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">45</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">50</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">55</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker van-datetime-picker" minhour="0" maxhour="23" minminute="0" maxminute="59">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">自定义列排序</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">01月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11月</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12月</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">01日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">02日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">03日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">04日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">05日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">06日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">07日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">08日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">09日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">10日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">11日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">12日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">13日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">14日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">15日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">16日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">17日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">18日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">19日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">20日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">21日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">22日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">23日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">24日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">25日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">26日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">27日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">28日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">29日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">30日</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">31日</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">2020年</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2021年</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2022年</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2023年</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2024年</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">2025年</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+`;
diff --git a/src/datetime-picker/test/demo.legacy.js b/src/datetime-picker/test/demo.spec.js
similarity index 100%
rename from src/datetime-picker/test/demo.legacy.js
rename to src/datetime-picker/test/demo.spec.js
diff --git a/src/dialog/test/__snapshots__/demo.legacy.js.snap b/src/dialog/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index b3bb15a99..000000000
--- a/src/dialog/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>提示弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>提示弹窗（无标题）</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>确认弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>提示弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>提示弹窗（无标题）</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>异步关闭</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>组件调用</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
-      <div class="van-dialog__header">标题</div>
-      <div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>
-      <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel">
-          <div class="van-button__content"><span class="van-button__text">取消</span></div>
-        </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
-          <div class="van-button__content"><span class="van-button__text">确认弹窗</span></div>
-        </button></div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/dialog/test/__snapshots__/demo.spec.js.snap b/src/dialog/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..4c0d6e851
--- /dev/null
+++ b/src/dialog/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>提示弹窗</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>提示弹窗（无标题）</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>确认弹窗</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>提示弹窗</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>提示弹窗（无标题）</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>异步关闭</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>组件调用</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <div class="van-popup van-popup--center van-dialog" role="dialog" aria-labelledby="标题" style="display: none;">
+      <div class="van-dialog__header">标题</div>
+      <div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>
+      <div class="van-hairline--top van-dialog__footer"><button type="button" class="van-button van-button--default van-button--large van-dialog__cancel">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">取消</span>
+            <!---->
+          </div>
+        </button><button type="button" class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">确认弹窗</span>
+            <!---->
+          </div>
+        </button></div>
+      <!---->
+    </div>
+  </transition-stub>
+</div>
+`;
diff --git a/src/dialog/test/demo.legacy.js b/src/dialog/test/demo.spec.js
similarity index 100%
rename from src/dialog/test/demo.legacy.js
rename to src/dialog/test/demo.spec.js
diff --git a/src/divider/test/__snapshots__/demo.legacy.js.snap b/src/divider/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 1ea4ff2d6..000000000
--- a/src/divider/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="separator" class="van-divider van-divider--hairline"></div>
-  </div>
-  <div>
-    <div role="separator" class="van-divider van-divider--hairline van-divider--content-center">
-      文本
-    </div>
-  </div>
-  <div>
-    <div role="separator" class="van-divider van-divider--hairline van-divider--content-left">
-      文本
-    </div>
-    <div role="separator" class="van-divider van-divider--hairline van-divider--content-right">
-      文本
-    </div>
-  </div>
-  <div>
-    <div role="separator" class="van-divider van-divider--dashed van-divider--content-center">
-      文本
-    </div>
-  </div>
-  <div>
-    <div role="separator" class="van-divider van-divider--hairline van-divider--content-center" style="border-color: #1989fa; color: rgb(25, 137, 250); padding: 0px 16px;">
-      文本
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/divider/test/__snapshots__/demo.spec.js.snap b/src/divider/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..161242a13
--- /dev/null
+++ b/src/divider/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div role="separator" class="van-divider van-divider--hairline">
+    <!---->
+  </div>
+</div>
+<div>
+  <div role="separator" class="van-divider van-divider--hairline van-divider--content-center">文本</div>
+</div>
+<div>
+  <div role="separator" class="van-divider van-divider--hairline van-divider--content-left">文本</div>
+  <div role="separator" class="van-divider van-divider--hairline van-divider--content-right">文本</div>
+</div>
+<div>
+  <div role="separator" class="van-divider van-divider--dashed van-divider--content-center">文本</div>
+</div>
+<div>
+  <div role="separator" class="van-divider van-divider--hairline van-divider--content-center" style="border-color: #1989fa; color: rgb(25, 137, 250); padding: 0px 16px;">文本</div>
+</div>
+`;
diff --git a/src/divider/test/demo.legacy.js b/src/divider/test/demo.spec.js
similarity index 100%
rename from src/divider/test/demo.legacy.js
rename to src/divider/test/demo.spec.js
diff --git a/src/dropdown-menu/test/__snapshots__/demo.legacy.js.snap b/src/dropdown-menu/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 2e154118c..000000000
--- a/src/dropdown-menu/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,96 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-dropdown-menu">
-      <div class="van-dropdown-menu__bar">
-        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
-        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
-      </div>
-      <div>
-        <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
-          <!---->
-        </div>
-      </div>
-      <div>
-        <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-dropdown-menu">
-      <div class="van-dropdown-menu__bar">
-        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
-        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div>
-      </div>
-      <div>
-        <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
-          <!---->
-        </div>
-      </div>
-      <div>
-        <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-dropdown-menu">
-      <div class="van-dropdown-menu__bar">
-        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
-        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
-      </div>
-      <div>
-        <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
-          <!---->
-        </div>
-      </div>
-      <div>
-        <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-dropdown-menu">
-      <div class="van-dropdown-menu__bar">
-        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">全部商品</div></span></div>
-        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">默认排序</div></span></div>
-      </div>
-      <div>
-        <div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
-          <!---->
-        </div>
-      </div>
-      <div>
-        <div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-dropdown-menu">
-      <div class="van-dropdown-menu__bar">
-        <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
-        <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
-      </div>
-      <div>
-        <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
-          <!---->
-        </div>
-      </div>
-      <div>
-        <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap b/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..938e22085
--- /dev/null
+++ b/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,124 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-dropdown-menu">
+    <div class="van-dropdown-menu__bar">
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
+    </div>
+    <div style="top: 0px; display: none;" class="van-dropdown-item van-dropdown-item--down">
+      <transition-stub style="position: absolute;">
+        <!---->
+      </transition-stub>
+      <transition-stub>
+        <!---->
+      </transition-stub>
+    </div>
+    <div style="top: 0px; display: none;" class="van-dropdown-item van-dropdown-item--down">
+      <transition-stub style="position: absolute;">
+        <!---->
+      </transition-stub>
+      <transition-stub>
+        <!---->
+      </transition-stub>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-dropdown-menu">
+    <div class="van-dropdown-menu__bar">
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div>
+    </div>
+    <div style="top: 0px; display: none;" class="van-dropdown-item van-dropdown-item--down">
+      <transition-stub style="position: absolute;">
+        <!---->
+      </transition-stub>
+      <transition-stub>
+        <!---->
+      </transition-stub>
+    </div>
+    <div style="top: 0px; display: none;" class="van-dropdown-item van-dropdown-item--down">
+      <transition-stub style="position: absolute;">
+        <!---->
+      </transition-stub>
+      <transition-stub>
+        <!---->
+      </transition-stub>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-dropdown-menu">
+    <div class="van-dropdown-menu__bar">
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
+    </div>
+    <div style="top: 0px; display: none;" class="van-dropdown-item van-dropdown-item--down">
+      <transition-stub style="position: absolute;">
+        <!---->
+      </transition-stub>
+      <transition-stub>
+        <!---->
+      </transition-stub>
+    </div>
+    <div style="top: 0px; display: none;" class="van-dropdown-item van-dropdown-item--down">
+      <transition-stub style="position: absolute;">
+        <!---->
+      </transition-stub>
+      <transition-stub>
+        <!---->
+      </transition-stub>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-dropdown-menu">
+    <div class="van-dropdown-menu__bar">
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">全部商品</div></span></div>
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">默认排序</div></span></div>
+    </div>
+    <div style="bottom: 0px; display: none;" class="van-dropdown-item van-dropdown-item--up">
+      <transition-stub style="position: absolute;">
+        <!---->
+      </transition-stub>
+      <transition-stub>
+        <!---->
+      </transition-stub>
+    </div>
+    <div style="bottom: 0px; display: none;" class="van-dropdown-item van-dropdown-item--up">
+      <transition-stub style="position: absolute;">
+        <!---->
+      </transition-stub>
+      <transition-stub>
+        <!---->
+      </transition-stub>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-dropdown-menu">
+    <div class="van-dropdown-menu__bar">
+      <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
+      <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
+    </div>
+    <div style="top: 0px; display: none;" class="van-dropdown-item van-dropdown-item--down">
+      <transition-stub style="position: absolute;">
+        <!---->
+      </transition-stub>
+      <transition-stub>
+        <!---->
+      </transition-stub>
+    </div>
+    <div style="top: 0px; display: none;" class="van-dropdown-item van-dropdown-item--down">
+      <transition-stub style="position: absolute;">
+        <!---->
+      </transition-stub>
+      <transition-stub>
+        <!---->
+      </transition-stub>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/dropdown-menu/test/demo.legacy.js b/src/dropdown-menu/test/demo.spec.js
similarity index 100%
rename from src/dropdown-menu/test/demo.legacy.js
rename to src/dropdown-menu/test/demo.spec.js
diff --git a/src/empty/test/__snapshots__/demo.legacy.js.snap b/src/empty/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 0537f43af..000000000
--- a/src/empty/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-empty">
-      <div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/empty-image-default.png"></div>
-      <p class="van-empty__description">描述文字</p>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">通用错误</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">网络错误</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">搜索提示</span></div>
-          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div role="tabpanel" class="van-tab__pane" style="">
-          <div class="van-empty">
-            <div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/empty-image-error.png"></div>
-            <p class="van-empty__description">描述文字</p>
-          </div>
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="custom-image van-empty">
-      <div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/custom-empty-image.png"></div>
-      <p class="van-empty__description">描述文字</p>
-    </div>
-  </div>
-  <div>
-    <div class="van-empty">
-      <div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/empty-image-default.png"></div>
-      <p class="van-empty__description">描述文字</p>
-      <div class="van-empty__bottom"><button class="bottom-button van-button van-button--danger van-button--normal van-button--round">
-          <div class="van-button__content"><span class="van-button__text">
-        按钮
-      </span></div>
-        </button></div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/empty/test/__snapshots__/demo.spec.js.snap b/src/empty/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..8ac0b86dc
--- /dev/null
+++ b/src/empty/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-empty">
+    <div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/empty-image-default.png"></div>
+    <p class="van-empty__description">描述文字</p>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-tabs van-tabs--line" modelvalue="error">
+    <div class="van-tabs__wrap">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+        <!---->
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">通用错误</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">网络错误</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">搜索提示</span></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+        <!---->
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div role="tabpanel" class="van-tab__pane" style="">
+        <div class="van-empty">
+          <div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/empty-image-error.png"></div>
+          <p class="van-empty__description">描述文字</p>
+          <!---->
+        </div>
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-empty custom-image">
+    <div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/custom-empty-image.png"></div>
+    <p class="van-empty__description">描述文字</p>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-empty">
+    <div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/empty-image-default.png"></div>
+    <p class="van-empty__description">描述文字</p>
+    <div class="van-empty__bottom"><button type="button" class="van-button van-button--danger van-button--normal van-button--round bottom-button">
+        <div class="van-button__content">
+          <!----><span class="van-button__text">按钮</span>
+          <!---->
+        </div>
+      </button></div>
+  </div>
+</div>
+`;
diff --git a/src/empty/test/demo.legacy.js b/src/empty/test/demo.spec.js
similarity index 100%
rename from src/empty/test/demo.legacy.js
rename to src/empty/test/demo.spec.js
diff --git a/src/field/test/__snapshots__/demo.legacy.js.snap b/src/field/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 3bb3a66f1..000000000
--- a/src/field/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,151 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-cell-group van-hairline--top-bottom">
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>文本</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body"><input type="text" placeholder="请输入文本" class="van-field__control"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label"><span>文本</span></div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="text" placeholder="请输入文本" class="van-field__control"></div>
-      </div>
-    </div>
-    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label"><span>手机号</span></div>
-      <div class="van-cell__value van-field__value">
-        <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 van-field__value">
-        <div class="van-field__body"><input type="tel" inputmode="numeric" 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 van-field__value">
-        <div class="van-field__body"><input type="text" inputmode="decimal" 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 van-field__value">
-        <div class="van-field__body"><input type="password" placeholder="请输入密码" class="van-field__control"></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label"><span>文本</span></div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control"></div>
-      </div>
-    </div>
-    <div class="van-cell van-field van-field--disabled">
-      <div class="van-cell__title van-field__label"><span>文本</span></div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="text" disabled="disabled" class="van-field__control"></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell van-field">
-      <div class="van-field__left-icon"><i class="van-icon van-icon-smile-o">
-          <!----></i></div>
-      <div class="van-cell__title van-field__label"><span>文本</span></div>
-      <div class="van-cell__value van-field__value">
-        <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-warning-o">
-              <!----></i></div>
-        </div>
-      </div>
-    </div>
-    <div class="van-cell van-field">
-      <div class="van-field__left-icon"><i class="van-icon van-icon-music-o">
-          <!----></i></div>
-      <div class="van-cell__title van-field__label"><span>文本</span></div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="text" placeholder="显示清除图标" class="van-field__control"></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell van-cell--required van-field van-field--error">
-      <div class="van-cell__title van-field__label"><span>用户名</span></div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="text" placeholder="请输入用户名" class="van-field__control"></div>
-      </div>
-    </div>
-    <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 van-field__value">
-        <div class="van-field__body"><input type="text" placeholder="请输入手机号" class="van-field__control"></div>
-        <div class="van-field__error-message">手机号格式错误</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <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 van-field__value">
-        <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">
-              <div class="van-button__content"><span class="van-button__text">
-        发送验证码
-      </span></div>
-            </button></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label"><span>文本</span></div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="text" placeholder="在输入时执行格式化" class="van-field__control"></div>
-      </div>
-    </div>
-    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label"><span>文本</span></div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="text" placeholder="在失焦时执行格式化" class="van-field__control"></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label"><span>留言</span></div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><textarea rows="1" placeholder="请输入留言" class="van-field__control" style="height: auto;"></textarea></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label"><span>留言</span></div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><textarea rows="2" placeholder="请输入留言" class="van-field__control" style="height: auto;"></textarea></div>
-        <div class="van-field__word-limit"><span class="van-field__word-num">0</span>/50</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label"><span>文本</span></div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="text" placeholder="输入框内容右对齐" class="van-field__control van-field__control--right"></div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/field/test/__snapshots__/demo.spec.js.snap b/src/field/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..8bf38c651
--- /dev/null
+++ b/src/field/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,346 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-cell-group van-hairline--top-bottom">
+    <div class="van-cell van-field">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>文本</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body"><input type="text" class="van-field__control" placeholder="请输入文本">
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-cell van-field">
+    <!---->
+    <div class="van-cell__title van-field__label"><span>文本</span>
+      <!---->
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control" placeholder="请输入文本">
+        <!---->
+        <!---->
+        <!---->
+      </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 van-field__value">
+      <div class="van-field__body"><input type="tel" class="van-field__control" placeholder="请输入手机号">
+        <!---->
+        <!---->
+        <!---->
+      </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 van-field__value">
+      <div class="van-field__body"><input type="tel" inputmode="numeric" class="van-field__control" placeholder="请输入整数">
+        <!---->
+        <!---->
+        <!---->
+      </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 van-field__value">
+      <div class="van-field__body"><input type="text" inputmode="decimal" class="van-field__control" placeholder="请输入数字（支持小数）">
+        <!---->
+        <!---->
+        <!---->
+      </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 van-field__value">
+      <div class="van-field__body"><input type="password" class="van-field__control" placeholder="请输入密码">
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-field">
+    <!---->
+    <div class="van-cell__title van-field__label"><span>文本</span>
+      <!---->
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control" readonly="">
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <div class="van-cell van-field van-field--disabled">
+    <!---->
+    <div class="van-cell__title van-field__label"><span>文本</span>
+      <!---->
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control" disabled="">
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-field">
+    <div class="van-field__left-icon"><i class="van-badge__wrapper van-icon van-icon-smile-o">
+        <!---->
+        <!---->
+        <!----></i></div>
+    <div class="van-cell__title van-field__label"><span>文本</span>
+      <!---->
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control" placeholder="显示图标">
+        <!---->
+        <div class="van-field__right-icon"><i class="van-badge__wrapper van-icon van-icon-warning-o">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <div class="van-cell van-field">
+    <div class="van-field__left-icon"><i class="van-badge__wrapper van-icon van-icon-music-o">
+        <!---->
+        <!---->
+        <!----></i></div>
+    <div class="van-cell__title van-field__label"><span>文本</span>
+      <!---->
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control" placeholder="显示清除图标">
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--required van-field van-field--error">
+    <!---->
+    <div class="van-cell__title van-field__label"><span>用户名</span>
+      <!---->
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control" placeholder="请输入用户名">
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <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 van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control" placeholder="请输入手机号">
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <div class="van-field__error-message">手机号格式错误</div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <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 van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control" placeholder="请输入短信验证码">
+        <!---->
+        <!---->
+        <div class="van-field__button"><button type="button" class="van-button van-button--primary van-button--small">
+            <div class="van-button__content">
+              <!----><span class="van-button__text">发送验证码</span>
+              <!---->
+            </div>
+          </button></div>
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-field">
+    <!---->
+    <div class="van-cell__title van-field__label"><span>文本</span>
+      <!---->
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control" placeholder="在输入时执行格式化">
+        <!---->
+        <!---->
+        <!---->
+      </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 van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control" placeholder="在失焦时执行格式化">
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-field">
+    <!---->
+    <div class="van-cell__title van-field__label"><span>留言</span>
+      <!---->
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><textarea rows="1" class="van-field__control" placeholder="请输入留言" style="height: auto;"></textarea>
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-field">
+    <!---->
+    <div class="van-cell__title van-field__label"><span>留言</span>
+      <!---->
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><textarea rows="2" class="van-field__control" placeholder="请输入留言" style="height: auto;"></textarea>
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <div class="van-field__word-limit"><span class="van-field__word-num">0</span>/50</div>
+      <!---->
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-field">
+    <!---->
+    <div class="van-cell__title van-field__label"><span>文本</span>
+      <!---->
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control van-field__control--right" placeholder="输入框内容右对齐">
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+`;
diff --git a/src/field/test/demo.legacy.js b/src/field/test/demo.spec.js
similarity index 100%
rename from src/field/test/demo.legacy.js
rename to src/field/test/demo.spec.js
diff --git a/src/form/test/__snapshots__/demo.legacy.js.snap b/src/form/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 738f6d61d..000000000
--- a/src/form/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,224 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <form class="van-form">
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>用户名</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body"><input type="text" name="username" 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 van-field__value">
-          <div class="van-field__body"><input type="password" name="password" placeholder="密码" class="van-field__control"></div>
-        </div>
-      </div>
-      <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round">
-          <div class="van-button__content"><span class="van-button__text">
-        提交
-      </span></div>
-        </button></div>
-    </form>
-  </div>
-  <div>
-    <form class="van-form">
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>文本</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body"><input type="text" name="pattern" 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 van-field__value">
-          <div class="van-field__body"><input type="text" name="validator" 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 van-field__value">
-          <div class="van-field__body"><input type="text" name="asyncValidator" placeholder="异步函数校验" class="van-field__control"></div>
-        </div>
-      </div>
-      <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round">
-          <div class="van-button__content"><span class="van-button__text">
-        提交
-      </span></div>
-        </button></div>
-    </form>
-  </div>
-  <div>
-    <form class="van-form">
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>开关</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body">
-            <div class="van-field__control van-field__control--custom">
-              <div role="switch" aria-checked="false" class="van-switch" style="font-size: 20px;">
-                <div class="van-switch__node"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>复选框</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body">
-            <div class="van-field__control van-field__control--custom">
-              <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
-                <div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success">
-                    <!----></i></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>复选框组</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body">
-            <div class="van-field__control van-field__control--custom">
-              <div class="van-checkbox-group van-checkbox-group--horizontal">
-                <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
-                  <div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success">
-                      <!----></i></div><span class="van-checkbox__label">
-            复选框 1
-          </span>
-                </div>
-                <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
-                  <div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success">
-                      <!----></i></div><span class="van-checkbox__label">
-            复选框 2
-          </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>单选框</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body">
-            <div class="van-field__control van-field__control--custom">
-              <div role="radiogroup" class="van-radio-group van-radio-group--horizontal">
-                <div role="radio" tabindex="0" aria-checked="true" class="van-radio van-radio--horizontal">
-                  <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
-                      <!----></i></div><span class="van-radio__label">单选框 1</span>
-                </div>
-                <div role="radio" tabindex="-1" aria-checked="false" class="van-radio van-radio--horizontal">
-                  <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
-                      <!----></i></div><span class="van-radio__label">单选框 2</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>步进器</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body">
-            <div class="van-field__control van-field__control--custom">
-              <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>评分</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body">
-            <div class="van-field__control van-field__control--custom">
-              <div tabindex="0" role="radiogroup" class="van-rate">
-                <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-                    <!----></i></div>
-                <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-                    <!----></i></div>
-                <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-                    <!----></i></div>
-                <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
-                    <!----></i></div>
-                <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
-                    <!----></i></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>滑块</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body">
-            <div class="van-field__control van-field__control--custom">
-              <div class="van-slider">
-                <div class="van-slider__bar" style="width: 50%;">
-                  <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
-                    <div class="van-slider__button"></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>文件上传</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body">
-            <div class="van-field__control van-field__control--custom">
-              <div class="van-uploader">
-                <div class="van-uploader__wrapper">
-                  <div class="van-uploader__preview">
-                    <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
-                      <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                          <!----></i></div>
-                    </div>
-                    <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
-                        <!----></i></div>
-                  </div>
-                  <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
-                      <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
-        <div class="van-cell__title van-field__label"><span>选择器</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body"><input type="text" name="picker" readonly="readonly" placeholder="点击选择城市" class="van-field__control"></div>
-        </div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
-        <div class="van-cell__title van-field__label"><span>时间选择</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body"><input type="text" name="datetimePicker" readonly="readonly" placeholder="点击选择时间" class="van-field__control"></div>
-        </div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
-        <div class="van-cell__title van-field__label"><span>地区选择</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body"><input type="text" name="area" readonly="readonly" placeholder="点击选择省市区" class="van-field__control"></div>
-        </div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
-        <div class="van-cell__title van-field__label"><span>日历</span></div>
-        <div class="van-cell__value van-field__value">
-          <div class="van-field__body"><input type="text" name="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
-        </div>
-      </div>
-      <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round">
-          <div class="van-button__content"><span class="van-button__text">
-        提交
-      </span></div>
-        </button></div>
-    </form>
-  </div>
-</div>
-`;
diff --git a/src/form/test/__snapshots__/demo.spec.js.snap b/src/form/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..3f071780d
--- /dev/null
+++ b/src/form/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,450 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <form class="van-form">
+    <div class="van-cell van-field">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>用户名</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body"><input type="text" name="username" class="van-field__control" placeholder="用户名">
+          <!---->
+          <!---->
+          <!---->
+        </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 van-field__value">
+        <div class="van-field__body"><input type="password" name="password" class="van-field__control" placeholder="密码">
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--primary van-button--normal van-button--block van-button--round">
+        <div class="van-button__content">
+          <!----><span class="van-button__text">提交</span>
+          <!---->
+        </div>
+      </button></div>
+  </form>
+</div>
+<div>
+  <form class="van-form">
+    <div class="van-cell van-field">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>文本</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body"><input type="text" name="pattern" class="van-field__control" placeholder="正则校验">
+          <!---->
+          <!---->
+          <!---->
+        </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 van-field__value">
+        <div class="van-field__body"><input type="text" name="validator" class="van-field__control" placeholder="函数校验">
+          <!---->
+          <!---->
+          <!---->
+        </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 van-field__value">
+        <div class="van-field__body"><input type="text" name="asyncValidator" class="van-field__control" placeholder="异步函数校验">
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--primary van-button--normal van-button--block van-button--round">
+        <div class="van-button__content">
+          <!----><span class="van-button__text">提交</span>
+          <!---->
+        </div>
+      </button></div>
+  </form>
+</div>
+<div>
+  <form class="van-form">
+    <div class="van-cell van-field">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>开关</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body">
+          <div class="van-field__control van-field__control--custom">
+            <div role="switch" class="van-switch" style="font-size: 20px;" aria-checked="false">
+              <div class="van-switch__node">
+                <!---->
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <div class="van-cell van-field">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>复选框</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body">
+          <div class="van-field__control van-field__control--custom">
+            <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="false" bindgroup="true">
+              <div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-badge__wrapper van-icon van-icon-success">
+                  <!---->
+                  <!---->
+                  <!----></i></div>
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <div class="van-cell van-field">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>复选框组</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body">
+          <div class="van-field__control van-field__control--custom">
+            <div class="van-checkbox-group van-checkbox-group--horizontal">
+              <div role="checkbox" class="van-checkbox van-checkbox--horizontal" tabindex="0" aria-checked="false" bindgroup="true">
+                <div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-badge__wrapper van-icon van-icon-success">
+                    <!---->
+                    <!---->
+                    <!----></i></div><span class="van-checkbox__label">复选框 1 </span>
+              </div>
+              <div role="checkbox" class="van-checkbox van-checkbox--horizontal" tabindex="0" aria-checked="false" bindgroup="true">
+                <div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-badge__wrapper van-icon van-icon-success">
+                    <!---->
+                    <!---->
+                    <!----></i></div><span class="van-checkbox__label">复选框 2 </span>
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <div class="van-cell van-field">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>单选框</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body">
+          <div class="van-field__control van-field__control--custom">
+            <div class="van-radio-group van-radio-group--horizontal" role="radiogroup">
+              <div role="radio" class="van-radio van-radio--horizontal" tabindex="0" aria-checked="true">
+                <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+                    <!---->
+                    <!---->
+                    <!----></i></div><span class="van-radio__label">单选框 1</span>
+              </div>
+              <div role="radio" class="van-radio van-radio--horizontal" tabindex="0" aria-checked="false">
+                <div class="van-radio__icon van-radio__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+                    <!---->
+                    <!---->
+                    <!----></i></div><span class="van-radio__label">单选框 2</span>
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <div class="van-cell van-field">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>步进器</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body">
+          <div class="van-field__control van-field__control--custom">
+            <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" class="van-stepper__input" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1"><button type="button" class="van-stepper__plus"></button></div>
+          </div>
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <div class="van-cell van-field">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>评分</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body">
+          <div class="van-field__control van-field__control--custom">
+            <div role="radiogroup" class="van-rate" tabindex="0">
+              <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="1">
+                  <!---->
+                  <!---->
+                  <!----></i>
+                <!---->
+              </div>
+              <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="2">
+                  <!---->
+                  <!---->
+                  <!----></i>
+                <!---->
+              </div>
+              <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="3">
+                  <!---->
+                  <!---->
+                  <!----></i>
+                <!---->
+              </div>
+              <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon" data-score="4">
+                  <!---->
+                  <!---->
+                  <!----></i>
+                <!---->
+              </div>
+              <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon" data-score="5">
+                  <!---->
+                  <!---->
+                  <!----></i>
+                <!---->
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <div class="van-cell van-field">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>滑块</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body">
+          <div class="van-field__control van-field__control--custom">
+            <div class="van-slider">
+              <div class="van-slider__bar" style="width: 50%; left: 0%;">
+                <div role="slider" class="van-slider__button-wrapper" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal">
+                  <div class="van-slider__button"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <div class="van-cell van-field">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>文件上传</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body">
+          <div class="van-field__control van-field__control--custom">
+            <div class="van-uploader">
+              <div class="van-uploader__wrapper">
+                <div class="van-uploader__preview">
+                  <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
+                    <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+                        <!---->
+                        <!---->
+                        <!----></i></div>
+                    <!---->
+                  </div>
+                  <!---->
+                  <div class="van-uploader__preview-delete"><i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
+                      <!---->
+                      <!---->
+                      <!----></i></div>
+                </div>
+                <div class="van-uploader__upload"><i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
+                    <!---->
+                    <!---->
+                    <!----></i>
+                  <!----><input type="file" class="van-uploader__input" accept="image/*"></div>
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <div class="van-cell van-cell--clickable van-field" role="button" tabindex="0">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>选择器</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body"><input type="text" name="picker" class="van-field__control" readonly="" placeholder="点击选择城市">
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!--teleport start-->
+    <!--teleport end-->
+    <div class="van-cell van-cell--clickable van-field" role="button" tabindex="0">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>时间选择</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body"><input type="text" name="datetimePicker" class="van-field__control" readonly="" placeholder="点击选择时间">
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!--teleport start-->
+    <!--teleport end-->
+    <div class="van-cell van-cell--clickable van-field" role="button" tabindex="0">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>地区选择</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body"><input type="text" name="area" class="van-field__control" readonly="" placeholder="点击选择省市区">
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!--teleport start-->
+    <!--teleport end-->
+    <div class="van-cell van-cell--clickable van-field" role="button" tabindex="0">
+      <!---->
+      <div class="van-cell__title van-field__label"><span>日历</span>
+        <!---->
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body"><input type="text" name="calendar" class="van-field__control" readonly="" placeholder="点击选择日期">
+          <!---->
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!--teleport start-->
+    <!--teleport end-->
+    <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--primary van-button--normal van-button--block van-button--round">
+        <div class="van-button__content">
+          <!----><span class="van-button__text">提交</span>
+          <!---->
+        </div>
+      </button></div>
+  </form>
+</div>
+`;
diff --git a/src/form/test/demo.legacy.js b/src/form/test/demo.spec.js
similarity index 100%
rename from src/form/test/demo.legacy.js
rename to src/form/test/demo.spec.js
diff --git a/src/grid/test/__snapshots__/demo.legacy.js.snap b/src/grid/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 95f2bd6e5..000000000
--- a/src/grid/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,196 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-grid van-hairline--top">
-      <div class="van-grid-item" style="flex-basis: 25%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 25%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 25%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 25%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-grid van-hairline--top">
-      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-grid">
-      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
-        <div class="van-grid-item__content van-grid-item__content--center">
-          <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img" style="object-fit: contain;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                <!----></i></div>
-          </div>
-        </div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
-        <div class="van-grid-item__content van-grid-item__content--center">
-          <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-2.jpg" class="van-image__img" style="object-fit: contain;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                <!----></i></div>
-          </div>
-        </div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
-        <div class="van-grid-item__content van-grid-item__content--center">
-          <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-3.jpg" class="van-image__img" style="object-fit: contain;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                <!----></i></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-grid van-hairline--top">
-      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-grid" style="padding-left: 10px;">
-      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
-        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-grid van-hairline--top">
-      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
-        <div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
-        <div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
-        <div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">文字</span></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-grid van-hairline--top">
-      <div class="van-grid-item" style="flex-basis: 50%;">
-        <div role="button" tabindex="0" class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">路由跳转</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 50%;">
-        <div role="button" tabindex="0" class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"><i class="van-icon van-icon-search van-grid-item__icon">
-            <!----></i><span class="van-grid-item__text">URL 跳转</span></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-grid van-hairline--top">
-      <div class="van-grid-item" style="flex-basis: 50%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
-            <div class="van-badge van-badge--dot"></div>
-          </i><span class="van-grid-item__text">文字</span></div>
-      </div>
-      <div class="van-grid-item" style="flex-basis: 50%;">
-        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-search van-grid-item__icon">
-            <div class="van-badge">99+</div>
-          </i><span class="van-grid-item__text">文字</span></div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/grid/test/__snapshots__/demo.spec.js.snap b/src/grid/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..cde5c6765
--- /dev/null
+++ b/src/grid/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,271 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-grid van-hairline--top">
+    <div class="van-grid-item" style="flex-basis: 25%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 25%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 25%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 25%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-grid van-hairline--top">
+    <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-grid">
+    <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+      <div class="van-grid-item__content van-grid-item__content--center">
+        <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img" style="object-fit: contain;">
+          <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+      <div class="van-grid-item__content van-grid-item__content--center">
+        <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-2.jpg" class="van-image__img" style="object-fit: contain;">
+          <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+      <div class="van-grid-item__content van-grid-item__content--center">
+        <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-3.jpg" class="van-image__img" style="object-fit: contain;">
+          <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-grid van-hairline--top">
+    <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div style="padding-left: 10px;" class="van-grid">
+    <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
+      <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-grid van-hairline--top">
+    <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+      <div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+      <div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+      <div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-photo-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">文字</span></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-grid van-hairline--top">
+    <div class="van-grid-item" style="flex-basis: 50%;">
+      <div role="button" class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline" tabindex="0"><i class="van-badge__wrapper van-icon van-icon-home-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">路由跳转</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 50%;">
+      <div role="button" class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline" tabindex="0"><i class="van-badge__wrapper van-icon van-icon-search van-grid-item__icon">
+          <!---->
+          <!---->
+          <!----></i><span class="van-grid-item__text">URL 跳转</span></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-grid van-hairline--top">
+    <div class="van-grid-item" style="flex-basis: 50%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-home-o van-grid-item__icon">
+          <!---->
+          <!---->
+          <div class="van-badge van-badge--dot van-badge--fixed">
+            <!---->
+          </div>
+        </i><span class="van-grid-item__text">文字</span></div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 50%;">
+      <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-badge__wrapper van-icon van-icon-search van-grid-item__icon">
+          <!---->
+          <!---->
+          <div class="van-badge van-badge--fixed">99+</div>
+        </i><span class="van-grid-item__text">文字</span></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/grid/test/demo.legacy.js b/src/grid/test/demo.spec.js
similarity index 100%
rename from src/grid/test/demo.legacy.js
rename to src/grid/test/demo.spec.js
diff --git a/src/image/test/__snapshots__/demo.legacy.js.snap b/src/image/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 949609521..000000000
--- a/src/image/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,129 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-row">
-      <div class="van-image" style="width: 100px; height: 100px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
-        <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-            <!----></i></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-row">
-      <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
-        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-              <!----></i></div>
-        </div>
-        <div class="text">contain</div>
-      </div>
-      <div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
-        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-              <!----></i></div>
-        </div>
-        <div class="text">cover</div>
-      </div>
-      <div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
-        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-              <!----></i></div>
-        </div>
-        <div class="text">fill</div>
-      </div>
-      <div class="van-col van-col--8" style="padding-right: 10px;">
-        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-              <!----></i></div>
-        </div>
-        <div class="text">none</div>
-      </div>
-      <div class="van-col van-col--8" style="padding-left: 10px;">
-        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-              <!----></i></div>
-        </div>
-        <div class="text">scale-down</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-row">
-      <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
-        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-              <!----></i></div>
-        </div>
-        <div class="text">contain</div>
-      </div>
-      <div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
-        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-              <!----></i></div>
-        </div>
-        <div class="text">cover</div>
-      </div>
-      <div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
-        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-              <!----></i></div>
-        </div>
-        <div class="text">fill</div>
-      </div>
-      <div class="van-col van-col--8" style="padding-right: 10px;">
-        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-              <!----></i></div>
-        </div>
-        <div class="text">none</div>
-      </div>
-      <div class="van-col van-col--8" style="padding-left: 10px;">
-        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-              <!----></i></div>
-        </div>
-        <div class="text">scale-down</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-row">
-      <div class="van-col van-col--8" style="padding-right: 10px;">
-        <div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-              <!----></i></div>
-        </div>
-        <div class="text">默认提示</div>
-      </div>
-      <div class="van-col van-col--8" style="padding-left: 10px;">
-        <div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
-          <div class="van-image__loading">
-            <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>
-          </div>
-        </div>
-        <div class="text">自定义提示</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-row">
-      <div class="van-col van-col--8" style="padding-right: 10px;">
-        <div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-              <!----></i></div>
-        </div>
-        <div class="text">默认提示</div>
-      </div>
-      <div class="van-col van-col--8" style="padding-left: 10px;">
-        <div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-              <!----></i></div>
-        </div>
-        <div class="text">自定义提示</div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/image/test/__snapshots__/demo.spec.js.snap b/src/image/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..310d55357
--- /dev/null
+++ b/src/image/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,174 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-row">
+    <div class="van-image" style="width: 100px; height: 100px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
+      <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+          <!---->
+          <!---->
+          <!----></i></div>
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-row">
+    <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
+      <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
+        <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <div class="text">contain</div>
+    </div>
+    <div style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;" class="van-col van-col--8">
+      <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
+        <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <div class="text">cover</div>
+    </div>
+    <div style="padding-left: 13.333333333333332px;" class="van-col van-col--8">
+      <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
+        <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <div class="text">fill</div>
+    </div>
+    <div class="van-col van-col--8" style="padding-right: 10px;">
+      <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
+        <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <div class="text">none</div>
+    </div>
+    <div style="padding-left: 10px;" class="van-col van-col--8">
+      <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
+        <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <div class="text">scale-down</div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-row">
+    <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
+      <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
+        <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <div class="text">contain</div>
+    </div>
+    <div style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;" class="van-col van-col--8">
+      <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
+        <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <div class="text">cover</div>
+    </div>
+    <div style="padding-left: 13.333333333333332px;" class="van-col van-col--8">
+      <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
+        <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <div class="text">fill</div>
+    </div>
+    <div class="van-col van-col--8" style="padding-right: 10px;">
+      <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
+        <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <div class="text">none</div>
+    </div>
+    <div style="padding-left: 10px;" class="van-col van-col--8">
+      <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
+        <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <div class="text">scale-down</div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-row">
+    <div class="van-col van-col--8" style="padding-right: 10px;">
+      <div class="van-image" style="width: 100%; height: 27vw;">
+        <!---->
+        <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <div class="text">默认提示</div>
+    </div>
+    <div style="padding-left: 10px;" class="van-col van-col--8">
+      <div class="van-image" style="width: 100%; height: 27vw;">
+        <!---->
+        <div class="van-image__loading">
+          <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>
+        </div>
+        <!---->
+      </div>
+      <div class="text">自定义提示</div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-row">
+    <div class="van-col van-col--8" style="padding-right: 10px;">
+      <div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
+        <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <div class="text">默认提示</div>
+    </div>
+    <div style="padding-left: 10px;" class="van-col van-col--8">
+      <div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
+        <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+      </div>
+      <div class="text">自定义提示</div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/image/test/demo.legacy.js b/src/image/test/demo.spec.js
similarity index 100%
rename from src/image/test/demo.legacy.js
rename to src/image/test/demo.spec.js
diff --git a/src/index-bar/test/__snapshots__/demo.legacy.js.snap b/src/index-bar/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index caa480f26..000000000
--- a/src/index-bar/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,389 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div class="van-tabs van-tabs--line">
-    <div class="van-tabs__wrap">
-      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
-        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">自定义索引列表</span></div>
-        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-      </div>
-    </div>
-    <div class="van-tabs__content">
-      <div role="tabpanel" 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>
-              <div class="van-index-anchor">A</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">B</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">C</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">D</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">E</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">F</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">G</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">H</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">I</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">J</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">K</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">L</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">M</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">N</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">O</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">P</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">Q</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">R</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">S</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">T</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">U</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">V</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">W</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">X</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">Y</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div class="van-index-anchor">Z</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 class="van-cell">
-              <div class="van-cell__title"><span>文本</span></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div role="tabpanel" class="van-tab__pane" style="display: none;">
-        <!---->
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/index-bar/test/__snapshots__/demo.spec.js.snap b/src/index-bar/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..d59a93899
--- /dev/null
+++ b/src/index-bar/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,857 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div class="van-tabs van-tabs--line" modelvalue="0">
+  <div class="van-tabs__wrap">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+      <!---->
+      <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
+      <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">自定义索引列表</span></div>
+      <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+      <!---->
+    </div>
+  </div>
+  <div class="van-tabs__content">
+    <div role="tabpanel" class="van-tab__pane" style="">
+      <div class="van-index-bar">
+        <div class="van-index-bar__sidebar"><span class="van-index-bar__index" data-index="A">A</span><span class="van-index-bar__index" data-index="B">B</span><span class="van-index-bar__index" data-index="C">C</span><span class="van-index-bar__index" data-index="D">D</span><span class="van-index-bar__index" data-index="E">E</span><span class="van-index-bar__index" data-index="F">F</span><span class="van-index-bar__index" data-index="G">G</span><span class="van-index-bar__index" data-index="H">H</span><span class="van-index-bar__index" data-index="I">I</span><span class="van-index-bar__index" data-index="J">J</span><span class="van-index-bar__index" data-index="K">K</span><span class="van-index-bar__index" data-index="L">L</span><span class="van-index-bar__index" data-index="M">M</span><span class="van-index-bar__index" data-index="N">N</span><span class="van-index-bar__index" data-index="O">O</span><span class="van-index-bar__index" data-index="P">P</span><span class="van-index-bar__index" data-index="Q">Q</span><span class="van-index-bar__index" data-index="R">R</span><span class="van-index-bar__index" data-index="S">S</span><span class="van-index-bar__index" data-index="T">T</span><span class="van-index-bar__index" data-index="U">U</span><span class="van-index-bar__index" data-index="V">V</span><span class="van-index-bar__index" data-index="W">W</span><span class="van-index-bar__index" data-index="X">X</span><span class="van-index-bar__index" data-index="Y">Y</span><span class="van-index-bar__index" data-index="Z">Z</span></div>
+        <div>
+          <div>
+            <div class="van-index-anchor">A</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">B</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">C</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">D</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">E</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">F</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">G</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">H</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">I</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">J</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">K</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">L</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">M</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">N</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">O</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">P</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">Q</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">R</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">S</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">T</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">U</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">V</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">W</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">X</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">Y</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <div>
+          <div>
+            <div class="van-index-anchor">Z</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 class="van-cell">
+            <!---->
+            <div class="van-cell__title"><span>文本</span>
+              <!---->
+            </div>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/index-bar/test/demo.legacy.js b/src/index-bar/test/demo.spec.js
similarity index 100%
rename from src/index-bar/test/demo.legacy.js
rename to src/index-bar/test/demo.spec.js
diff --git a/src/list/test/__snapshots__/demo.legacy.js.snap b/src/list/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 6ecfc6f12..000000000
--- a/src/list/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div class="van-tabs van-tabs--line">
-    <div class="van-tabs__wrap">
-      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
-        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">错误提示</span></div>
-        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">下拉刷新</span></div>
-        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-      </div>
-    </div>
-    <div class="van-tabs__content">
-      <div role="tabpanel" class="van-tab__pane" style="">
-        <div role="feed" class="van-list" aria-busy="true">
-          <div class="van-list__loading">
-            <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 16px; height: 16px;"><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 class="van-list__placeholder"></div>
-        </div>
-      </div>
-      <div role="tabpanel" class="van-tab__pane" style="display: none;">
-        <!---->
-      </div>
-      <div role="tabpanel" class="van-tab__pane" style="display: none;">
-        <!---->
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/list/test/__snapshots__/demo.spec.js.snap b/src/list/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..d8f5b88ec
--- /dev/null
+++ b/src/list/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div class="van-tabs van-tabs--line">
+  <div class="van-tabs__wrap">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+      <!---->
+      <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
+      <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">错误提示</span></div>
+      <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">下拉刷新</span></div>
+      <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+      <!---->
+    </div>
+  </div>
+  <div class="van-tabs__content">
+    <div role="tabpanel" class="van-tab__pane" style="">
+      <div role="feed" class="van-list" aria-busy="true">
+        <div class="van-list__loading">
+          <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 16px; height: 16px;"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">加载中...</span></div>
+        </div>
+        <!---->
+        <!---->
+        <div class="van-list__placeholder"></div>
+      </div>
+    </div>
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
+      <!---->
+    </div>
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/list/test/demo.legacy.js b/src/list/test/demo.spec.js
similarity index 100%
rename from src/list/test/demo.legacy.js
rename to src/list/test/demo.spec.js
diff --git a/src/loading/test/__snapshots__/demo.legacy.js.snap b/src/loading/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 424aa506c..000000000
--- a/src/loading/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular"><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"><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: 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="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></div>
-    <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 24px; height: 24px;"><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="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="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>
-`;
diff --git a/src/loading/test/__snapshots__/demo.spec.js.snap b/src/loading/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..286dc9bf8
--- /dev/null
+++ b/src/loading/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular"><svg class="van-loading__circular" viewBox="25 25 50 50"><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"><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: rgb(25, 137, 250);"><svg class="van-loading__circular" viewBox="25 25 50 50"><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="width: 24px; height: 24px;"><svg class="van-loading__circular" viewBox="25 25 50 50"><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="width: 24px; height: 24px;"><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="width: 24px; height: 24px;"><svg class="van-loading__circular" viewBox="25 25 50 50"><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="width: 24px; height: 24px;"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">加载中...</span></div>
+</div>
+`;
diff --git a/src/loading/test/demo.legacy.js b/src/loading/test/demo.spec.js
similarity index 100%
rename from src/loading/test/demo.legacy.js
rename to src/loading/test/demo.spec.js
diff --git a/src/nav-bar/test/__snapshots__/demo.legacy.js.snap b/src/nav-bar/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 363455438..000000000
--- a/src/nav-bar/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-nav-bar van-hairline--bottom">
-      <div class="van-nav-bar__content">
-        <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>
-        <div class="van-nav-bar__right"><span class="van-nav-bar__text">按钮</span></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-nav-bar van-hairline--bottom">
-      <div class="van-nav-bar__content">
-        <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>
-        <div class="van-nav-bar__right"><i class="van-icon van-icon-search" style="font-size: 18px;">
-            <!----></i></div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/nav-bar/test/__snapshots__/demo.spec.js.snap b/src/nav-bar/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..310e710cf
--- /dev/null
+++ b/src/nav-bar/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-nav-bar van-hairline--bottom">
+    <div class="van-nav-bar__content">
+      <div class="van-nav-bar__left"><i class="van-badge__wrapper 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>
+      <div class="van-nav-bar__right"><span class="van-nav-bar__text">按钮</span></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-nav-bar van-hairline--bottom">
+    <div class="van-nav-bar__content">
+      <div class="van-nav-bar__left"><i class="van-badge__wrapper 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>
+      <div class="van-nav-bar__right"><i class="van-badge__wrapper van-icon van-icon-search" style="font-size: 18px;">
+          <!---->
+          <!---->
+          <!----></i></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/nav-bar/test/demo.legacy.js b/src/nav-bar/test/demo.spec.js
similarity index 100%
rename from src/nav-bar/test/demo.legacy.js
rename to src/nav-bar/test/demo.spec.js
diff --git a/src/notice-bar/test/__snapshots__/demo.legacy.js.snap b/src/notice-bar/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index f28b3b021..000000000
--- a/src/notice-bar/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,71 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="alert" class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon">
-        <!----></i>
-      <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="alert" class="van-notice-bar">
-      <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
-      </div>
-    </div>
-    <div role="alert" class="van-notice-bar">
-      <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="alert" class="van-notice-bar van-notice-bar--wrapable">
-      <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="alert" class="van-notice-bar">
-      <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
-      </div><i class="van-icon van-icon-cross van-notice-bar__right-icon">
-        <!----></i>
-    </div>
-    <div role="alert" class="van-notice-bar">
-      <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
-      </div><i class="van-icon van-icon-arrow van-notice-bar__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="alert" class="van-notice-bar" style="color: rgb(25, 137, 250); background: rgb(236, 249, 255);"><i class="van-icon van-icon-info-o van-notice-bar__left-icon">
-        <!----></i>
-      <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="alert" class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon">
-        <!----></i>
-      <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">
-          <div class="notice-swipe van-swipe">
-            <div class="van-swipe__track van-swipe__track--vertical" style="height: 0px; transition-duration: 0ms; transform: translateY(0px);">
-              <div class="van-swipe-item" style="height: 0px;">内容 1</div>
-              <div class="van-swipe-item" style="height: 0px;">内容 2</div>
-              <div class="van-swipe-item" style="height: 0px;">内容 3</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/notice-bar/test/__snapshots__/demo.spec.js.snap b/src/notice-bar/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..2d89780fa
--- /dev/null
+++ b/src/notice-bar/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div role="alert" class="van-notice-bar"><i class="van-badge__wrapper van-icon van-icon-volume-o van-notice-bar__left-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <div role="marquee" class="van-notice-bar__wrap">
+      <div style="transition-duration: 0s;" class="van-notice-bar__content">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
+    </div>
+    <!---->
+  </div>
+</div>
+<div>
+  <div role="alert" class="van-notice-bar">
+    <!---->
+    <div role="marquee" class="van-notice-bar__wrap">
+      <div style="transition-duration: 0s;" class="van-notice-bar__content">技术是开发它的人的共同灵魂。</div>
+    </div>
+    <!---->
+  </div>
+  <div role="alert" class="van-notice-bar">
+    <!---->
+    <div role="marquee" class="van-notice-bar__wrap">
+      <div style="transition-duration: 0s;" class="van-notice-bar__content van-ellipsis">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
+    </div>
+    <!---->
+  </div>
+</div>
+<div>
+  <div role="alert" class="van-notice-bar van-notice-bar--wrapable">
+    <!---->
+    <div role="marquee" class="van-notice-bar__wrap">
+      <div style="transition-duration: 0s;" class="van-notice-bar__content">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
+    </div>
+    <!---->
+  </div>
+</div>
+<div>
+  <div role="alert" class="van-notice-bar">
+    <!---->
+    <div role="marquee" class="van-notice-bar__wrap">
+      <div style="transition-duration: 0s;" class="van-notice-bar__content">技术是开发它的人的共同灵魂。</div>
+    </div><i class="van-badge__wrapper van-icon van-icon-cross van-notice-bar__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+  </div>
+  <div role="alert" class="van-notice-bar">
+    <!---->
+    <div role="marquee" class="van-notice-bar__wrap">
+      <div style="transition-duration: 0s;" class="van-notice-bar__content">技术是开发它的人的共同灵魂。</div>
+    </div><i class="van-badge__wrapper van-icon van-icon-arrow van-notice-bar__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+  </div>
+</div>
+<div>
+  <div role="alert" class="van-notice-bar" style="color: rgb(25, 137, 250); background: rgb(236, 249, 255);"><i class="van-badge__wrapper van-icon van-icon-info-o van-notice-bar__left-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <div role="marquee" class="van-notice-bar__wrap">
+      <div style="transition-duration: 0s;" class="van-notice-bar__content">技术是开发它的人的共同灵魂。</div>
+    </div>
+    <!---->
+  </div>
+</div>
+<div>
+  <div role="alert" class="van-notice-bar"><i class="van-badge__wrapper van-icon van-icon-volume-o van-notice-bar__left-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <div role="marquee" class="van-notice-bar__wrap">
+      <div style="transition-duration: 0s;" class="van-notice-bar__content van-ellipsis">
+        <div class="van-swipe notice-swipe">
+          <div style="height: 0px; transition-duration: 0ms; transform: translateY(0px);" class="van-swipe__track van-swipe__track--vertical">
+            <div class="van-swipe-item" style="height: 0px;">内容 1</div>
+            <div class="van-swipe-item" style="height: 0px;">内容 2</div>
+            <div class="van-swipe-item" style="height: 0px;">内容 3</div>
+          </div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>
+`;
diff --git a/src/notice-bar/test/demo.legacy.js b/src/notice-bar/test/demo.spec.js
similarity index 100%
rename from src/notice-bar/test/demo.legacy.js
rename to src/notice-bar/test/demo.spec.js
diff --git a/src/notify/test/__snapshots__/demo.legacy.js.snap b/src/notify/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 9ac245eef..000000000
--- a/src/notify/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>基础用法</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>主要通知</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>成功通知</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>危险通知</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>警告通知</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义颜色</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义时长</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>组件调用</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <!---->
-  </div>
-</div>
-`;
diff --git a/src/notify/test/__snapshots__/demo.spec.js.snap b/src/notify/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..f027618d5
--- /dev/null
+++ b/src/notify/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>基础用法</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>主要通知</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>成功通知</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>危险通知</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>警告通知</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>自定义颜色</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>自定义时长</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>组件调用</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <!---->
+  <transition-stub>
+    <!---->
+  </transition-stub>
+</div>
+`;
diff --git a/src/notify/test/demo.legacy.js b/src/notify/test/demo.spec.js
similarity index 100%
rename from src/notify/test/demo.legacy.js
rename to src/notify/test/demo.spec.js
diff --git a/src/number-keyboard/test/__snapshots__/demo.legacy.js.snap b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
similarity index 85%
rename from src/number-keyboard/test/__snapshots__/demo.legacy.js.snap
rename to src/number-keyboard/test/__snapshots__/demo.spec.js.snap
index 8de8b1efe..198e91464 100644
--- a/src/number-keyboard/test/__snapshots__/demo.legacy.js.snap
+++ b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
@@ -1,44 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders demo correctly 1`] = `
-<div>
-  <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-    <div class="van-cell__value van-cell__value--alone">
-      弹出默认键盘
-    </div><i class="van-icon van-icon-arrow van-cell__right-icon">
-      <!----></i>
+exports[`should render demo and match snapshot 1`] = `
+<div class="van-cell van-cell--clickable" role="button" tabindex="0">
+  <!---->
+  <!---->
+  <div class="van-cell__value van-cell__value--alone">弹出默认键盘</div><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    <!---->
+    <!---->
+    <!----></i>
+  <!---->
+</div>
+<div class="van-cell van-cell--clickable" role="button" tabindex="0">
+  <!---->
+  <!---->
+  <div class="van-cell__value van-cell__value--alone">弹出带右侧栏的键盘</div><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    <!---->
+    <!---->
+    <!----></i>
+  <!---->
+</div>
+<div class="van-cell van-cell--clickable" role="button" tabindex="0">
+  <!---->
+  <!---->
+  <div class="van-cell__value van-cell__value--alone">弹出身份证号键盘</div><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    <!---->
+    <!---->
+    <!----></i>
+  <!---->
+</div>
+<div class="van-cell van-cell--clickable" role="button" tabindex="0">
+  <!---->
+  <!---->
+  <div class="van-cell__value van-cell__value--alone">弹出带标题的键盘</div><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    <!---->
+    <!---->
+    <!----></i>
+  <!---->
+</div>
+<div class="van-cell van-cell--clickable" role="button" tabindex="0">
+  <!---->
+  <!---->
+  <div class="van-cell__value van-cell__value--alone">弹出配置多个按键的键盘</div><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    <!---->
+    <!---->
+    <!----></i>
+  <!---->
+</div>
+<div class="van-cell van-cell--clickable van-field" role="button" tabindex="0">
+  <!---->
+  <div class="van-cell__title van-field__label"><span>双向绑定</span>
+    <!---->
   </div>
-  <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-    <div class="van-cell__value van-cell__value--alone">
-      弹出带右侧栏的键盘
-    </div><i class="van-icon van-icon-arrow van-cell__right-icon">
-      <!----></i>
-  </div>
-  <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-    <div class="van-cell__value van-cell__value--alone">
-      弹出身份证号键盘
-    </div><i class="van-icon van-icon-arrow van-cell__right-icon">
-      <!----></i>
-  </div>
-  <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-    <div class="van-cell__value van-cell__value--alone">
-      弹出带标题的键盘
-    </div><i class="van-icon van-icon-arrow van-cell__right-icon">
-      <!----></i>
-  </div>
-  <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-    <div class="van-cell__value van-cell__value--alone">
-      弹出配置多个按键的键盘
-    </div><i class="van-icon van-icon-arrow van-cell__right-icon">
-      <!----></i>
-  </div>
-  <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
-    <div class="van-cell__title van-field__label"><span>双向绑定</span></div>
-    <div class="van-cell__value van-field__value">
-      <div class="van-field__body"><input type="text" readonly="readonly" placeholder="点此输入" class="van-field__control"></div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body"><input type="text" class="van-field__control" readonly="" placeholder="点此输入">
+      <!---->
+      <!---->
+      <!---->
     </div>
+    <!---->
+    <!---->
   </div>
-  <div class="van-number-keyboard" name="van-slide-up">
+  <!---->
+  <!---->
+</div>
+<transition-stub>
+  <div class="van-number-keyboard">
+    <!---->
     <div class="van-number-keyboard__body">
       <div class="van-number-keyboard__keys">
         <div class="van-key__wrapper">
@@ -69,7 +96,7 @@ exports[`renders demo correctly 1`] = `
           <div role="button" tabindex="0" class="van-key">9</div>
         </div>
         <div class="van-key__wrapper">
-          <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+          <div role="button" tabindex="0" class="van-key"><svg class="van-key__collapse-icon" viewBox="0 0 30 24">
               <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
             </svg></div>
         </div>
@@ -77,14 +104,18 @@ exports[`renders demo correctly 1`] = `
           <div role="button" tabindex="0" class="van-key">0</div>
         </div>
         <div class="van-key__wrapper">
-          <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          <div role="button" tabindex="0" class="van-key van-key--delete"><svg class="van-key__delete-icon" viewBox="0 0 32 22">
               <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
             </svg></div>
         </div>
       </div>
+      <!---->
     </div>
   </div>
-  <div class="van-number-keyboard" style="display: none;" name="van-slide-up">
+</transition-stub>
+<transition-stub>
+  <div class="van-number-keyboard" style="display: none;">
+    <!---->
     <div class="van-number-keyboard__body">
       <div class="van-number-keyboard__keys">
         <div class="van-key__wrapper">
@@ -123,7 +154,7 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-number-keyboard__sidebar">
         <div class="van-key__wrapper">
-          <div role="button" tabindex="0" class="van-key van-key--large van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          <div role="button" tabindex="0" class="van-key van-key--large van-key--delete"><svg class="van-key__delete-icon" viewBox="0 0 32 22">
               <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
             </svg></div>
         </div>
@@ -133,8 +164,12 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;" name="van-slide-up">
-    <div class="van-number-keyboard__header"><button type="button" class="van-number-keyboard__close">完成</button></div>
+</transition-stub>
+<transition-stub>
+  <div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;">
+    <div class="van-number-keyboard__header">
+      <!---->
+      <!----><button type="button" class="van-number-keyboard__close">完成</button></div>
     <div class="van-number-keyboard__body">
       <div class="van-number-keyboard__keys">
         <div class="van-key__wrapper">
@@ -171,15 +206,19 @@ exports[`renders demo correctly 1`] = `
           <div role="button" tabindex="0" class="van-key">0</div>
         </div>
         <div class="van-key__wrapper">
-          <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          <div role="button" tabindex="0" class="van-key van-key--delete"><svg class="van-key__delete-icon" viewBox="0 0 32 22">
               <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
             </svg></div>
         </div>
       </div>
+      <!---->
     </div>
   </div>
-  <div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;" name="van-slide-up">
+</transition-stub>
+<transition-stub>
+  <div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;">
     <div class="van-number-keyboard__header">
+      <!---->
       <h2 class="van-number-keyboard__title">键盘标题</h2><button type="button" class="van-number-keyboard__close">完成</button>
     </div>
     <div class="van-number-keyboard__body">
@@ -218,14 +257,18 @@ exports[`renders demo correctly 1`] = `
           <div role="button" tabindex="0" class="van-key">0</div>
         </div>
         <div class="van-key__wrapper">
-          <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          <div role="button" tabindex="0" class="van-key van-key--delete"><svg class="van-key__delete-icon" viewBox="0 0 32 22">
               <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
             </svg></div>
         </div>
       </div>
+      <!---->
     </div>
   </div>
-  <div class="van-number-keyboard" style="display: none;" name="van-slide-up">
+</transition-stub>
+<transition-stub>
+  <div class="van-number-keyboard" style="display: none;">
+    <!---->
     <div class="van-number-keyboard__body">
       <div class="van-number-keyboard__keys">
         <div class="van-key__wrapper">
@@ -267,7 +310,7 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-number-keyboard__sidebar">
         <div class="van-key__wrapper">
-          <div role="button" tabindex="0" class="van-key van-key--large van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          <div role="button" tabindex="0" class="van-key van-key--large van-key--delete"><svg class="van-key__delete-icon" viewBox="0 0 32 22">
               <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
             </svg></div>
         </div>
@@ -277,7 +320,10 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-number-keyboard" style="display: none;" name="van-slide-up">
+</transition-stub>
+<transition-stub>
+  <div class="van-number-keyboard" style="display: none;">
+    <!---->
     <div class="van-number-keyboard__body">
       <div class="van-number-keyboard__keys">
         <div class="van-key__wrapper">
@@ -308,7 +354,7 @@ exports[`renders demo correctly 1`] = `
           <div role="button" tabindex="0" class="van-key">9</div>
         </div>
         <div class="van-key__wrapper">
-          <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+          <div role="button" tabindex="0" class="van-key"><svg class="van-key__collapse-icon" viewBox="0 0 30 24">
               <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
             </svg></div>
         </div>
@@ -316,12 +362,13 @@ exports[`renders demo correctly 1`] = `
           <div role="button" tabindex="0" class="van-key">0</div>
         </div>
         <div class="van-key__wrapper">
-          <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          <div role="button" tabindex="0" class="van-key van-key--delete"><svg class="van-key__delete-icon" viewBox="0 0 32 22">
               <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
             </svg></div>
         </div>
       </div>
+      <!---->
     </div>
   </div>
-</div>
+</transition-stub>
 `;
diff --git a/src/number-keyboard/test/demo.legacy.js b/src/number-keyboard/test/demo.spec.js
similarity index 100%
rename from src/number-keyboard/test/demo.legacy.js
rename to src/number-keyboard/test/demo.spec.js
diff --git a/src/overlay/test/__snapshots__/demo.legacy.js.snap b/src/overlay/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 2179861ea..000000000
--- a/src/overlay/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;">
-      <div class="van-button__content"><span class="van-button__text">显示遮罩层</span></div>
-    </button>
-    <div class="van-overlay" style="display: none;" name="van-fade"></div>
-  </div>
-  <div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;">
-      <div class="van-button__content"><span class="van-button__text">嵌入内容</span></div>
-    </button>
-    <div class="van-overlay" style="display: none;" name="van-fade">
-      <div class="wrapper">
-        <div class="block"></div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/overlay/test/__snapshots__/demo.spec.js.snap b/src/overlay/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..2e99f3980
--- /dev/null
+++ b/src/overlay/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div><button type="button" class="van-button van-button--primary van-button--normal" style="margin-left: 16px;">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">显示遮罩层</span>
+      <!---->
+    </div>
+  </button>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+</div>
+<div><button type="button" class="van-button van-button--primary van-button--normal" style="margin-left: 16px;">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">嵌入内容</span>
+      <!---->
+    </div>
+  </button>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+</div>
+`;
diff --git a/src/overlay/test/demo.legacy.js b/src/overlay/test/demo.spec.js
similarity index 100%
rename from src/overlay/test/demo.legacy.js
rename to src/overlay/test/demo.spec.js
diff --git a/src/pagination/test/__snapshots__/demo.legacy.js.snap b/src/pagination/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 4b4c78a6a..000000000
--- a/src/pagination/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <ul class="van-pagination">
-      <li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">上一页</li>
-      <li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">1</li>
-      <li class="van-pagination__item van-pagination__page van-hairline">2</li>
-      <li class="van-pagination__item van-pagination__page van-hairline">3</li>
-      <li class="van-pagination__item van-pagination__page van-hairline">4</li>
-      <li class="van-pagination__item van-pagination__page van-hairline">5</li>
-      <li class="van-pagination__item van-pagination__next van-hairline">下一页</li>
-    </ul>
-  </div>
-  <div>
-    <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>
-    </ul>
-  </div>
-  <div>
-    <ul class="van-pagination">
-      <li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">上一页</li>
-      <li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">1</li>
-      <li class="van-pagination__item van-pagination__page van-hairline">2</li>
-      <li class="van-pagination__item van-pagination__page van-hairline">3</li>
-      <li class="van-pagination__item van-pagination__page van-hairline">...</li>
-      <li class="van-pagination__item van-pagination__next van-hairline">下一页</li>
-    </ul>
-  </div>
-  <div>
-    <ul class="van-pagination">
-      <li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline"><i class="van-icon van-icon-arrow-left">
-          <!----></i></li>
-      <li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">1</li>
-      <li class="van-pagination__item van-pagination__page van-hairline">2</li>
-      <li class="van-pagination__item van-pagination__page van-hairline">3</li>
-      <li class="van-pagination__item van-pagination__page van-hairline">4</li>
-      <li class="van-pagination__item van-pagination__page van-hairline">5</li>
-      <li class="van-pagination__item van-pagination__next van-hairline"><i class="van-icon van-icon-arrow">
-          <!----></i></li>
-    </ul>
-  </div>
-</div>
-`;
diff --git a/src/pagination/test/__snapshots__/demo.spec.js.snap b/src/pagination/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..a3b683350
--- /dev/null
+++ b/src/pagination/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <ul class="van-pagination">
+    <li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">上一页</li>
+    <li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">1</li>
+    <li class="van-pagination__item van-pagination__page van-hairline">2</li>
+    <li class="van-pagination__item van-pagination__page van-hairline">3</li>
+    <li class="van-pagination__item van-pagination__page van-hairline">4</li>
+    <li class="van-pagination__item van-pagination__page van-hairline">5</li>
+    <!---->
+    <li class="van-pagination__item van-pagination__next van-hairline">下一页</li>
+  </ul>
+</div>
+<div>
+  <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>
+  </ul>
+</div>
+<div>
+  <ul class="van-pagination">
+    <li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">上一页</li>
+    <li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">1</li>
+    <li class="van-pagination__item van-pagination__page van-hairline">2</li>
+    <li class="van-pagination__item van-pagination__page van-hairline">3</li>
+    <li class="van-pagination__item van-pagination__page van-hairline">...</li>
+    <!---->
+    <li class="van-pagination__item van-pagination__next van-hairline">下一页</li>
+  </ul>
+</div>
+<div>
+  <ul class="van-pagination">
+    <li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline"><i class="van-badge__wrapper van-icon van-icon-arrow-left">
+        <!---->
+        <!---->
+        <!----></i></li>
+    <li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">1</li>
+    <li class="van-pagination__item van-pagination__page van-hairline">2</li>
+    <li class="van-pagination__item van-pagination__page van-hairline">3</li>
+    <li class="van-pagination__item van-pagination__page van-hairline">4</li>
+    <li class="van-pagination__item van-pagination__page van-hairline">5</li>
+    <!---->
+    <li class="van-pagination__item van-pagination__next van-hairline"><i class="van-badge__wrapper van-icon van-icon-arrow">
+        <!---->
+        <!---->
+        <!----></i></li>
+  </ul>
+</div>
+`;
diff --git a/src/pagination/test/demo.legacy.js b/src/pagination/test/demo.spec.js
similarity index 100%
rename from src/pagination/test/demo.legacy.js
rename to src/pagination/test/demo.spec.js
diff --git a/src/password-input/test/__snapshots__/demo.legacy.js.snap b/src/password-input/test/__snapshots__/demo.spec.js.snap
similarity index 50%
rename from src/password-input/test/__snapshots__/demo.legacy.js.snap
rename to src/password-input/test/__snapshots__/demo.spec.js.snap
index 6a78e4814..fdd6bbc92 100644
--- a/src/password-input/test/__snapshots__/demo.legacy.js.snap
+++ b/src/password-input/test/__snapshots__/demo.spec.js.snap
@@ -1,69 +1,131 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders demo correctly 1`] = `
+exports[`should render demo and match snapshot 1`] = `
 <div>
-  <div>
-    <div class="van-password-input">
-      <ul class="van-password-input__security van-hairline--surround">
-        <li class="van-password-input__item"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left van-password-input__item van-password-input__item--focus"><i style="visibility: hidden;"></i>
-          <div class="van-password-input__cursor"></div>
-        </li>
-        <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
-        <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
-      </ul>
-    </div>
+  <div class="van-password-input">
+    <ul class="van-password-input__security van-hairline--surround">
+      <li class="van-password-input__item"><i style="visibility: visible;"></i>
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i>
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i>
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item van-password-input__item--focus"><i style="visibility: hidden;"></i>
+        <div class="van-password-input__cursor"></div>
+      </li>
+      <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i>
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i>
+        <!---->
+      </li>
+    </ul>
+    <!---->
   </div>
-  <div>
-    <div class="van-password-input">
-      <ul class="van-password-input__security van-hairline--surround">
-        <li class="van-password-input__item"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
-      </ul>
-    </div>
+</div>
+<div>
+  <div class="van-password-input">
+    <ul class="van-password-input__security van-hairline--surround">
+      <li class="van-password-input__item"><i style="visibility: visible;"></i>
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i>
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i>
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i>
+        <!---->
+      </li>
+    </ul>
+    <!---->
   </div>
-  <div>
-    <div class="van-password-input">
-      <ul class="van-password-input__security">
-        <li class="van-password-input__item"><i style="visibility: visible;"></i></li>
-        <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i></li>
-        <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i></li>
-        <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
-        <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
-        <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
-      </ul>
-    </div>
+</div>
+<div>
+  <div class="van-password-input">
+    <ul class="van-password-input__security">
+      <li class="van-password-input__item"><i style="visibility: visible;"></i>
+        <!---->
+      </li>
+      <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i>
+        <!---->
+      </li>
+      <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i>
+        <!---->
+      </li>
+      <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i>
+        <!---->
+      </li>
+      <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i>
+        <!---->
+      </li>
+      <li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i>
+        <!---->
+      </li>
+    </ul>
+    <!---->
   </div>
-  <div>
-    <div class="van-password-input">
-      <ul class="van-password-input__security van-hairline--surround">
-        <li class="van-password-input__item">1</li>
-        <li class="van-hairline--left van-password-input__item">2</li>
-        <li class="van-hairline--left van-password-input__item">3</li>
-        <li class="van-hairline--left van-password-input__item"></li>
-        <li class="van-hairline--left van-password-input__item"></li>
-        <li class="van-hairline--left van-password-input__item"></li>
-      </ul>
-    </div>
+</div>
+<div>
+  <div class="van-password-input">
+    <ul class="van-password-input__security van-hairline--surround">
+      <li class="van-password-input__item">1
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item">2
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item">3
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item">
+        <!---->
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item">
+        <!---->
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item">
+        <!---->
+        <!---->
+      </li>
+    </ul>
+    <!---->
   </div>
-  <div>
-    <div class="van-password-input">
-      <ul class="van-password-input__security van-hairline--surround">
-        <li class="van-password-input__item"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
-        <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
-        <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
-      </ul>
-      <div class="van-password-input__info">密码为 6 位数字</div>
-    </div>
+</div>
+<div>
+  <div class="van-password-input">
+    <ul class="van-password-input__security van-hairline--surround">
+      <li class="van-password-input__item"><i style="visibility: visible;"></i>
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i>
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i>
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i>
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i>
+        <!---->
+      </li>
+      <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i>
+        <!---->
+      </li>
+    </ul>
+    <div class="van-password-input__info">密码为 6 位数字</div>
   </div>
-  <div class="van-number-keyboard" name="van-slide-up">
+</div>
+<transition-stub>
+  <div class="van-number-keyboard">
+    <!---->
     <div class="van-number-keyboard__body">
       <div class="van-number-keyboard__keys">
         <div class="van-key__wrapper">
@@ -94,7 +156,7 @@ exports[`renders demo correctly 1`] = `
           <div role="button" tabindex="0" class="van-key">9</div>
         </div>
         <div class="van-key__wrapper">
-          <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+          <div role="button" tabindex="0" class="van-key"><svg class="van-key__collapse-icon" viewBox="0 0 30 24">
               <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
             </svg></div>
         </div>
@@ -102,12 +164,13 @@ exports[`renders demo correctly 1`] = `
           <div role="button" tabindex="0" class="van-key">0</div>
         </div>
         <div class="van-key__wrapper">
-          <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          <div role="button" tabindex="0" class="van-key van-key--delete"><svg class="van-key__delete-icon" viewBox="0 0 32 22">
               <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
             </svg></div>
         </div>
       </div>
+      <!---->
     </div>
   </div>
-</div>
+</transition-stub>
 `;
diff --git a/src/password-input/test/demo.legacy.js b/src/password-input/test/demo.spec.js
similarity index 100%
rename from src/password-input/test/demo.legacy.js
rename to src/password-input/test/demo.spec.js
diff --git a/src/picker/test/__snapshots__/demo.legacy.js.snap b/src/picker/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 1ff6f9c21..000000000
--- a/src/picker/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,295 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">杭州</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">宁波</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">温州</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">绍兴</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">湖州</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">嘉兴</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">金华</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">衢州</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">杭州</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">宁波</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">温州</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">绍兴</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">湖州</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">嘉兴</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">金华</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">衢州</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">周一</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">周二</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">周三</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">周四</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">周五</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">上午</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">下午</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">晚上</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">浙江</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">福建</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">杭州</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">温州</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">西湖区</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">余杭区</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
-              <div class="van-ellipsis">杭州</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">宁波</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">温州</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <!---->
-      <div class="van-picker__columns" style="height: 264px;">
-        <div class="van-picker-column column1">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">浙江</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">福建</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column column2">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">杭州</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">宁波</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">温州</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">嘉兴</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">湖州</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
-      </div>
-      <div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular"><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: 264px;">
-        <div class="van-picker-column column1">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">浙江</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">福建</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column column2">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">杭州</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">宁波</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">温州</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">嘉兴</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">湖州</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
-      <div class="van-cell__title van-field__label"><span>城市</span></div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择城市" class="van-field__control"></div>
-      </div>
-    </div>
-    <!---->
-  </div>
-</div>
-`;
diff --git a/src/picker/test/__snapshots__/demo.spec.js.snap b/src/picker/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..aecfb9a0f
--- /dev/null
+++ b/src/picker/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,325 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-picker">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">标题</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">杭州</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">宁波</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">温州</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">绍兴</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">湖州</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">嘉兴</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">金华</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">衢州</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">标题</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">杭州</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">宁波</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">温州</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">绍兴</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">湖州</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">嘉兴</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">金华</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">衢州</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">标题</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">周一</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">周二</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">周三</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">周四</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">周五</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">上午</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">下午</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">晚上</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">标题</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">浙江</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">福建</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">杭州</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">温州</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">西湖区</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">余杭区</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">标题</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled">
+            <div class="van-ellipsis">杭州</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">宁波</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">温州</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">标题</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <!---->
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column column1">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">浙江</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">福建</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column column2">
+        <ul style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">杭州</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">宁波</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">温州</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">嘉兴</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">湖州</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-picker">
+    <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+      <div class="van-picker__title van-ellipsis">标题</div><button type="button" class="van-picker__confirm">确认</button>
+    </div>
+    <div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span>
+      <!---->
+    </div>
+    <!---->
+    <div class="van-picker__columns" style="height: 264px;">
+      <div class="van-picker-column column1">
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">浙江</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">福建</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker-column column2">
+        <ul style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;" class="van-picker-column__wrapper">
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">杭州</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">宁波</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
+            <div class="van-ellipsis">温州</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">嘉兴</div>
+          </li>
+          <li role="button" style="height: 44px;" tabindex="0" class="van-picker-column__item">
+            <div class="van-ellipsis">湖州</div>
+          </li>
+        </ul>
+      </div>
+      <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+      <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable van-field" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title van-field__label"><span>城市</span>
+      <!---->
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control" readonly="" placeholder="选择城市">
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <!---->
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+</div>
+`;
diff --git a/src/picker/test/demo.legacy.js b/src/picker/test/demo.spec.js
similarity index 100%
rename from src/picker/test/demo.legacy.js
rename to src/picker/test/demo.spec.js
diff --git a/src/popup/test/__snapshots__/demo.legacy.js.snap b/src/popup/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 29daf9410..000000000
--- a/src/popup/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,65 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>展示弹出层</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <!---->
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>顶部弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>底部弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>左侧弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>右侧弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <!---->
-    <!---->
-    <!---->
-    <!---->
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>关闭图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>图标位置</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <!---->
-    <!---->
-    <!---->
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>圆角弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <!---->
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>指定挂载节点</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/popup/test/__snapshots__/demo.spec.js.snap b/src/popup/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..eae760f5d
--- /dev/null
+++ b/src/popup/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,180 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>展示弹出层</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>顶部弹出</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>底部弹出</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>左侧弹出</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>右侧弹出</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>关闭图标</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>自定义图标</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>图标位置</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>圆角弹窗</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>指定挂载节点</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <!--teleport start-->
+  <!--teleport end-->
+</div>
+`;
diff --git a/src/popup/test/demo.legacy.js b/src/popup/test/demo.spec.js
similarity index 100%
rename from src/popup/test/demo.legacy.js
rename to src/popup/test/demo.spec.js
diff --git a/src/progress/test/__snapshots__/demo.legacy.js.snap b/src/progress/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 66c2e29a9..000000000
--- a/src/progress/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px;">50%</span></span></div>
-  </div>
-  <div>
-    <div class="van-progress" style="height: 8px;"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px;">50%</span></span></div>
-  </div>
-  <div>
-    <div class="van-progress"><span class="van-progress__portion" style="background: rgb(202, 202, 202); width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(202, 202, 202);">50%</span></span></div>
-  </div>
-  <div>
-    <div class="van-progress"><span class="van-progress__portion" style="background: rgb(242, 130, 106); width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(242, 130, 106);">橙色</span></span></div>
-    <div class="van-progress"><span class="van-progress__portion" style="background: rgb(238, 10, 36); width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(238, 10, 36);">红色</span></span></div>
-    <div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(114, 50, 221);">紫色</span></span></div>
-  </div>
-</div>
-`;
diff --git a/src/progress/test/__snapshots__/demo.spec.js.snap b/src/progress/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..60c78ebb0
--- /dev/null
+++ b/src/progress/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span style="left: 0px;" class="van-progress__pivot">50%</span></span></div>
+</div>
+<div>
+  <div class="van-progress" style="height: 8px;"><span class="van-progress__portion" style="width: 0px;"><span style="left: 0px;" class="van-progress__pivot">50%</span></span></div>
+</div>
+<div>
+  <div class="van-progress"><span class="van-progress__portion" style="background: rgb(202, 202, 202); width: 0px;"><span style="left: 0px; background: rgb(202, 202, 202);" class="van-progress__pivot">50%</span></span></div>
+</div>
+<div>
+  <div class="van-progress"><span class="van-progress__portion" style="background: rgb(242, 130, 106); width: 0px;"><span style="left: 0px; background: rgb(242, 130, 106);" class="van-progress__pivot">橙色</span></span></div>
+  <div class="van-progress"><span class="van-progress__portion" style="background: rgb(238, 10, 36); width: 0px;"><span style="left: 0px; background: rgb(238, 10, 36);" class="van-progress__pivot">红色</span></span></div>
+  <div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span style="left: 0px; background: rgb(114, 50, 221);" class="van-progress__pivot">紫色</span></span></div>
+</div>
+`;
diff --git a/src/progress/test/demo.legacy.js b/src/progress/test/demo.spec.js
similarity index 100%
rename from src/progress/test/demo.legacy.js
rename to src/progress/test/demo.spec.js
diff --git a/src/pull-refresh/test/__snapshots__/demo.legacy.js.snap b/src/pull-refresh/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index ab7e8350b..000000000
--- a/src/pull-refresh/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div class="van-tabs van-tabs--line">
-    <div class="van-tabs__wrap">
-      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
-        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">成功提示</span></div>
-        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">自定义提示</span></div>
-        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-      </div>
-    </div>
-    <div class="van-tabs__content">
-      <div role="tabpanel" class="van-tab__pane" style="">
-        <div class="van-pull-refresh">
-          <div class="van-pull-refresh__track" style="transition-duration: 0ms;">
-            <div class="van-pull-refresh__head"></div>
-            <p>下拉试试</p>
-          </div>
-        </div>
-      </div>
-      <div role="tabpanel" class="van-tab__pane" style="display: none;">
-        <!---->
-      </div>
-      <div role="tabpanel" class="van-tab__pane" style="display: none;">
-        <!---->
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/pull-refresh/test/__snapshots__/demo.spec.js.snap b/src/pull-refresh/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..000948eb4
--- /dev/null
+++ b/src/pull-refresh/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div class="van-tabs van-tabs--line">
+  <div class="van-tabs__wrap">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+      <!---->
+      <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
+      <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">成功提示</span></div>
+      <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">自定义提示</span></div>
+      <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+      <!---->
+    </div>
+  </div>
+  <div class="van-tabs__content">
+    <div role="tabpanel" class="van-tab__pane" style="">
+      <div class="van-pull-refresh">
+        <div class="van-pull-refresh__track" style="transition-duration: 0ms;">
+          <div class="van-pull-refresh__head"></div>
+          <p>下拉试试</p>
+        </div>
+      </div>
+    </div>
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
+      <!---->
+    </div>
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/pull-refresh/test/demo.legacy.js b/src/pull-refresh/test/demo.spec.js
similarity index 100%
rename from src/pull-refresh/test/demo.legacy.js
rename to src/pull-refresh/test/demo.spec.js
diff --git a/src/radio/test/__snapshots__/demo.legacy.js.snap b/src/radio/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 37780ae48..000000000
--- a/src/radio/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,132 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="radiogroup" class="demo-radio-group van-radio-group">
-      <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">单选框 1</span>
-      </div>
-      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">单选框 2</span>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="radiogroup" class="demo-radio-group van-radio-group van-radio-group--horizontal">
-      <div role="radio" tabindex="0" aria-checked="true" class="van-radio van-radio--horizontal">
-        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">单选框 1</span>
-      </div>
-      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio van-radio--horizontal">
-        <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">单选框 2</span>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="radiogroup" class="demo-radio-group van-radio-group">
-      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio van-radio--disabled">
-        <div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 1</span>
-      </div>
-      <div role="radio" tabindex="-1" aria-checked="true" class="van-radio van-radio--disabled">
-        <div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled van-radio__icon--checked"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 2</span>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="radiogroup" class="demo-radio-group van-radio-group">
-      <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--square van-radio__icon--checked"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">单选框 1</span>
-      </div>
-      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--square"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">单选框 2</span>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="radiogroup" class="demo-radio-group van-radio-group">
-      <div role="radio" tabindex="0" aria-checked="true" class="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: rgb(7, 193, 96);">
-            <!----></i></div><span class="van-radio__label">
-        单选框 1
-      </span>
-      </div>
-      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">
-        单选框 2
-      </span>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="radiogroup" class="demo-radio-group van-radio-group">
-      <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 24px;"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
-            <!----></i></div><span class="van-radio__label">
-        单选框 1
-      </span>
-      </div>
-      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--round" style="font-size: 24px;"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">
-        单选框 2
-      </span>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="radiogroup" class="demo-radio-group van-radio-group">
-      <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><img src="https://img.yzcdn.cn/vant/user-active.png"></div><span class="van-radio__label">
-        单选框 1
-        </span>
-      </div>
-      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--round"><img src="https://img.yzcdn.cn/vant/user-inactive.png"></div><span class="van-radio__label">
-        单选框 2
-        </span>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="radiogroup" class="demo-radio-group van-radio-group">
-      <div role="radio" tabindex="0" aria-checked="true" class="van-radio van-radio--label-disabled">
-        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">单选框 1</span>
-      </div>
-      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio van-radio--label-disabled">
-        <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">单选框 2</span>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="radiogroup" class="van-radio-group">
-      <div class="van-cell-group van-hairline--top-bottom">
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-          <div class="van-cell__title"><span>单选框1</span></div>
-          <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-            <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
-                <!----></i></div>
-          </div>
-        </div>
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-          <div class="van-cell__title"><span>单选框2</span></div>
-          <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-            <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
-                <!----></i></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/radio/test/__snapshots__/demo.spec.js.snap b/src/radio/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..f7b0c1bbe
--- /dev/null
+++ b/src/radio/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-radio-group demo-radio-group" role="radiogroup">
+    <div role="radio" class="van-radio" tabindex="0" aria-checked="true">
+      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label">单选框 1</span>
+    </div>
+    <div role="radio" class="van-radio" tabindex="0" aria-checked="false">
+      <div class="van-radio__icon van-radio__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label">单选框 2</span>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-radio-group van-radio-group--horizontal demo-radio-group" role="radiogroup">
+    <div role="radio" class="van-radio van-radio--horizontal" tabindex="0" aria-checked="true">
+      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label">单选框 1</span>
+    </div>
+    <div role="radio" class="van-radio van-radio--horizontal" tabindex="0" aria-checked="false">
+      <div class="van-radio__icon van-radio__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label">单选框 2</span>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-radio-group demo-radio-group" role="radiogroup">
+    <div role="radio" class="van-radio van-radio--disabled" tabindex="-1" aria-checked="false">
+      <div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 1</span>
+    </div>
+    <div role="radio" class="van-radio van-radio--disabled" tabindex="-1" aria-checked="true">
+      <div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled van-radio__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 2</span>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-radio-group demo-radio-group" role="radiogroup">
+    <div role="radio" class="van-radio" tabindex="0" aria-checked="true">
+      <div class="van-radio__icon van-radio__icon--square van-radio__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label">单选框 1</span>
+    </div>
+    <div role="radio" class="van-radio" tabindex="0" aria-checked="false">
+      <div class="van-radio__icon van-radio__icon--square"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label">单选框 2</span>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-radio-group demo-radio-group" role="radiogroup">
+    <div role="radio" class="van-radio" tabindex="0" aria-checked="true">
+      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label">单选框 1 </span>
+    </div>
+    <div role="radio" class="van-radio" tabindex="0" aria-checked="false">
+      <div class="van-radio__icon van-radio__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label">单选框 2 </span>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-radio-group demo-radio-group" role="radiogroup">
+    <div role="radio" class="van-radio" tabindex="0" aria-checked="true">
+      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 24px;"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label">单选框 1 </span>
+    </div>
+    <div role="radio" class="van-radio" tabindex="0" aria-checked="false">
+      <div class="van-radio__icon van-radio__icon--round" style="font-size: 24px;"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label">单选框 2 </span>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-radio-group demo-radio-group" role="radiogroup">
+    <div role="radio" class="van-radio" tabindex="0" aria-checked="true">
+      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><img src="https://img.yzcdn.cn/vant/user-active.png"></div><span class="van-radio__label">单选框 1 </span>
+    </div>
+    <div role="radio" class="van-radio" tabindex="0" aria-checked="false">
+      <div class="van-radio__icon van-radio__icon--round"><img src="https://img.yzcdn.cn/vant/user-inactive.png"></div><span class="van-radio__label">单选框 2 </span>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-radio-group demo-radio-group" role="radiogroup">
+    <div role="radio" class="van-radio van-radio--label-disabled" tabindex="0" aria-checked="true">
+      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label">单选框 1</span>
+    </div>
+    <div role="radio" class="van-radio van-radio--label-disabled" tabindex="0" aria-checked="false">
+      <div class="van-radio__icon van-radio__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+          <!---->
+          <!---->
+          <!----></i></div><span class="van-radio__label">单选框 2</span>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-radio-group" role="radiogroup">
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+        <!---->
+        <div class="van-cell__title"><span>单选框1</span>
+          <!---->
+        </div>
+        <!---->
+        <div role="radio" class="van-radio" tabindex="0" aria-checked="true">
+          <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+        <!---->
+        <div class="van-cell__title"><span>单选框2</span>
+          <!---->
+        </div>
+        <!---->
+        <div role="radio" class="van-radio" tabindex="0" aria-checked="false">
+          <div class="van-radio__icon van-radio__icon--round"><i class="van-badge__wrapper van-icon van-icon-success">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/radio/test/demo.legacy.js b/src/radio/test/demo.spec.js
similarity index 100%
rename from src/radio/test/demo.legacy.js
rename to src/radio/test/demo.spec.js
diff --git a/src/rate/test/__snapshots__/demo.legacy.js.snap b/src/rate/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 7e13e68b1..000000000
--- a/src/rate/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,125 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div tabindex="0" role="radiogroup" class="van-rate">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
-          <!----></i></div>
-    </div>
-  </div>
-  <div>
-    <div tabindex="0" role="radiogroup" class="van-rate">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon">
-          <!----></i></div>
-    </div>
-  </div>
-  <div>
-    <div tabindex="0" role="radiogroup" class="van-rate">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" 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 role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" 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 tabindex="0" role="radiogroup" class="van-rate">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="font-size: 25px;">
-          <!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="font-size: 25px;">
-          <!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" 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 van-rate__icon--full" style="font-size: 25px;">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" 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 role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" 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 tabindex="0" role="radiogroup" class="van-rate">
-      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="4" aria-checked="true" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="6" aria-checked="false" class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon">
-          <!----></i></div>
-    </div>
-  </div>
-  <div>
-    <div tabindex="0" role="radiogroup" class="van-rate van-rate--disabled">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled">
-          <!----></i></div>
-    </div>
-  </div>
-  <div>
-    <div tabindex="0" role="radiogroup" class="van-rate van-rate--readonly">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
-          <!----></i></div>
-    </div>
-  </div>
-  <div>
-    <div tabindex="0" role="radiogroup" class="van-rate">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
-          <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
-          <!----></i></div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/rate/test/__snapshots__/demo.spec.js.snap b/src/rate/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..a9dd8329d
--- /dev/null
+++ b/src/rate/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,287 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div role="radiogroup" class="van-rate" tabindex="0">
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="1">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="2">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="3">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon" data-score="4">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon" data-score="5">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div role="radiogroup" class="van-rate" tabindex="0">
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full" data-score="1">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full" data-score="2">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full" data-score="3">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon" data-score="4">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon" data-score="5">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div role="radiogroup" class="van-rate" tabindex="0">
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;" data-score="1">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;" data-score="2">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;" data-score="3">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;" data-score="4">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;" data-score="5">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div role="radiogroup" class="van-rate" tabindex="0">
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" style="font-size: 25px;" data-score="1">
+        <!---->
+        <!---->
+        <!----></i><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;" data-score="0.5">
+        <!---->
+        <!---->
+        <!----></i></div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" style="font-size: 25px;" data-score="2">
+        <!---->
+        <!---->
+        <!----></i><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;" data-score="1.5">
+        <!---->
+        <!---->
+        <!----></i></div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;" data-score="3">
+        <!---->
+        <!---->
+        <!----></i><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;" data-score="2.5">
+        <!---->
+        <!---->
+        <!----></i></div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;" data-score="4">
+        <!---->
+        <!---->
+        <!----></i><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;" data-score="3.5">
+        <!---->
+        <!---->
+        <!----></i></div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;" data-score="5">
+        <!---->
+        <!---->
+        <!----></i><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;" data-score="4.5">
+        <!---->
+        <!---->
+        <!----></i></div>
+  </div>
+</div>
+<div>
+  <div role="radiogroup" class="van-rate" tabindex="0">
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="6" aria-posinset="1" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="1">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="6" aria-posinset="2" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="2">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="6" aria-posinset="3" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="3">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="6" aria-posinset="4" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="4">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="6" aria-posinset="5" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon" data-score="5">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="6" aria-posinset="6" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon" data-score="6">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div role="radiogroup" class="van-rate van-rate--disabled" tabindex="0">
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full" data-score="1">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full" data-score="2">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full" data-score="3">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled" data-score="4">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled" data-score="5">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div role="radiogroup" class="van-rate van-rate--readonly" tabindex="0">
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="1">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="2">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="3">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon" data-score="4">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon" data-score="5">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div role="radiogroup" class="van-rate" tabindex="0">
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="1">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true"><i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full" data-score="2">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon" data-score="3">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon" data-score="4">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+    <div role="radio" class="van-rate__item" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false"><i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon" data-score="5">
+        <!---->
+        <!---->
+        <!----></i>
+      <!---->
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/rate/test/demo.legacy.js b/src/rate/test/demo.spec.js
similarity index 100%
rename from src/rate/test/demo.legacy.js
rename to src/rate/test/demo.spec.js
diff --git a/src/search/test/__snapshots__/demo.legacy.js.snap b/src/search/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 8254c31ba..000000000
--- a/src/search/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-search">
-      <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 van-field__value">
-            <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" class="van-field__control"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <form action="/">
-      <div class="van-search van-search--show-action">
-        <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 van-field__value">
-              <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" class="van-field__control"></div>
-            </div>
-          </div>
-        </div>
-        <div role="button" tabindex="0" class="van-search__action">取消</div>
-      </div>
-    </form>
-  </div>
-  <div>
-    <div class="van-search">
-      <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 van-field__value">
-            <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" class="van-field__control van-field__control--center"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-search">
-      <div class="van-search__content van-search__content--square">
-        <div class="van-cell van-cell--borderless van-field van-field--disabled">
-          <div class="van-field__left-icon"><i class="van-icon van-icon-search">
-              <!----></i></div>
-          <div class="van-cell__value van-cell__value--alone van-field__value">
-            <div class="van-field__body"><input type="search" disabled="disabled" placeholder="请输入搜索关键词" class="van-field__control"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-search" style="background: rgb(79, 192, 141);">
-      <div class="van-search__content van-search__content--round">
-        <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 van-field__value">
-            <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" class="van-field__control"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-search van-search--show-action">
-      <div class="van-search__content van-search__content--square">
-        <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 van-field__value">
-            <div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" class="van-field__control"></div>
-          </div>
-        </div>
-      </div>
-      <div role="button" tabindex="0" class="van-search__action">
-        <div>搜索</div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/search/test/__snapshots__/demo.spec.js.snap b/src/search/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..0e91e90d3
--- /dev/null
+++ b/src/search/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-search">
+    <!---->
+    <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-badge__wrapper van-icon van-icon-search">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+        <div class="van-cell__value van-cell__value--alone van-field__value">
+          <div class="van-field__body"><input type="search" class="van-field__control" placeholder="请输入搜索关键词">
+            <!---->
+            <!---->
+            <!---->
+          </div>
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>
+<div>
+  <form action="/">
+    <div class="van-search van-search--show-action">
+      <!---->
+      <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-badge__wrapper van-icon van-icon-search">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+          <div class="van-cell__value van-cell__value--alone van-field__value">
+            <div class="van-field__body"><input type="search" class="van-field__control" placeholder="请输入搜索关键词">
+              <!---->
+              <!---->
+              <!---->
+            </div>
+            <!---->
+            <!---->
+          </div>
+          <!---->
+          <!---->
+        </div>
+      </div>
+      <div class="van-search__action" role="button" tabindex="0">取消</div>
+    </div>
+  </form>
+</div>
+<div>
+  <div class="van-search">
+    <!---->
+    <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-badge__wrapper van-icon van-icon-search">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+        <div class="van-cell__value van-cell__value--alone van-field__value">
+          <div class="van-field__body"><input type="search" class="van-field__control van-field__control--center" placeholder="请输入搜索关键词">
+            <!---->
+            <!---->
+            <!---->
+          </div>
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-search">
+    <!---->
+    <div class="van-search__content van-search__content--square">
+      <!---->
+      <div class="van-cell van-cell--borderless van-field van-field--disabled">
+        <div class="van-field__left-icon"><i class="van-badge__wrapper van-icon van-icon-search">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+        <div class="van-cell__value van-cell__value--alone van-field__value">
+          <div class="van-field__body"><input type="search" class="van-field__control" disabled="" placeholder="请输入搜索关键词">
+            <!---->
+            <!---->
+            <!---->
+          </div>
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-search" style="background: rgb(79, 192, 141);">
+    <!---->
+    <div class="van-search__content van-search__content--round">
+      <!---->
+      <div class="van-cell van-cell--borderless van-field">
+        <div class="van-field__left-icon"><i class="van-badge__wrapper van-icon van-icon-search">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+        <div class="van-cell__value van-cell__value--alone van-field__value">
+          <div class="van-field__body"><input type="search" class="van-field__control" placeholder="请输入搜索关键词">
+            <!---->
+            <!---->
+            <!---->
+          </div>
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-search van-search--show-action">
+    <!---->
+    <div class="van-search__content van-search__content--square">
+      <div class="van-search__label">地址</div>
+      <div class="van-cell van-cell--borderless van-field">
+        <div class="van-field__left-icon"><i class="van-badge__wrapper van-icon van-icon-search">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <!---->
+        <div class="van-cell__value van-cell__value--alone van-field__value">
+          <div class="van-field__body"><input type="search" class="van-field__control" placeholder="请输入搜索关键词">
+            <!---->
+            <!---->
+            <!---->
+          </div>
+          <!---->
+          <!---->
+        </div>
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <div class="van-search__action" role="button" tabindex="0">
+      <div>搜索</div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/search/test/demo.legacy.js b/src/search/test/demo.spec.js
similarity index 100%
rename from src/search/test/demo.legacy.js
rename to src/search/test/demo.spec.js
diff --git a/src/share-sheet/test/__snapshots__/demo.legacy.js.snap b/src/share-sheet/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 0e8949134..000000000
--- a/src/share-sheet/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>显示分享面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <!---->
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>显示分享面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <!---->
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>显示分享面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <!---->
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>显示分享面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <!---->
-  </div>
-</div>
-`;
diff --git a/src/share-sheet/test/__snapshots__/demo.spec.js.snap b/src/share-sheet/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..0f6792445
--- /dev/null
+++ b/src/share-sheet/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>显示分享面板</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>显示分享面板</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>显示分享面板</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>显示分享面板</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+  <transition-stub>
+    <!---->
+  </transition-stub>
+</div>
+`;
diff --git a/src/share-sheet/test/demo.legacy.js b/src/share-sheet/test/demo.spec.js
similarity index 100%
rename from src/share-sheet/test/demo.legacy.js
rename to src/share-sheet/test/demo.spec.js
diff --git a/src/sidebar/test/__snapshots__/demo.legacy.js.snap b/src/sidebar/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index a5221621b..000000000
--- a/src/sidebar/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,77 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div class="van-grid">
-    <div class="van-grid-item" style="flex-basis: 50%;">
-      <div class="van-grid-item__content van-grid-item__content--center">
-        <h3 class="demo-sidebar-title">基础用法</h3>
-        <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
-            <div class="van-sidebar-item__text">标签名
-              <!---->
-            </div>
-          </a> <a class="van-sidebar-item">
-            <div class="van-sidebar-item__text">标签名
-              <!---->
-            </div>
-          </a> <a class="van-sidebar-item">
-            <div class="van-sidebar-item__text">标签名
-              <!---->
-            </div>
-          </a></div>
-      </div>
-    </div>
-    <div class="van-grid-item" style="flex-basis: 50%;">
-      <div class="van-grid-item__content van-grid-item__content--center">
-        <h3 class="demo-sidebar-title">徽标提示</h3>
-        <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
-            <div class="van-sidebar-item__text">标签名<div class="van-badge van-badge--dot van-sidebar-item__badge"></div>
-            </div>
-          </a> <a class="van-sidebar-item">
-            <div class="van-sidebar-item__text">标签名<div class="van-badge van-sidebar-item__badge">5</div>
-            </div>
-          </a> <a class="van-sidebar-item">
-            <div class="van-sidebar-item__text">标签名<div class="van-badge van-sidebar-item__badge">99+</div>
-            </div>
-          </a></div>
-      </div>
-    </div>
-    <div class="van-grid-item" style="flex-basis: 50%;">
-      <div class="van-grid-item__content van-grid-item__content--center">
-        <h3 class="demo-sidebar-title">禁用选项</h3>
-        <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
-            <div class="van-sidebar-item__text">标签名
-              <!---->
-            </div>
-          </a> <a class="van-sidebar-item van-sidebar-item--disabled">
-            <div class="van-sidebar-item__text">标签名
-              <!---->
-            </div>
-          </a> <a class="van-sidebar-item">
-            <div class="van-sidebar-item__text">标签名
-              <!---->
-            </div>
-          </a></div>
-      </div>
-    </div>
-    <div class="van-grid-item" style="flex-basis: 50%;">
-      <div class="van-grid-item__content van-grid-item__content--center">
-        <h3 class="demo-sidebar-title">监听切换事件</h3>
-        <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
-            <div class="van-sidebar-item__text">标签名1
-              <!---->
-            </div>
-          </a> <a class="van-sidebar-item">
-            <div class="van-sidebar-item__text">标签名2
-              <!---->
-            </div>
-          </a> <a class="van-sidebar-item">
-            <div class="van-sidebar-item__text">标签名3
-              <!---->
-            </div>
-          </a></div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/sidebar/test/__snapshots__/demo.spec.js.snap b/src/sidebar/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..22a41b675
--- /dev/null
+++ b/src/sidebar/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div class="van-grid">
+  <div class="van-grid-item" style="flex-basis: 50%;">
+    <div class="van-grid-item__content van-grid-item__content--center">
+      <h3 class="demo-sidebar-title">基础用法</h3>
+      <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
+          <div class="van-badge__wrapper van-sidebar-item__text">标签名
+            <!---->
+          </div>
+        </a><a class="van-sidebar-item">
+          <div class="van-badge__wrapper van-sidebar-item__text">标签名
+            <!---->
+          </div>
+        </a><a class="van-sidebar-item">
+          <div class="van-badge__wrapper van-sidebar-item__text">标签名
+            <!---->
+          </div>
+        </a></div>
+    </div>
+  </div>
+  <div class="van-grid-item" style="flex-basis: 50%;">
+    <div class="van-grid-item__content van-grid-item__content--center">
+      <h3 class="demo-sidebar-title">徽标提示</h3>
+      <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
+          <div class="van-badge__wrapper van-sidebar-item__text">标签名<div class="van-badge van-badge--dot van-badge--fixed">
+              <!---->
+            </div>
+          </div>
+        </a><a class="van-sidebar-item">
+          <div class="van-badge__wrapper van-sidebar-item__text">标签名<div class="van-badge van-badge--fixed">5</div>
+          </div>
+        </a><a class="van-sidebar-item">
+          <div class="van-badge__wrapper van-sidebar-item__text">标签名<div class="van-badge van-badge--fixed">99+</div>
+          </div>
+        </a></div>
+    </div>
+  </div>
+  <div class="van-grid-item" style="flex-basis: 50%;">
+    <div class="van-grid-item__content van-grid-item__content--center">
+      <h3 class="demo-sidebar-title">禁用选项</h3>
+      <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
+          <div class="van-badge__wrapper van-sidebar-item__text">标签名
+            <!---->
+          </div>
+        </a><a class="van-sidebar-item van-sidebar-item--disabled">
+          <div class="van-badge__wrapper van-sidebar-item__text">标签名
+            <!---->
+          </div>
+        </a><a class="van-sidebar-item">
+          <div class="van-badge__wrapper van-sidebar-item__text">标签名
+            <!---->
+          </div>
+        </a></div>
+    </div>
+  </div>
+  <div class="van-grid-item" style="flex-basis: 50%;">
+    <div class="van-grid-item__content van-grid-item__content--center">
+      <h3 class="demo-sidebar-title">监听切换事件</h3>
+      <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
+          <div class="van-badge__wrapper van-sidebar-item__text">标签名1
+            <!---->
+          </div>
+        </a><a class="van-sidebar-item">
+          <div class="van-badge__wrapper van-sidebar-item__text">标签名2
+            <!---->
+          </div>
+        </a><a class="van-sidebar-item">
+          <div class="van-badge__wrapper van-sidebar-item__text">标签名3
+            <!---->
+          </div>
+        </a></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/sidebar/test/demo.legacy.js b/src/sidebar/test/demo.spec.js
similarity index 100%
rename from src/sidebar/test/demo.legacy.js
rename to src/sidebar/test/demo.spec.js
diff --git a/src/skeleton/test/__snapshots__/demo.legacy.js.snap b/src/skeleton/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 785a20ad3..000000000
--- a/src/skeleton/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <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>
-      </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__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>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div role="switch" aria-checked="false" 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__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>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/skeleton/test/__snapshots__/demo.spec.js.snap b/src/skeleton/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..5a65dd484
--- /dev/null
+++ b/src/skeleton/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 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>
+    </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__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>
+    </div>
+  </div>
+</div>
+<div>
+  <div role="switch" class="van-switch" style="font-size: 24px;" aria-checked="false">
+    <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__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>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/skeleton/test/demo.legacy.js b/src/skeleton/test/demo.spec.js
similarity index 100%
rename from src/skeleton/test/demo.legacy.js
rename to src/skeleton/test/demo.spec.js
diff --git a/src/slider/test/__snapshots__/demo.legacy.js.snap b/src/slider/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 568a82e25..000000000
--- a/src/slider/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,93 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-slider">
-      <div class="van-slider__bar" style="width: 50%;">
-        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
-          <div class="van-slider__button"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-slider">
-      <div class="van-slider__bar" style="width: 40%; left: 20%;">
-        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="20,60" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper-left">
-          <div class="van-slider__button"></div>
-        </div>
-        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="20,60" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper-right">
-          <div class="van-slider__button"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-slider">
-      <div class="van-slider__bar" style="width: 50%;">
-        <div role="slider" tabindex="0" aria-valuemin="-50" aria-valuenow="0" aria-valuemax="50" aria-orientation="horizontal" class="van-slider__button-wrapper">
-          <div class="van-slider__button"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-slider van-slider--disabled">
-      <div class="van-slider__bar" style="width: 50%;">
-        <div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
-          <div class="van-slider__button"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-slider">
-      <div class="van-slider__bar" style="width: 50%;">
-        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
-          <div class="van-slider__button"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-slider" style="height: 4px;">
-      <div class="van-slider__bar" style="width: 50%; background: rgb(238, 10, 36);">
-        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
-          <div class="van-slider__button"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-slider">
-      <div class="van-slider__bar" style="width: 50%; background: rgb(238, 10, 36);">
-        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
-          <div class="custom-button">50</div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div style="height: 150px; padding-left: 30px;">
-      <div class="van-slider van-slider--vertical">
-        <div class="van-slider__bar" style="height: 50%;">
-          <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
-            <div class="van-slider__button"></div>
-          </div>
-        </div>
-      </div>
-      <div class="van-slider van-slider--vertical" style="margin-left: 100px;">
-        <div class="van-slider__bar" style="height: 40%; top: 20%;">
-          <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="20,60" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper-left">
-            <div class="van-slider__button"></div>
-          </div>
-          <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="20,60" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper-right">
-            <div class="van-slider__button"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/slider/test/__snapshots__/demo.spec.js.snap b/src/slider/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..60ea3deac
--- /dev/null
+++ b/src/slider/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-slider">
+    <div class="van-slider__bar" style="width: 50%; left: 0%;">
+      <div role="slider" class="van-slider__button-wrapper" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal">
+        <div class="van-slider__button"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-slider">
+    <div class="van-slider__bar" style="width: 40%; left: 20%;">
+      <div role="slider" class="van-slider__button-wrapper-left" tabindex="0" aria-valuemin="0" aria-valuenow="20" aria-valuemax="100" aria-orientation="horizontal">
+        <div class="van-slider__button"></div>
+      </div>
+      <div role="slider" class="van-slider__button-wrapper-right" tabindex="0" aria-valuemin="0" aria-valuenow="60" aria-valuemax="100" aria-orientation="horizontal">
+        <div class="van-slider__button"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-slider">
+    <div class="van-slider__bar" style="width: 50%; left: 0%;">
+      <div role="slider" class="van-slider__button-wrapper" tabindex="0" aria-valuemin="-50" aria-valuenow="0" aria-valuemax="50" aria-orientation="horizontal">
+        <div class="van-slider__button"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-slider van-slider--disabled">
+    <div class="van-slider__bar" style="width: 50%; left: 0%;">
+      <div role="slider" class="van-slider__button-wrapper" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal">
+        <div class="van-slider__button"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-slider">
+    <div class="van-slider__bar" style="width: 50%; left: 0%;">
+      <div role="slider" class="van-slider__button-wrapper" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal">
+        <div class="van-slider__button"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div style="height: 4px;" class="van-slider">
+    <div class="van-slider__bar" style="width: 50%; left: 0%; background: rgb(238, 10, 36);">
+      <div role="slider" class="van-slider__button-wrapper" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal">
+        <div class="van-slider__button"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-slider">
+    <div class="van-slider__bar" style="width: 50%; left: 0%; background: rgb(238, 10, 36);">
+      <div role="slider" class="van-slider__button-wrapper" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal">
+        <div class="custom-button">50</div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div style="height: 150px; padding-left: 30px;">
+    <div class="van-slider van-slider--vertical">
+      <div class="van-slider__bar" style="height: 50%; top: 0%;">
+        <div role="slider" class="van-slider__button-wrapper" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="vertical">
+          <div class="van-slider__button"></div>
+        </div>
+      </div>
+    </div>
+    <div style="margin-left: 100px;" class="van-slider van-slider--vertical">
+      <div class="van-slider__bar" style="height: 40%; top: 20%;">
+        <div role="slider" class="van-slider__button-wrapper-left" tabindex="0" aria-valuemin="0" aria-valuenow="20" aria-valuemax="100" aria-orientation="vertical">
+          <div class="van-slider__button"></div>
+        </div>
+        <div role="slider" class="van-slider__button-wrapper-right" tabindex="0" aria-valuemin="0" aria-valuenow="60" aria-valuemax="100" aria-orientation="vertical">
+          <div class="van-slider__button"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/slider/test/demo.legacy.js b/src/slider/test/demo.spec.js
similarity index 100%
rename from src/slider/test/demo.legacy.js
rename to src/slider/test/demo.spec.js
diff --git a/src/stepper/test/__snapshots__/demo.legacy.js.snap b/src/stepper/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 5637c6aa8..000000000
--- a/src/stepper/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,66 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div class="van-cell van-cell--center">
-    <div class="van-cell__title"><span>基础用法</span></div>
-    <div class="van-cell__value">
-      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
-    </div>
-  </div>
-  <div class="van-cell van-cell--center">
-    <div class="van-cell__title"><span>步长设置</span></div>
-    <div class="van-cell__value">
-      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
-    </div>
-  </div>
-  <div class="van-cell van-cell--center">
-    <div class="van-cell__title"><span>限制输入范围</span></div>
-    <div class="van-cell__value">
-      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="8" aria-valuemin="5" aria-valuenow="5" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
-    </div>
-  </div>
-  <div class="van-cell van-cell--center">
-    <div class="van-cell__title"><span>限制输入整数</span></div>
-    <div class="van-cell__value">
-      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="tel" role="spinbutton" inputmode="numeric" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
-    </div>
-  </div>
-  <div class="van-cell van-cell--center">
-    <div class="van-cell__title"><span>禁用状态</span></div>
-    <div class="van-cell__value">
-      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" disabled="disabled" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>
-    </div>
-  </div>
-  <div class="van-cell van-cell--center">
-    <div class="van-cell__title"><span>禁用输入框</span></div>
-    <div class="van-cell__value">
-      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" readonly="readonly" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
-    </div>
-  </div>
-  <div class="van-cell van-cell--center">
-    <div class="van-cell__title"><span>固定小数位数</span></div>
-    <div class="van-cell__value">
-      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1.0" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
-    </div>
-  </div>
-  <div class="van-cell van-cell--center">
-    <div class="van-cell__title"><span>自定义大小</span></div>
-    <div class="van-cell__value">
-      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="width: 32px; height: 32px;"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 40px; height: 32px;"><button type="button" class="van-stepper__plus" style="width: 32px; height: 32px;"></button></div>
-    </div>
-  </div>
-  <div class="van-cell van-cell--center">
-    <div class="van-cell__title"><span>异步变更</span></div>
-    <div class="van-cell__value">
-      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
-    </div>
-  </div>
-  <div class="van-cell van-cell--center">
-    <div class="van-cell__title"><span>圆角风格</span></div>
-    <div class="van-cell__value">
-      <div class="van-stepper van-stepper--round"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="width: 22px; height: 22px;"></button><input type="text" role="spinbutton" readonly="readonly" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="height: 22px;"><button type="button" class="van-stepper__plus" style="width: 22px; height: 22px;"></button></div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/stepper/test/__snapshots__/demo.spec.js.snap b/src/stepper/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..5224832e8
--- /dev/null
+++ b/src/stepper/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div class="van-cell van-cell--center">
+  <!---->
+  <div class="van-cell__title"><span>基础用法</span>
+    <!---->
+  </div>
+  <div class="van-cell__value">
+    <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" class="van-stepper__input" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1"><button type="button" class="van-stepper__plus"></button></div>
+  </div>
+  <!---->
+  <!---->
+</div>
+<div class="van-cell van-cell--center">
+  <!---->
+  <div class="van-cell__title"><span>步长设置</span>
+    <!---->
+  </div>
+  <div class="van-cell__value">
+    <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" class="van-stepper__input" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1"><button type="button" class="van-stepper__plus"></button></div>
+  </div>
+  <!---->
+  <!---->
+</div>
+<div class="van-cell van-cell--center">
+  <!---->
+  <div class="van-cell__title"><span>限制输入范围</span>
+    <!---->
+  </div>
+  <div class="van-cell__value">
+    <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" class="van-stepper__input" inputmode="decimal" aria-valuemax="8" aria-valuemin="5" aria-valuenow="5"><button type="button" class="van-stepper__plus"></button></div>
+  </div>
+  <!---->
+  <!---->
+</div>
+<div class="van-cell van-cell--center">
+  <!---->
+  <div class="van-cell__title"><span>限制输入整数</span>
+    <!---->
+  </div>
+  <div class="van-cell__value">
+    <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="tel" role="spinbutton" class="van-stepper__input" inputmode="numeric" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1"><button type="button" class="van-stepper__plus"></button></div>
+  </div>
+  <!---->
+  <!---->
+</div>
+<div class="van-cell van-cell--center">
+  <!---->
+  <div class="van-cell__title"><span>禁用状态</span>
+    <!---->
+  </div>
+  <div class="van-cell__value">
+    <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" class="van-stepper__input" disabled="" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>
+  </div>
+  <!---->
+  <!---->
+</div>
+<div class="van-cell van-cell--center">
+  <!---->
+  <div class="van-cell__title"><span>禁用输入框</span>
+    <!---->
+  </div>
+  <div class="van-cell__value">
+    <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" class="van-stepper__input" readonly="" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1"><button type="button" class="van-stepper__plus"></button></div>
+  </div>
+  <!---->
+  <!---->
+</div>
+<div class="van-cell van-cell--center">
+  <!---->
+  <div class="van-cell__title"><span>固定小数位数</span>
+    <!---->
+  </div>
+  <div class="van-cell__value">
+    <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" class="van-stepper__input" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1"><button type="button" class="van-stepper__plus"></button></div>
+  </div>
+  <!---->
+  <!---->
+</div>
+<div class="van-cell van-cell--center">
+  <!---->
+  <div class="van-cell__title"><span>自定义大小</span>
+    <!---->
+  </div>
+  <div class="van-cell__value">
+    <div class="van-stepper"><button type="button" style="width: 32px; height: 32px;" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" class="van-stepper__input" style="width: 40px; height: 32px;" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1"><button type="button" style="width: 32px; height: 32px;" class="van-stepper__plus"></button></div>
+  </div>
+  <!---->
+  <!---->
+</div>
+<div class="van-cell van-cell--center">
+  <!---->
+  <div class="van-cell__title"><span>异步变更</span>
+    <!---->
+  </div>
+  <div class="van-cell__value">
+    <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" class="van-stepper__input" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1"><button type="button" class="van-stepper__plus"></button></div>
+  </div>
+  <!---->
+  <!---->
+</div>
+<div class="van-cell van-cell--center">
+  <!---->
+  <div class="van-cell__title"><span>圆角风格</span>
+    <!---->
+  </div>
+  <div class="van-cell__value">
+    <div class="van-stepper van-stepper--round"><button type="button" style="width: 22px; height: 22px;" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" class="van-stepper__input" style="height: 22px;" readonly="" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1"><button type="button" style="width: 22px; height: 22px;" class="van-stepper__plus"></button></div>
+  </div>
+  <!---->
+  <!---->
+</div>
+`;
diff --git a/src/stepper/test/demo.legacy.js b/src/stepper/test/demo.spec.js
similarity index 100%
rename from src/stepper/test/demo.legacy.js
rename to src/stepper/test/demo.spec.js
diff --git a/src/steps/test/__snapshots__/demo.legacy.js.snap b/src/steps/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 98a80d91e..000000000
--- a/src/steps/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,96 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-steps van-steps--horizontal">
-      <div class="van-steps__items">
-        <div class="van-hairline van-step van-step--horizontal van-step--finish">
-          <div class="van-step__title">买家下单</div>
-          <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
-          <div class="van-step__line"></div>
-        </div>
-        <div class="van-hairline van-step van-step--horizontal van-step--process">
-          <div class="van-step__title van-step__title--active">商家接单</div>
-          <div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon van-step__icon--active">
-              <!----></i></div>
-          <div class="van-step__line"></div>
-        </div>
-        <div class="van-hairline van-step van-step--horizontal">
-          <div class="van-step__title">买家提货</div>
-          <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
-          <div class="van-step__line"></div>
-        </div>
-        <div class="van-hairline van-step van-step--horizontal">
-          <div class="van-step__title">交易完成</div>
-          <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
-          <div class="van-step__line"></div>
-        </div>
-      </div>
-    </div> <button class="van-button van-button--default van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">下一步</span></div>
-    </button>
-  </div>
-  <div>
-    <div class="van-steps van-steps--horizontal">
-      <div class="van-steps__items">
-        <div class="van-hairline van-step van-step--horizontal van-step--finish">
-          <div class="van-step__title">买家下单</div>
-          <div class="van-step__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
-              <!----></i></div>
-          <div class="van-step__line" style="background: rgb(51, 136, 255);"></div>
-        </div>
-        <div class="van-hairline van-step van-step--horizontal van-step--process">
-          <div class="van-step__title van-step__title--active" style="color: rgb(51, 136, 255);">商家接单</div>
-          <div class="van-step__circle-container"><i class="van-icon van-icon-success van-step__icon van-step__icon--active" style="color: rgb(51, 136, 255);">
-              <!----></i></div>
-          <div class="van-step__line"></div>
-        </div>
-        <div class="van-hairline van-step van-step--horizontal">
-          <div class="van-step__title">买家提货</div>
-          <div class="van-step__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
-              <!----></i></div>
-          <div class="van-step__line"></div>
-        </div>
-        <div class="van-hairline van-step van-step--horizontal">
-          <div class="van-step__title">交易完成</div>
-          <div class="van-step__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
-              <!----></i></div>
-          <div class="van-step__line"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <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 van-step__title--active">
-            <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 van-step__icon--active">
-              <!----></i></div>
-          <div class="van-step__line"></div>
-        </div>
-        <div class="van-hairline van-step van-step--vertical">
-          <div class="van-step__title">
-            <h3>【城市】物流状态</h3>
-            <p>2016-07-11 10:00</p>
-          </div>
-          <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
-          <div class="van-step__line"></div>
-        </div>
-        <div class="van-hairline van-step van-step--vertical">
-          <div class="van-step__title">
-            <h3>快件已发货</h3>
-            <p>2016-07-10 09:30</p>
-          </div>
-          <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
-          <div class="van-step__line"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/steps/test/__snapshots__/demo.spec.js.snap b/src/steps/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..48b55b4e0
--- /dev/null
+++ b/src/steps/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-steps van-steps--horizontal">
+    <div class="van-steps__items">
+      <div class="van-hairline van-step van-step--horizontal van-step--finish">
+        <div class="van-step__title">买家下单</div>
+        <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
+        <div class="van-step__line"></div>
+      </div>
+      <div class="van-hairline van-step van-step--horizontal van-step--process">
+        <div class="van-step__title van-step__title--active">商家接单</div>
+        <div class="van-step__circle-container"><i class="van-badge__wrapper van-icon van-icon-checked van-step__icon van-step__icon--active">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <div class="van-step__line"></div>
+      </div>
+      <div class="van-hairline van-step van-step--horizontal">
+        <div class="van-step__title">买家提货</div>
+        <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
+        <div class="van-step__line"></div>
+      </div>
+      <div class="van-hairline van-step van-step--horizontal">
+        <div class="van-step__title">交易完成</div>
+        <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
+        <div class="van-step__line"></div>
+      </div>
+    </div>
+  </div><button type="button" class="van-button van-button--default van-button--normal">
+    <div class="van-button__content">
+      <!----><span class="van-button__text">下一步</span>
+      <!---->
+    </div>
+  </button>
+</div>
+<div>
+  <div class="van-steps van-steps--horizontal">
+    <div class="van-steps__items">
+      <div class="van-hairline van-step van-step--horizontal van-step--finish">
+        <div class="van-step__title">买家下单</div>
+        <div class="van-step__circle-container"><i class="van-badge__wrapper van-icon van-icon-arrow van-step__icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <div class="van-step__line" style="background: rgb(51, 136, 255);"></div>
+      </div>
+      <div class="van-hairline van-step van-step--horizontal van-step--process">
+        <div class="van-step__title van-step__title--active" style="color: rgb(51, 136, 255);">商家接单</div>
+        <div class="van-step__circle-container"><i class="van-badge__wrapper van-icon van-icon-success van-step__icon van-step__icon--active" style="color: rgb(51, 136, 255);">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <div class="van-step__line"></div>
+      </div>
+      <div class="van-hairline van-step van-step--horizontal">
+        <div class="van-step__title">买家提货</div>
+        <div class="van-step__circle-container"><i class="van-badge__wrapper van-icon van-icon-arrow van-step__icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <div class="van-step__line"></div>
+      </div>
+      <div class="van-hairline van-step van-step--horizontal">
+        <div class="van-step__title">交易完成</div>
+        <div class="van-step__circle-container"><i class="van-badge__wrapper van-icon van-icon-arrow van-step__icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <div class="van-step__line"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <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 van-step__title--active">
+          <h3>【城市】物流状态1</h3>
+          <p>2016-07-12 12:40</p>
+        </div>
+        <div class="van-step__circle-container"><i class="van-badge__wrapper van-icon van-icon-checked van-step__icon van-step__icon--active">
+            <!---->
+            <!---->
+            <!----></i></div>
+        <div class="van-step__line"></div>
+      </div>
+      <div class="van-hairline van-step van-step--vertical">
+        <div class="van-step__title">
+          <h3>【城市】物流状态</h3>
+          <p>2016-07-11 10:00</p>
+        </div>
+        <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
+        <div class="van-step__line"></div>
+      </div>
+      <div class="van-hairline van-step van-step--vertical">
+        <div class="van-step__title">
+          <h3>快件已发货</h3>
+          <p>2016-07-10 09:30</p>
+        </div>
+        <div class="van-step__circle-container"><i class="van-step__circle"></i></div>
+        <div class="van-step__line"></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/steps/test/demo.legacy.js b/src/steps/test/demo.spec.js
similarity index 100%
rename from src/steps/test/demo.legacy.js
rename to src/steps/test/demo.spec.js
diff --git a/src/sticky/test/__snapshots__/demo.legacy.js.snap b/src/sticky/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 07457da6f..000000000
--- a/src/sticky/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div>
-      <div class="van-sticky"><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;">
-          <div class="van-button__content"><span class="van-button__text">
-        基础用法
-      </span></div>
-        </button></div>
-    </div>
-  </div>
-  <div>
-    <div style="height: 0px;">
-      <div class="van-sticky van-sticky--fixed" style="top: 50px;"><button class="van-button van-button--info van-button--normal" style="margin-left: 115px;">
-          <div class="van-button__content"><span class="van-button__text">
-        吸顶距离
-      </span></div>
-        </button></div>
-    </div>
-  </div>
-  <div>
-    <div style="height: 150px; background-color: rgb(255, 255, 255);">
-      <div>
-        <div class="van-sticky"><button class="van-button van-button--warning van-button--normal" style="margin-left: 215px;">
-            <div class="van-button__content"><span class="van-button__text">
-          指定容器
-        </span></div>
-          </button></div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/sticky/test/__snapshots__/demo.spec.js.snap b/src/sticky/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..4a6e6e62a
--- /dev/null
+++ b/src/sticky/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div>
+    <div class="van-sticky"><button type="button" class="van-button van-button--primary van-button--normal" style="margin-left: 15px;">
+        <div class="van-button__content">
+          <!----><span class="van-button__text">基础用法</span>
+          <!---->
+        </div>
+      </button></div>
+  </div>
+</div>
+<div>
+  <div>
+    <div class="van-sticky"><button type="button" class="van-button van-button--primary van-button--normal" style="margin-left: 115px;">
+        <div class="van-button__content">
+          <!----><span class="van-button__text">吸顶距离</span>
+          <!---->
+        </div>
+      </button></div>
+  </div>
+</div>
+<div>
+  <div style="height: 150px; background-color: rgb(255, 255, 255);">
+    <div>
+      <div class="van-sticky"><button type="button" class="van-button van-button--warning van-button--normal" style="margin-left: 215px;">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">指定容器</span>
+            <!---->
+          </div>
+        </button></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/sticky/test/demo.legacy.js b/src/sticky/test/demo.spec.js
similarity index 100%
rename from src/sticky/test/demo.legacy.js
rename to src/sticky/test/demo.spec.js
diff --git a/src/submit-bar/test/__snapshots__/demo.legacy.js.snap b/src/submit-bar/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index df6874505..000000000
--- a/src/submit-bar/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <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">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
-          <div class="van-button__content"><span class="van-button__text">提交订单</span></div>
-        </button>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-submit-bar">
-      <div class="van-submit-bar__tip"><i class="van-icon van-icon-info-o van-submit-bar__tip-icon">
-          <!----></i><span class="van-submit-bar__tip-text">你的收货地址不支持同城送, 我们已为你推荐快递</span></div>
-      <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--round van-submit-bar__button van-submit-bar__button--danger">
-          <div class="van-button__content"><span class="van-button__text">提交订单</span></div>
-        </button>
-      </div>
-    </div>
-  </div>
-  <div>
-    <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">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button class="van-button van-button--danger van-button--normal van-button--loading van-button--round van-submit-bar__button van-submit-bar__button--danger">
-          <div class="van-button__content">
-            <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; 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>
-        </button>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-submit-bar">
-      <div class="van-submit-bar__tip">
-        你的收货地址不支持同城送,
-        <span class="edit-address">
-          修改地址
-        </span></div>
-      <div class="van-submit-bar__bar">
-        <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
-          <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
-              <!----></i></div><span class="van-checkbox__label">全选</span>
-        </div>
-        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">30</span>.50</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
-          <div class="van-button__content"><span class="van-button__text">提交订单</span></div>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/submit-bar/test/__snapshots__/demo.spec.js.snap b/src/submit-bar/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..dd80a1238
--- /dev/null
+++ b/src/submit-bar/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <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">¥<span class="van-submit-bar__price-integer">30</span>.50</span>
+        <!---->
+      </div><button type="button" class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
+        <div class="van-button__content">
+          <!----><span class="van-button__text">提交订单</span>
+          <!---->
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-submit-bar">
+    <!---->
+    <div class="van-submit-bar__tip"><i class="van-badge__wrapper van-icon van-icon-info-o van-submit-bar__tip-icon">
+        <!---->
+        <!---->
+        <!----></i><span class="van-submit-bar__tip-text">你的收货地址不支持同城送, 我们已为你推荐快递</span>
+      <!---->
+    </div>
+    <div class="van-submit-bar__bar">
+      <!---->
+      <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price-integer">30</span>.50</span>
+        <!---->
+      </div><button type="button" class="van-button van-button--danger van-button--normal van-button--round van-button--disabled van-submit-bar__button van-submit-bar__button--danger" disabled="">
+        <div class="van-button__content">
+          <!----><span class="van-button__text">提交订单</span>
+          <!---->
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <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">¥<span class="van-submit-bar__price-integer">30</span>.50</span>
+        <!---->
+      </div><button type="button" class="van-button van-button--danger van-button--normal van-button--round van-button--loading van-submit-bar__button van-submit-bar__button--danger">
+        <div class="van-button__content">
+          <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span>
+            <!---->
+          </div>
+          <!---->
+          <!---->
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-submit-bar">
+    <!---->
+    <div class="van-submit-bar__tip">
+      <!---->
+      <!---->你的收货地址不支持同城送, <span class="edit-address">修改地址</span></div>
+    <div class="van-submit-bar__bar">
+      <div role="checkbox" class="van-checkbox" tabindex="0" aria-checked="true" bindgroup="true">
+        <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-badge__wrapper van-icon van-icon-success">
+            <!---->
+            <!---->
+            <!----></i></div><span class="van-checkbox__label">全选</span>
+      </div>
+      <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price-integer">30</span>.50</span>
+        <!---->
+      </div><button type="button" class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
+        <div class="van-button__content">
+          <!----><span class="van-button__text">提交订单</span>
+          <!---->
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/submit-bar/test/demo.legacy.js b/src/submit-bar/test/demo.spec.js
similarity index 100%
rename from src/submit-bar/test/demo.legacy.js
rename to src/submit-bar/test/demo.spec.js
diff --git a/src/swipe-cell/test/__snapshots__/demo.legacy.js.snap b/src/swipe-cell/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 2e9ca3965..000000000
--- a/src/swipe-cell/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,72 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div>
-      <div class="van-swipe-cell">
-        <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
-          <div class="van-swipe-cell__left"><button class="van-button van-button--primary van-button--normal van-button--square">
-              <div class="van-button__content"><span class="van-button__text">选择</span></div>
-            </button></div>
-          <div class="van-cell van-cell--borderless">
-            <div class="van-cell__title"><span>单元格</span></div>
-            <div class="van-cell__value"><span>内容</span></div>
-          </div>
-          <div class="van-swipe-cell__right"><button class="van-button van-button--danger van-button--normal van-button--square">
-              <div class="van-button__content"><span class="van-button__text">删除</span></div>
-            </button> <button class="van-button van-button--primary van-button--normal van-button--square">
-              <div class="van-button__content"><span class="van-button__text">收藏</span></div>
-            </button></div>
-        </div>
-      </div>
-    </div>
-    <div>
-      <div class="van-swipe-cell">
-        <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
-          <div class="van-card">
-            <div class="van-card__header"><a class="van-card__thumb">
-                <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
-                  <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                      <!----></i></div>
-                </div>
-              </a>
-              <div class="van-card__content">
-                <div>
-                  <div class="van-card__title van-multi-ellipsis--l2">商品标题</div>
-                  <div class="van-card__desc van-ellipsis">描述信息</div>
-                </div>
-                <div class="van-card__bottom">
-                  <div class="van-card__price">
-                    <div><span class="van-card__price-currency">¥</span><span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
-                  </div>
-                  <div class="van-card__num">x2</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="van-swipe-cell__right"><button class="delete-button van-button van-button--danger van-button--normal van-button--square">
-              <div class="van-button__content"><span class="van-button__text">删除</span></div>
-            </button></div>
-        </div>
-      </div>
-    </div>
-    <div>
-      <div class="van-swipe-cell">
-        <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
-          <div class="van-swipe-cell__left"><button class="van-button van-button--primary van-button--normal van-button--square">
-              <div class="van-button__content"><span class="van-button__text">选择</span></div>
-            </button></div>
-          <div class="van-cell van-cell--borderless">
-            <div class="van-cell__title"><span>单元格</span></div>
-            <div class="van-cell__value"><span>内容</span></div>
-          </div>
-          <div class="van-swipe-cell__right"><button class="van-button van-button--danger van-button--normal van-button--square">
-              <div class="van-button__content"><span class="van-button__text">删除</span></div>
-            </button></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/swipe-cell/test/__snapshots__/demo.spec.js.snap b/src/swipe-cell/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..4aaa4bf23
--- /dev/null
+++ b/src/swipe-cell/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-swipe-cell">
+    <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
+      <div class="van-swipe-cell__left"><button type="button" class="van-button van-button--primary van-button--normal van-button--square">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">选择</span>
+            <!---->
+          </div>
+        </button></div>
+      <div class="van-cell van-cell--borderless">
+        <!---->
+        <div class="van-cell__title"><span>单元格</span>
+          <!---->
+        </div>
+        <div class="van-cell__value"><span>内容</span></div>
+        <!---->
+        <!---->
+      </div>
+      <div class="van-swipe-cell__right"><button type="button" class="van-button van-button--danger van-button--normal van-button--square">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">删除</span>
+            <!---->
+          </div>
+        </button><button type="button" class="van-button van-button--primary van-button--normal van-button--square">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">收藏</span>
+            <!---->
+          </div>
+        </button></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-swipe-cell">
+    <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
+      <!---->
+      <div class="van-card">
+        <div class="van-card__header"><a class="van-card__thumb">
+            <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
+              <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+                  <!---->
+                  <!---->
+                  <!----></i></div>
+              <!---->
+            </div>
+            <!---->
+          </a>
+          <div class="van-card__content">
+            <div>
+              <div class="van-card__title van-multi-ellipsis--l2">商品标题</div>
+              <div class="van-card__desc van-ellipsis">描述信息</div>
+              <!---->
+            </div>
+            <div class="van-card__bottom">
+              <!---->
+              <div class="van-card__price">
+                <div><span class="van-card__price-currency">¥</span><span class="van-card__price-integer">2</span>.<span class="van-card__price-decimal">00</span></div>
+              </div>
+              <!---->
+              <div class="van-card__num">x2</div>
+              <!---->
+            </div>
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div class="van-swipe-cell__right"><button type="button" class="van-button van-button--danger van-button--normal van-button--square delete-button">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">删除</span>
+            <!---->
+          </div>
+        </button></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-swipe-cell">
+    <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
+      <div class="van-swipe-cell__left"><button type="button" class="van-button van-button--primary van-button--normal van-button--square">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">选择</span>
+            <!---->
+          </div>
+        </button></div>
+      <div class="van-cell van-cell--borderless">
+        <!---->
+        <div class="van-cell__title"><span>单元格</span>
+          <!---->
+        </div>
+        <div class="van-cell__value"><span>内容</span></div>
+        <!---->
+        <!---->
+      </div>
+      <div class="van-swipe-cell__right"><button type="button" class="van-button van-button--danger van-button--normal van-button--square">
+          <div class="van-button__content">
+            <!----><span class="van-button__text">删除</span>
+            <!---->
+          </div>
+        </button></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/swipe-cell/test/demo.legacy.js b/src/swipe-cell/test/demo.spec.js
similarity index 100%
rename from src/swipe-cell/test/demo.legacy.js
rename to src/swipe-cell/test/demo.spec.js
diff --git a/src/swipe/test/__snapshots__/demo.legacy.js.snap b/src/swipe/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 799f7af64..000000000
--- a/src/swipe/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,72 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-swipe">
-      <div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
-        <div class="van-swipe-item" style="width: 100px;">1</div>
-        <div class="van-swipe-item" style="width: 100px;">2</div>
-        <div class="van-swipe-item" style="width: 100px;">3</div>
-        <div class="van-swipe-item" style="width: 100px;">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: 400px; transition-duration: 0ms; transform: translateX(0px);">
-        <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-1.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
-        <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-2.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
-        <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-3.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
-        <div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-4.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: 400px; transition-duration: 0ms; transform: translateX(0px);">
-        <div class="van-swipe-item" style="width: 100px;">1</div>
-        <div class="van-swipe-item" style="width: 100px;">2</div>
-        <div class="van-swipe-item" style="width: 100px;">3</div>
-        <div class="van-swipe-item" style="width: 100px;">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" style="height: 200px;">
-      <div class="van-swipe__track van-swipe__track--vertical" style="height: 400px; transition-duration: 0ms; transform: translateY(0px);">
-        <div class="van-swipe-item" style="height: 100px;">1</div>
-        <div class="van-swipe-item" style="height: 100px;">2</div>
-        <div class="van-swipe-item" style="height: 100px;">3</div>
-        <div class="van-swipe-item" style="height: 100px;">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: 1200px; transition-duration: 0ms; transform: translateX(0px);">
-        <div class="van-swipe-item" style="width: 300px;">1</div>
-        <div class="van-swipe-item" style="width: 300px;">2</div>
-        <div class="van-swipe-item" style="width: 300px;">3</div>
-        <div class="van-swipe-item" style="width: 300px;">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: 400px; transition-duration: 0ms; transform: translateX(0px);">
-        <div class="van-swipe-item" style="width: 100px;">1</div>
-        <div class="van-swipe-item" style="width: 100px;">2</div>
-        <div class="van-swipe-item" style="width: 100px;">3</div>
-        <div class="van-swipe-item" style="width: 100px;">4</div>
-      </div>
-      <div class="custom-indicator">1/4</div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/swipe/test/__snapshots__/demo.spec.js.snap b/src/swipe/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..cdcf1fc47
--- /dev/null
+++ b/src/swipe/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-swipe">
+    <div style="width: 400px; transition-duration: 0ms; transform: translateX(0px);" class="van-swipe__track">
+      <div class="van-swipe-item" style="width: 100px;">1</div>
+      <div class="van-swipe-item" style="width: 100px;">2</div>
+      <div class="van-swipe-item" style="width: 100px;">3</div>
+      <div class="van-swipe-item" style="width: 100px;">4</div>
+    </div>
+    <div class="van-swipe__indicators"><i style="background-color: white;" 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 style="width: 400px; transition-duration: 0ms; transform: translateX(0px);" class="van-swipe__track">
+      <div class="van-swipe-item" style="width: 100px;"><img src="https://img.yzcdn.cn/vant/apple-1.jpg"><!-- TODO -->
+        <!-- <img v-lazy="image" /> -->
+      </div>
+      <div class="van-swipe-item" style="width: 100px;"><img src="https://img.yzcdn.cn/vant/apple-2.jpg"><!-- TODO -->
+        <!-- <img v-lazy="image" /> -->
+      </div>
+      <div class="van-swipe-item" style="width: 100px;"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"><!-- TODO -->
+        <!-- <img v-lazy="image" /> -->
+      </div>
+      <div class="van-swipe-item" style="width: 100px;"><img src="https://img.yzcdn.cn/vant/apple-4.jpg"><!-- TODO -->
+        <!-- <img v-lazy="image" /> -->
+      </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 style="width: 400px; transition-duration: 0ms; transform: translateX(0px);" class="van-swipe__track">
+      <div class="van-swipe-item" style="width: 100px;">1</div>
+      <div class="van-swipe-item" style="width: 100px;">2</div>
+      <div class="van-swipe-item" style="width: 100px;">3</div>
+      <div class="van-swipe-item" style="width: 100px;">4</div>
+    </div>
+    <div class="van-swipe__indicators"><i style="background-color: white;" 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 demo-swipe--vertical" style="height: 200px;">
+    <div style="height: 400px; transition-duration: 0ms; transform: translateY(0px);" class="van-swipe__track van-swipe__track--vertical">
+      <div class="van-swipe-item" style="height: 100px;">1</div>
+      <div class="van-swipe-item" style="height: 100px;">2</div>
+      <div class="van-swipe-item" style="height: 100px;">3</div>
+      <div class="van-swipe-item" style="height: 100px;">4</div>
+    </div>
+    <div class="van-swipe__indicators van-swipe__indicators--vertical"><i style="background-color: white;" 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 style="width: 1200px; transition-duration: 0ms; transform: translateX(0px);" class="van-swipe__track">
+      <div class="van-swipe-item" style="width: 300px;">1</div>
+      <div class="van-swipe-item" style="width: 300px;">2</div>
+      <div class="van-swipe-item" style="width: 300px;">3</div>
+      <div class="van-swipe-item" style="width: 300px;">4</div>
+    </div>
+    <div class="van-swipe__indicators"><i style="background-color: white;" 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 style="width: 400px; transition-duration: 0ms; transform: translateX(0px);" class="van-swipe__track">
+      <div class="van-swipe-item" style="width: 100px;">1</div>
+      <div class="van-swipe-item" style="width: 100px;">2</div>
+      <div class="van-swipe-item" style="width: 100px;">3</div>
+      <div class="van-swipe-item" style="width: 100px;">4</div>
+    </div>
+    <div class="custom-indicator">1/4</div>
+  </div>
+</div>
+`;
diff --git a/src/swipe/test/demo.legacy.js b/src/swipe/test/demo.spec.js
similarity index 100%
rename from src/swipe/test/demo.legacy.js
rename to src/swipe/test/demo.spec.js
diff --git a/src/switch/test/__snapshots__/demo.legacy.js.snap b/src/switch/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index c05490ce5..000000000
--- a/src/switch/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="switch" aria-checked="true" class="van-switch van-switch--on">
-      <div class="van-switch__node"></div>
-    </div>
-  </div>
-  <div>
-    <div role="switch" aria-checked="true" class="van-switch van-switch--on van-switch--disabled">
-      <div class="van-switch__node"></div>
-    </div>
-  </div>
-  <div>
-    <div role="switch" aria-checked="true" class="van-switch van-switch--on van-switch--loading">
-      <div class="van-switch__node">
-        <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular"><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 role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
-      <div class="van-switch__node"></div>
-    </div>
-  </div>
-  <div>
-    <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="background-color: rgb(7, 193, 96);">
-      <div class="van-switch__node"></div>
-    </div>
-  </div>
-  <div>
-    <div role="switch" aria-checked="true" class="van-switch van-switch--on">
-      <div class="van-switch__node"></div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell van-cell--center">
-      <div class="van-cell__title"><span>标题</span></div>
-      <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
-        <div class="van-switch__node"></div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/switch/test/__snapshots__/demo.spec.js.snap b/src/switch/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..53b7b02b2
--- /dev/null
+++ b/src/switch/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div role="switch" class="van-switch van-switch--on" aria-checked="true">
+    <div class="van-switch__node">
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div role="switch" class="van-switch van-switch--on van-switch--disabled" aria-checked="true">
+    <div class="van-switch__node">
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div role="switch" class="van-switch van-switch--on van-switch--loading" aria-checked="true">
+    <div class="van-switch__node">
+      <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div role="switch" class="van-switch van-switch--on" style="font-size: 24px;" aria-checked="true">
+    <div class="van-switch__node">
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div role="switch" class="van-switch van-switch--on" style="background-color: rgb(7, 193, 96);" aria-checked="true">
+    <div class="van-switch__node">
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div role="switch" class="van-switch van-switch--on" aria-checked="true">
+    <div class="van-switch__node">
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--center">
+    <!---->
+    <div class="van-cell__title"><span>标题</span>
+      <!---->
+    </div>
+    <!---->
+    <div role="switch" class="van-switch van-switch--on" style="font-size: 24px;" aria-checked="true">
+      <div class="van-switch__node">
+        <!---->
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>
+`;
diff --git a/src/switch/test/demo.legacy.js b/src/switch/test/demo.spec.js
similarity index 100%
rename from src/switch/test/demo.legacy.js
rename to src/switch/test/demo.spec.js
diff --git a/src/tab/test/__snapshots__/demo.legacy.js.snap b/src/tab/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 1a4709130..000000000
--- a/src/tab/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,349 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
-          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="">
-          内容 3
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
-          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style=""> 内容 2 </div>
-        <div role="tabpanel" 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-tabs__wrap--scrollable">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text">标签 1</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text">标签 2</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text">标签 3</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text">标签 4</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text">标签 5</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text">标签 6</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text">标签 7</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text">标签 8</span></div>
-          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div role="tabpanel" class="van-tab__pane" style="">
-          内容 1
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
-          <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
-          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div role="tabpanel" class="van-tab__pane" style="">
-          内容 1
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--card">
-      <div class="van-tabs__wrap">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--card">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div role="tabpanel" class="van-tab__pane" style="">
-          内容 1
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
-          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div role="tabpanel" class="van-tab__pane" style="">
-          内容 1
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div>
-        <div class="van-sticky">
-          <div class="van-tabs__wrap">
-            <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-              <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
-              <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
-              <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
-              <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
-              <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="">
-          内容 3
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签  </span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签  </span></div>
-          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div role="tabpanel" class="van-tab__pane" style="">
-          内容 1
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
-          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content van-tabs__content--animated">
-        <div class="van-tabs__track" style="transform: translate3d(0%, 0, 0); transition-duration: 0.3s;">
-          <div role="tabpanel" class="van-tab__pane-wrapper">
-            <div class="van-tab__pane">
-              内容 1
-            </div>
-          </div>
-          <div role="tabpanel" aria-hidden="true" class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive">
-            <div class="van-tab__pane">
-              <!---->
-            </div>
-          </div>
-          <div role="tabpanel" aria-hidden="true" class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive">
-            <div class="van-tab__pane">
-              <!---->
-            </div>
-          </div>
-          <div role="tabpanel" aria-hidden="true" class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive">
-            <div class="van-tab__pane">
-              <!---->
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
-          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="">
-          内容 3
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div>
-        <div class="van-sticky">
-          <div class="van-tabs__wrap van-tabs__wrap--scrollable">
-            <div role="tablist" class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
-              <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text">标签 1</span></div>
-              <div role="tab" class="van-tab"><span class="van-tab__text">标签 2</span></div>
-              <div role="tab" class="van-tab"><span class="van-tab__text">标签 3</span></div>
-              <div role="tab" class="van-tab"><span class="van-tab__text">标签 4</span></div>
-              <div role="tab" class="van-tab"><span class="van-tab__text">标签 5</span></div>
-              <div role="tab" class="van-tab"><span class="van-tab__text">标签 6</span></div>
-              <div role="tab" class="van-tab"><span class="van-tab__text">标签 7</span></div>
-              <div role="tab" class="van-tab"><span class="van-tab__text">标签 8</span></div>
-              <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div role="tabpanel" class="van-tab__pane">
-          内容 1
-        </div>
-        <div role="tabpanel" class="van-tab__pane">
-          内容 2
-        </div>
-        <div role="tabpanel" class="van-tab__pane">
-          内容 3
-        </div>
-        <div role="tabpanel" class="van-tab__pane">
-          内容 4
-        </div>
-        <div role="tabpanel" class="van-tab__pane">
-          内容 5
-        </div>
-        <div role="tabpanel" class="van-tab__pane">
-          内容 6
-        </div>
-        <div role="tabpanel" class="van-tab__pane">
-          内容 7
-        </div>
-        <div role="tabpanel" class="van-tab__pane">
-          内容 8
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
-          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
-          <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div role="tabpanel" class="van-tab__pane" style="">
-          内容 1
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-        <div role="tabpanel" class="van-tab__pane" style="display: none;">
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/tab/test/__snapshots__/demo.spec.js.snap b/src/tab/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..77bc254fe
--- /dev/null
+++ b/src/tab/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,340 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-tabs van-tabs--line">
+    <div class="van-tabs__wrap">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+        <!---->
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+        <!---->
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="">内容 3</div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabs van-tabs--line">
+    <div class="van-tabs__wrap">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+        <!---->
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+        <!---->
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="">内容 2 </div>
+      <div role="tabpanel" 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-tabs__wrap--scrollable">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
+        <!---->
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text">标签 1</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 2</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 3</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 4</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 5</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 6</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 7</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 8</span></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+        <!---->
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div role="tabpanel" class="van-tab__pane" style="">内容 1</div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabs van-tabs--line">
+    <div class="van-tabs__wrap">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+        <!---->
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+        <div role="tab" class="van-tab van-tab--disabled" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+        <!---->
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div role="tabpanel" class="van-tab__pane" style="">内容 1</div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabs van-tabs--card">
+    <div class="van-tabs__wrap">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--card">
+        <!---->
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div role="tabpanel" class="van-tab__pane" style="">内容 1</div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabs van-tabs--line">
+    <div class="van-tabs__wrap">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+        <!---->
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+        <!---->
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div role="tabpanel" class="van-tab__pane" style="">内容 1</div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabs van-tabs--line">
+    <div>
+      <div class="van-sticky">
+        <div class="van-tabs__wrap">
+          <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+            <!---->
+            <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+            <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+            <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+            <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
+            <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+            <!---->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="">内容 3</div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabs van-tabs--line">
+    <div class="van-tabs__wrap">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+        <!---->
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-badge__wrapper van-icon van-icon-more-o"><!----><!----><!----></i>标签 </span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-badge__wrapper van-icon van-icon-more-o"><!----><!----><!----></i>标签 </span></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+        <!---->
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div role="tabpanel" class="van-tab__pane" style=""> 内容 1</div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabs van-tabs--line">
+    <div class="van-tabs__wrap">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+        <!---->
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+        <!---->
+      </div>
+    </div>
+    <div class="van-tabs__content van-tabs__content--animated">
+      <div class="van-swipe van-tabs__track">
+        <div style="width: 0px; transition-duration: 0ms; transform: translateX(0px);" class="van-swipe__track">
+          <div class="van-swipe-item van-tab__pane-wrapper" style="width: 0px;" role="tabpanel" aria-hidden="false">
+            <div class="van-tab__pane">内容 1</div>
+          </div>
+          <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive" style="width: 0px;" role="tabpanel" aria-hidden="true">
+            <div class="van-tab__pane">内容 2</div>
+          </div>
+          <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive" style="width: 0px;" role="tabpanel" aria-hidden="true">
+            <!---->
+          </div>
+          <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive" style="width: 0px;" role="tabpanel" aria-hidden="true">
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabs van-tabs--line">
+    <div class="van-tabs__wrap">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+        <!---->
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+        <!---->
+      </div>
+    </div>
+    <div class="van-tabs__content van-tabs__content--animated">
+      <div class="van-swipe van-tabs__track">
+        <div style="width: 0px; transition-duration: 0ms; transform: translateX(0px);" class="van-swipe__track">
+          <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive" style="width: 0px;" role="tabpanel" aria-hidden="true">
+            <div class="van-tab__pane">内容 1</div>
+          </div>
+          <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive" style="width: 0px;" role="tabpanel" aria-hidden="true">
+            <div class="van-tab__pane">内容 2</div>
+          </div>
+          <div class="van-swipe-item van-tab__pane-wrapper" style="width: 0px;" role="tabpanel" aria-hidden="false">
+            <!---->
+          </div>
+          <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive" style="width: 0px;" role="tabpanel" aria-hidden="true">
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabs van-tabs--line">
+    <div>
+      <div class="van-sticky">
+        <div class="van-tabs__wrap van-tabs__wrap--scrollable">
+          <div role="tablist" class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
+            <!---->
+            <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text">标签 1</span></div>
+            <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 2</span></div>
+            <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 3</span></div>
+            <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 4</span></div>
+            <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 5</span></div>
+            <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 6</span></div>
+            <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 7</span></div>
+            <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text">标签 8</span></div>
+            <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+            <!---->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div role="tabpanel" class="van-tab__pane">内容 1</div>
+      <div role="tabpanel" class="van-tab__pane">内容 2</div>
+      <div role="tabpanel" class="van-tab__pane">内容 3</div>
+      <div role="tabpanel" class="van-tab__pane">内容 4</div>
+      <div role="tabpanel" class="van-tab__pane">内容 5</div>
+      <div role="tabpanel" class="van-tab__pane">内容 6</div>
+      <div role="tabpanel" class="van-tab__pane">内容 7</div>
+      <div role="tabpanel" class="van-tab__pane">内容 8</div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabs van-tabs--line">
+    <div class="van-tabs__wrap">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+        <!---->
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+        <div role="tab" class="van-tab" aria-selected="false"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
+        <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+        <!---->
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div role="tabpanel" class="van-tab__pane" style="">内容 1</div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/tab/test/demo.legacy.js b/src/tab/test/demo.spec.js
similarity index 100%
rename from src/tab/test/demo.legacy.js
rename to src/tab/test/demo.spec.js
diff --git a/src/tabbar-item/index.js b/src/tabbar-item/index.js
index cfc064997..67b643ef5 100644
--- a/src/tabbar-item/index.js
+++ b/src/tabbar-item/index.js
@@ -32,10 +32,10 @@ export default createComponent({
     const { parent, index } = useParent(TABBAR_KEY);
 
     const active = computed(() => {
-      const { $route } = vm;
       const { route, modelValue } = parent.props;
 
-      if (route && $route) {
+      if (route && '$route' in vm) {
+        const { $route } = vm;
         const { to } = props;
         const config = isObject(to) ? to : { path: to };
         const pathMatched = config.path === $route.path;
diff --git a/src/tabbar/test/__snapshots__/demo.legacy.js.snap b/src/tabbar/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index c65307606..000000000
--- a/src/tabbar/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,202 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
-      <div class="van-tabbar-item van-tabbar-item--active">
-        <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">
-        <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">
-        <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">
-        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
-            <!----></i>
-          <!---->
-        </div>
-        <div class="van-tabbar-item__text">标签</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
-      <div class="van-tabbar-item van-tabbar-item--active">
-        <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">
-        <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">
-        <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">
-        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
-            <!----></i>
-          <!---->
-        </div>
-        <div class="van-tabbar-item__text">
-          标签
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
-      <div class="van-tabbar-item van-tabbar-item--active">
-        <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">
-        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
-            <!----></i>
-          <div class="van-badge van-badge--dot"></div>
-        </div>
-        <div class="van-tabbar-item__text">标签</div>
-      </div>
-      <div class="van-tabbar-item">
-        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
-            <!----></i>
-          <div class="van-badge">5</div>
-        </div>
-        <div class="van-tabbar-item__text">
-          标签
-        </div>
-      </div>
-      <div class="van-tabbar-item">
-        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
-            <!----></i>
-          <div class="van-badge">20</div>
-        </div>
-        <div class="van-tabbar-item__text">
-          标签
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
-      <div class="van-tabbar-item van-tabbar-item--active">
-        <div class="van-tabbar-item__icon"><img src="https://img.yzcdn.cn/vant/user-active.png">
-          <div class="van-badge">3</div>
-        </div>
-        <div class="van-tabbar-item__text"><span>自定义</span></div>
-      </div>
-      <div class="van-tabbar-item">
-        <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">
-        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
-            <!----></i>
-          <!---->
-        </div>
-        <div class="van-tabbar-item__text">标签</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
-      <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: 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: 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: rgb(0, 0, 0);">
-        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
-            <!----></i>
-          <!---->
-        </div>
-        <div class="van-tabbar-item__text">标签</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
-      <div class="van-tabbar-item van-tabbar-item--active">
-        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
-            <!----></i>
-          <!---->
-        </div>
-        <div class="van-tabbar-item__text">标签1</div>
-      </div>
-      <div class="van-tabbar-item">
-        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
-            <!----></i>
-          <!---->
-        </div>
-        <div class="van-tabbar-item__text">标签2</div>
-      </div>
-      <div class="van-tabbar-item">
-        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
-            <!----></i>
-          <!---->
-        </div>
-        <div class="van-tabbar-item__text">标签3</div>
-      </div>
-      <div class="van-tabbar-item">
-        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
-            <!----></i>
-          <!---->
-        </div>
-        <div class="van-tabbar-item__text">标签4</div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/tabbar/test/__snapshots__/demo.spec.js.snap b/src/tabbar/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..94e30daae
--- /dev/null
+++ b/src/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,234 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+    <div class="van-tabbar-item van-tabbar-item--active">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-home-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-search">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-friends-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-setting-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+    <div class="van-tabbar-item van-tabbar-item--active">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-home-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-search">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-friends-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-setting-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+    <div class="van-tabbar-item van-tabbar-item--active">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-home-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-search">
+          <!---->
+          <!---->
+          <!----></i>
+        <div class="van-badge van-badge--dot van-badge--fixed">
+          <!---->
+        </div>
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-friends-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <div class="van-badge van-badge--fixed">5</div>
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-setting-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <div class="van-badge van-badge--fixed">20</div>
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+    <div class="van-tabbar-item van-tabbar-item--active">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><img src="https://img.yzcdn.cn/vant/user-active.png">
+        <div class="van-badge van-badge--fixed">3</div>
+      </div>
+      <div class="van-tabbar-item__text"><span>自定义</span></div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-search">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-setting-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+    <div class="van-tabbar-item van-tabbar-item--active" style="color: rgb(7, 193, 96);">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-home-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+    <div class="van-tabbar-item" style="color: rgb(0, 0, 0);">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-search">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+    <div class="van-tabbar-item" style="color: rgb(0, 0, 0);">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-friends-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+    <div class="van-tabbar-item" style="color: rgb(0, 0, 0);">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-setting-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签</div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+    <div class="van-tabbar-item van-tabbar-item--active">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-home-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签1</div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-search">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签2</div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-friends-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签3</div>
+    </div>
+    <div class="van-tabbar-item">
+      <div class="van-badge__wrapper van-tabbar-item__icon"><i class="van-badge__wrapper van-icon van-icon-setting-o">
+          <!---->
+          <!---->
+          <!----></i>
+        <!---->
+      </div>
+      <div class="van-tabbar-item__text">标签4</div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/tabbar/test/demo.legacy.js b/src/tabbar/test/demo.spec.js
similarity index 100%
rename from src/tabbar/test/demo.legacy.js
rename to src/tabbar/test/demo.spec.js
diff --git a/src/tag/test/__snapshots__/demo.legacy.js.snap b/src/tag/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 5a3bfb560..000000000
--- a/src/tag/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,72 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>primary 类型</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--primary">标签</span></div>
-    </div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>success 类型</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--success">标签</span></div>
-    </div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>danger 类型</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--danger">标签</span></div>
-    </div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>warning 类型</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--warning">标签</span></div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>空心样式</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--plain van-tag--primary">标签</span></div>
-    </div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>圆角样式</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--round van-tag--primary">标签</span></div>
-    </div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>标记样式</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--mark van-tag--primary">标签</span></div>
-    </div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>可关闭标签</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--medium van-tag--primary" name="van-fade">
-        标签
-      <i class="van-icon van-icon-cross van-tag__close"><!----></i></span></div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>小号标签</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--primary">标签</span></div>
-    </div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>中号标签</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--medium van-tag--primary">标签</span></div>
-    </div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>大号标签</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--large van-tag--primary">标签</span></div>
-    </div>
-  </div>
-  <div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>背景颜色</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span></div>
-    </div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>文字颜色</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">标签</span></div>
-    </div>
-    <div class="van-cell">
-      <div class="van-cell__title"><span>空心颜色</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--plain van-tag--default" style="color: rgb(114, 50, 221);">标签</span></div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/tag/test/__snapshots__/demo.spec.js.snap b/src/tag/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..3ed3e9f7f
--- /dev/null
+++ b/src/tag/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,166 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>primary 类型</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span class="van-tag van-tag--primary">标签<!----></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>success 类型</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span class="van-tag van-tag--success">标签<!----></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>danger 类型</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span class="van-tag van-tag--danger">标签<!----></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>warning 类型</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span class="van-tag van-tag--warning">标签<!----></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>空心样式</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span class="van-tag van-tag--plain van-tag--primary">标签<!----></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>圆角样式</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span class="van-tag van-tag--round van-tag--primary">标签<!----></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>标记样式</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span class="van-tag van-tag--mark van-tag--primary">标签<!----></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>可关闭标签</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span class="van-tag van-tag--medium van-tag--primary">标签<i class="van-badge__wrapper van-icon van-icon-cross van-tag__close"><!----><!----><!----></i></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>小号标签</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span class="van-tag van-tag--primary">标签<!----></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>中号标签</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span class="van-tag van-tag--medium van-tag--primary">标签<!----></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>大号标签</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span class="van-tag van-tag--large van-tag--primary">标签<!----></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>背景颜色</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span style="background: rgb(114, 50, 221);" class="van-tag van-tag--default">标签<!----></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>文字颜色</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span style="color: rgb(173, 0, 0); background: rgb(255, 225, 225);" class="van-tag van-tag--default">标签<!----></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+  <div class="van-cell">
+    <!---->
+    <div class="van-cell__title"><span>空心颜色</span>
+      <!---->
+    </div>
+    <div class="van-cell__value">
+      <transition-stub><span style="color: rgb(114, 50, 221);" class="van-tag van-tag--plain van-tag--default">标签<!----></span></transition-stub>
+    </div>
+    <!---->
+    <!---->
+  </div>
+</div>
+`;
diff --git a/src/tag/test/demo.legacy.js b/src/tag/test/demo.spec.js
similarity index 100%
rename from src/tag/test/demo.legacy.js
rename to src/tag/test/demo.spec.js
diff --git a/src/toast/test/__snapshots__/demo.legacy.js.snap b/src/toast/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 86f4e1ebb..000000000
--- a/src/toast/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>文字提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>加载提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>成功提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>失败提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义图片</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义加载图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>顶部展示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>底部展示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>动态更新提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/toast/test/__snapshots__/demo.spec.js.snap b/src/toast/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..6e98bb8c7
--- /dev/null
+++ b/src/toast/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>文字提示</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>加载提示</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>成功提示</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>失败提示</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>自定义图标</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>自定义图片</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>自定义加载图标</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>顶部展示</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>底部展示</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable" role="button" tabindex="0">
+    <!---->
+    <div class="van-cell__title"><span>动态更新提示</span>
+      <!---->
+    </div>
+    <!----><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      <!---->
+      <!---->
+      <!----></i>
+    <!---->
+  </div>
+</div>
+`;
diff --git a/src/toast/test/demo.legacy.js b/src/toast/test/demo.spec.js
similarity index 100%
rename from src/toast/test/demo.legacy.js
rename to src/toast/test/demo.spec.js
diff --git a/src/tree-select/test/__snapshots__/demo.legacy.js.snap b/src/tree-select/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 073f62275..000000000
--- a/src/tree-select/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,90 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-tree-select" style="height: 300px;">
-      <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">浙江
-            <!---->
-          </div>
-        </a><a class="van-sidebar-item van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">江苏
-            <!---->
-          </div>
-        </a><a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">福建
-            <!---->
-          </div>
-        </a></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-success van-tree-select__selected">
-            <!----></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>
-        <div class="van-ellipsis van-tree-select__item">义乌</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tree-select" style="height: 300px;">
-      <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">浙江
-            <!---->
-          </div>
-        </a><a class="van-sidebar-item van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">江苏
-            <!---->
-          </div>
-        </a><a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">福建
-            <!---->
-          </div>
-        </a></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-success van-tree-select__selected">
-            <!----></i></div>
-        <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">温州<i class="van-icon van-icon-success van-tree-select__selected">
-            <!----></i></div>
-        <div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">宁波</div>
-        <div class="van-ellipsis van-tree-select__item">义乌</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tree-select" style="height: 55vw;">
-      <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">分组 1
-            <!---->
-          </div>
-        </a><a class="van-sidebar-item van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">分组 2
-            <!---->
-          </div>
-        </a></div>
-      <div class="van-tree-select__content">
-        <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img"></div>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tree-select" style="height: 55vw;">
-      <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">浙江<div class="van-badge van-badge--dot van-sidebar-item__badge"></div>
-          </div>
-        </a><a class="van-sidebar-item van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">江苏<div class="van-badge van-sidebar-item__badge">5</div>
-          </div>
-        </a></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-success van-tree-select__selected">
-            <!----></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>
-        <div class="van-ellipsis van-tree-select__item">义乌</div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/tree-select/test/__snapshots__/demo.spec.js.snap b/src/tree-select/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..0023e6143
--- /dev/null
+++ b/src/tree-select/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-tree-select" style="height: 300px;">
+    <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+        <div class="van-badge__wrapper van-sidebar-item__text">浙江
+          <!---->
+        </div>
+      </a><a class="van-sidebar-item van-tree-select__nav-item">
+        <div class="van-badge__wrapper van-sidebar-item__text">江苏
+          <!---->
+        </div>
+      </a><a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
+        <div class="van-badge__wrapper van-sidebar-item__text">福建
+          <!---->
+        </div>
+      </a></div>
+    <div class="van-tree-select__content">
+      <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">杭州<i class="van-badge__wrapper van-icon van-icon-success van-tree-select__selected">
+          <!---->
+          <!---->
+          <!----></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>
+      <div class="van-ellipsis van-tree-select__item">义乌
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tree-select" style="height: 300px;">
+    <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+        <div class="van-badge__wrapper van-sidebar-item__text">浙江
+          <!---->
+        </div>
+      </a><a class="van-sidebar-item van-tree-select__nav-item">
+        <div class="van-badge__wrapper van-sidebar-item__text">江苏
+          <!---->
+        </div>
+      </a><a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
+        <div class="van-badge__wrapper van-sidebar-item__text">福建
+          <!---->
+        </div>
+      </a></div>
+    <div class="van-tree-select__content">
+      <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">杭州<i class="van-badge__wrapper van-icon van-icon-success van-tree-select__selected">
+          <!---->
+          <!---->
+          <!----></i></div>
+      <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">温州<i class="van-badge__wrapper van-icon van-icon-success van-tree-select__selected">
+          <!---->
+          <!---->
+          <!----></i></div>
+      <div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">宁波
+        <!---->
+      </div>
+      <div class="van-ellipsis van-tree-select__item">义乌
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tree-select" style="height: 55vw;">
+    <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+        <div class="van-badge__wrapper van-sidebar-item__text">分组 1
+          <!---->
+        </div>
+      </a><a class="van-sidebar-item van-tree-select__nav-item">
+        <div class="van-badge__wrapper van-sidebar-item__text">分组 2
+          <!---->
+        </div>
+      </a></div>
+    <div class="van-tree-select__content">
+      <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img">
+        <!---->
+        <!---->
+      </div>
+      <!--v-if-->
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-tree-select" style="height: 55vw;">
+    <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+        <div class="van-badge__wrapper van-sidebar-item__text">浙江<div class="van-badge van-badge--dot van-badge--fixed">
+            <!---->
+          </div>
+        </div>
+      </a><a class="van-sidebar-item van-tree-select__nav-item">
+        <div class="van-badge__wrapper van-sidebar-item__text">江苏<div class="van-badge van-badge--fixed">5</div>
+        </div>
+      </a></div>
+    <div class="van-tree-select__content">
+      <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">杭州<i class="van-badge__wrapper van-icon van-icon-success van-tree-select__selected">
+          <!---->
+          <!---->
+          <!----></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>
+      <div class="van-ellipsis van-tree-select__item">义乌
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/tree-select/test/demo.legacy.js b/src/tree-select/test/demo.spec.js
similarity index 100%
rename from src/tree-select/test/demo.legacy.js
rename to src/tree-select/test/demo.spec.js
diff --git a/src/uploader/test/__snapshots__/demo.legacy.js.snap b/src/uploader/test/__snapshots__/demo.legacy.js.snap
deleted file mode 100644
index 6eb7af534..000000000
--- a/src/uploader/test/__snapshots__/demo.legacy.js.snap
+++ /dev/null
@@ -1,147 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-uploader">
-      <div class="van-uploader__wrapper">
-        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
-            <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-uploader">
-      <div class="van-uploader__wrapper">
-        <div class="van-uploader__preview">
-          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                <!----></i></div>
-          </div>
-          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
-              <!----></i></div>
-        </div>
-        <div class="van-uploader__preview">
-          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/tree.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                <!----></i></div>
-          </div>
-          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
-              <!----></i></div>
-        </div>
-        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
-            <!----></i><input multiple="multiple" type="file" accept="*" class="van-uploader__input"></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-uploader">
-      <div class="van-uploader__wrapper">
-        <div class="van-uploader__preview">
-          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                <!----></i></div>
-          </div>
-          <div class="van-uploader__mask">
-            <div class="van-loading van-loading--circular van-uploader__loading"><span class="van-loading__spinner van-loading__spinner--circular"><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-uploader__mask-message">上传中...</div>
-          </div>
-        </div>
-        <div class="van-uploader__preview">
-          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/tree.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                <!----></i></div>
-          </div>
-          <div class="van-uploader__mask"><i class="van-icon van-icon-close van-uploader__mask-icon">
-              <!----></i>
-            <div class="van-uploader__mask-message">上传失败</div>
-          </div>
-          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
-              <!----></i></div>
-        </div>
-        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
-            <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-uploader">
-      <div class="van-uploader__wrapper">
-        <div class="van-uploader__preview">
-          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                <!----></i></div>
-          </div>
-          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
-              <!----></i></div>
-        </div>
-        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
-            <!----></i><input multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-uploader">
-      <div class="van-uploader__wrapper">
-        <div class="van-uploader__preview">
-          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                <!----></i></div>
-          </div>
-          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
-              <!----></i></div>
-        </div>
-        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
-            <!----></i><input multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-uploader">
-      <div class="van-uploader__wrapper">
-        <div class="van-uploader__input-wrapper"><button class="van-button van-button--primary van-button--normal">
-            <div class="van-button__content"><i class="van-icon van-icon-plus van-button__icon">
-                <!----></i><span class="van-button__text">
-        上传文件
-      </span></div>
-          </button><input type="file" accept="image/*" class="van-uploader__input"></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-uploader">
-      <div class="van-uploader__wrapper">
-        <div class="van-uploader__preview">
-          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-                <!----></i></div>
-            <div class="van-uploader__preview-cover">
-              <div class="preview-cover van-ellipsis">图片名称</div>
-            </div>
-          </div>
-          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
-              <!----></i></div>
-        </div>
-        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
-            <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-uploader">
-      <div class="van-uploader__wrapper">
-        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
-            <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-uploader">
-      <div class="van-uploader__wrapper van-uploader__wrapper--disabled">
-        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
-            <!----></i><input type="file" accept="image/*" disabled="disabled" class="van-uploader__input"></div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/uploader/test/__snapshots__/demo.spec.js.snap b/src/uploader/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..38c118b67
--- /dev/null
+++ b/src/uploader/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,213 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-uploader">
+    <div class="van-uploader__wrapper">
+      <div class="van-uploader__upload"><i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!----><input type="file" class="van-uploader__input" accept="image/*"></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-uploader">
+    <div class="van-uploader__wrapper">
+      <div class="van-uploader__preview">
+        <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+        <!---->
+        <div class="van-uploader__preview-delete"><i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+      </div>
+      <div class="van-uploader__preview">
+        <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/tree.jpg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+        <!---->
+        <div class="van-uploader__preview-delete"><i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+      </div>
+      <div class="van-uploader__upload"><i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!----><input type="file" class="van-uploader__input" accept="*" multiple=""></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-uploader">
+    <div class="van-uploader__wrapper">
+      <div class="van-uploader__preview">
+        <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+        <div class="van-uploader__mask">
+          <div class="van-loading van-loading--circular van-uploader__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span>
+            <!---->
+          </div>
+          <div class="van-uploader__mask-message">上传中...</div>
+        </div>
+        <!---->
+      </div>
+      <div class="van-uploader__preview">
+        <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/tree.jpg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+        <div class="van-uploader__mask"><i class="van-badge__wrapper van-icon van-icon-close van-uploader__mask-icon">
+            <!---->
+            <!---->
+            <!----></i>
+          <div class="van-uploader__mask-message">上传失败</div>
+        </div>
+        <div class="van-uploader__preview-delete"><i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+      </div>
+      <div class="van-uploader__upload"><i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!----><input type="file" class="van-uploader__input" accept="image/*"></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-uploader">
+    <div class="van-uploader__wrapper">
+      <div class="van-uploader__preview">
+        <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+        <!---->
+        <div class="van-uploader__preview-delete"><i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+      </div>
+      <div class="van-uploader__upload"><i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!----><input type="file" class="van-uploader__input" accept="image/*" multiple=""></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-uploader">
+    <div class="van-uploader__wrapper">
+      <div class="van-uploader__preview">
+        <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <!---->
+        </div>
+        <!---->
+        <div class="van-uploader__preview-delete"><i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+      </div>
+      <div class="van-uploader__upload"><i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!----><input type="file" class="van-uploader__input" accept="image/*" multiple=""></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-uploader">
+    <div class="van-uploader__wrapper">
+      <div class="van-uploader__input-wrapper"><button type="button" class="van-button van-button--primary van-button--normal">
+          <div class="van-button__content"><i class="van-badge__wrapper van-icon van-icon-plus van-button__icon">
+              <!---->
+              <!---->
+              <!----></i><span class="van-button__text">上传文件</span>
+            <!---->
+          </div>
+        </button><input type="file" class="van-uploader__input" accept="image/*"></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-uploader">
+    <div class="van-uploader__wrapper">
+      <div class="van-uploader__preview">
+        <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image__loading"><i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+              <!---->
+              <!---->
+              <!----></i></div>
+          <div class="van-uploader__preview-cover">
+            <div class="preview-cover van-ellipsis">图片名称</div>
+          </div>
+        </div>
+        <!---->
+        <div class="van-uploader__preview-delete"><i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
+            <!---->
+            <!---->
+            <!----></i></div>
+      </div>
+      <div class="van-uploader__upload"><i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!----><input type="file" class="van-uploader__input" accept="image/*"></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-uploader">
+    <div class="van-uploader__wrapper">
+      <div class="van-uploader__upload"><i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!----><input type="file" class="van-uploader__input" accept="image/*"></div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-uploader">
+    <div class="van-uploader__wrapper van-uploader__wrapper--disabled">
+      <div class="van-uploader__upload"><i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
+          <!---->
+          <!---->
+          <!----></i>
+        <!----><input type="file" class="van-uploader__input" accept="image/*" disabled=""></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/uploader/test/demo.legacy.js b/src/uploader/test/demo.spec.js
similarity index 100%
rename from src/uploader/test/demo.legacy.js
rename to src/uploader/test/demo.spec.js
diff --git a/test/demo.ts b/test/demo.ts
index d60c1687a..48dcc6744 100644
--- a/test/demo.ts
+++ b/test/demo.ts
@@ -11,7 +11,7 @@ const EmptyComponent = {
 };
 
 export function snapshotDemo(Demo: any, option: any = {}) {
-  test('renders demo correctly', async () => {
+  test('should render demo and match snapshot', async () => {
     if (option.beforeTest) {
       option.beforeTest();
     }