diff --git a/build/webpack.config.dev.js b/build/webpack.config.dev.js
index d2538370d..04ca6c82f 100644
--- a/build/webpack.config.dev.js
+++ b/build/webpack.config.dev.js
@@ -7,6 +7,7 @@ var getPostcssPlugin = require('./utils/postcss_pipe');
 var ProgressBarPlugin = require('progress-bar-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 
 var StyleExtractPlugin;
 if (process.env.NODE_ENV === 'production') {
@@ -25,8 +26,7 @@ function convert(str) {
 function wrap(render) {
   return function() {
     return render.apply(this, arguments)
-      .replace('<code class="', '<code class="hljs ')
-      .replace('<code>', '<code class="hljs">');
+      .replace(/\<code v-pre class=\"/, '<code v-pre class="hljs ');
   };
 };
 
@@ -58,7 +58,6 @@ module.exports = {
     extensions: ['.js', '.vue', '.css'],
     alias: {
       'vue$': 'vue/dist/vue.runtime.common.js',
-      'vant': path.join(__dirname, '..'),
       'src': path.join(__dirname, '../src'),
       'packages': path.join(__dirname, '../packages'),
       'lib': path.join(__dirname, '../lib'),
@@ -167,7 +166,9 @@ module.exports = {
       filename: 'examples.html',
       inject: true
     }),
+    new webpack.HotModuleReplacementPlugin(),
     new OptimizeCssAssetsPlugin(),
-    StyleExtractPlugin
+    StyleExtractPlugin,
+    new FriendlyErrorsPlugin()
   ]
 };
diff --git a/components.json b/components.json
index da3f772d4..dd4b25daa 100644
--- a/components.json
+++ b/components.json
@@ -6,6 +6,7 @@
   "cell": "./packages/cell/index.js",
   "icon": "./packages/icon/index.js",
   "cell-group": "./packages/cell-group/index.js",
+  "cell-swipe": "./packages/cell-swipe/index.js",
   "popup": "./packages/popup/index.js",
   "dialog": "./packages/dialog/index.js",
   "picker": "./packages/picker/index.js",
diff --git a/docs/examples-dist/cell-swipe.vue b/docs/examples-dist/cell-swipe.vue
new file mode 100644
index 000000000..cd91bd534
--- /dev/null
+++ b/docs/examples-dist/cell-swipe.vue
@@ -0,0 +1,39 @@
+<template><section class="demo-cell"><h1 class="demo-title">Cell Swipe 滑动单元格</h1><example-block title="基础用法">
+                <van-cell-swipe :right-width="65" :left-width="65">
+  <van-cell-group>
+    <van-cell title="单元格1" value="单元格1内容"></van-cell>
+  </van-cell-group>
+  
+  <span slot="right" class="swipe-delete-btn">
+      删除
+  </span>
+  <span slot="left" class="swipe-check-btn">
+      选择
+  </span>
+</van-cell-swipe>
+
+              </example-block></section></template>
+<style>
+.swipe-delete-btn {
+    background-color: #FF4444;
+    color: #FFFFFF;
+    font-size: 16px;
+    width: 65px;
+    height: 44px;
+    display: inline-block;
+    text-align: center;
+    line-height: 44px;
+}
+.swipe-check-btn {
+    background-color: #84c483;
+    color: #FFFFFF;
+    font-size: 16px;
+    width: 65px;
+    height: 44px;
+    display: inline-block;
+    text-align: center;
+    line-height: 44px;
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples-dist/checkbox.vue b/docs/examples-dist/checkbox.vue
index 9a9b13486..89c897ed2 100644
--- a/docs/examples-dist/checkbox.vue
+++ b/docs/examples-dist/checkbox.vue
@@ -7,7 +7,7 @@
 
               </example-block><example-block title="禁用状态">
                 <div class="van-checkbox-wrapper">
-  <van-checkbox v-model="checkbox2">复选框2</van-checkbox>
+  <van-checkbox v-model="checkbox2" disabled>复选框2</van-checkbox>
 </div>
 
 
@@ -15,7 +15,7 @@
               </example-block><example-block title="Checkbox组">
                 <div class="van-checkbox-wrapper">
   <van-checkbox-group v-model="result">
-    <van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
+    <van-checkbox v-for="(item, index) in list" :key="index" :name="item">复选框{{item}}</van-checkbox>
   </van-checkbox-group>
 </div>
 
@@ -24,7 +24,7 @@
               </example-block><example-block title="禁用Checkbox组">
                 <div class="van-checkbox-wrapper">
   <van-checkbox-group v-model="result" disabled>
-    <van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
+    <van-checkbox v-for="(item, index) in list" :key="index" :name="item">复选框{{item}}</van-checkbox>
   </van-checkbox-group>
 </div>
 
@@ -33,7 +33,7 @@
               </example-block><example-block title="与Cell组件一起使用">
                 <van-checkbox-group v-model="result">
   <van-cell-group>
-    <van-cell v-for="item in list">
+    <van-cell v-for="(item, index) in list" :key="index">
       <van-checkbox :name="item">复选框{{item}}</van-checkbox>
     </van-cell>
   </van-cell-group>
diff --git a/docs/examples-dist/icon.vue b/docs/examples-dist/icon.vue
index dc0e0a8e7..40620f0e0 100644
--- a/docs/examples-dist/icon.vue
+++ b/docs/examples-dist/icon.vue
@@ -1,4 +1,7 @@
 <template><section class="demo-icon"><h1 class="demo-title">Icon 图标</h1><example-block title="所有Icon">
+                <van-icon name="qr-invalid" style="text-align: center"></van-icon>
+
+              </example-block><example-block title="所有Icon">
                 <van-row>
   <van-col span="8">
     <van-icon name="qr-invalid"></van-icon>
@@ -64,10 +67,6 @@
     <van-icon name="photo"></van-icon>
     <span>photo</span>
   </van-col>
-  <van-col span="8">
-    <van-icon name="logistics"></van-icon>
-    <span>logistics</span>
-  </van-col>
   <van-col span="8">
     <van-icon name="edit"></van-icon>
     <span>edit</span>
@@ -120,26 +119,163 @@
     <van-icon name="password-view"></van-icon>
     <span>password-view</span>
   </van-col>
-  <van-col span="8">
-    <van-icon name="password-not-view"></van-icon>
-    <span>password-not-view</span>
-  </van-col>
   <van-col span="8">
     <van-icon name="wap-nav"></van-icon>
     <span>wap-nav</span>
   </van-col>
+  <van-col span="8">
+    <van-icon name="password-not-view"></van-icon>
+    <span>password-not-view</span>
+  </van-col>
   <van-col span="8">
     <van-icon name="wap-home"></van-icon>
     <span>wap-home</span>
   </van-col>
+  <van-col span="8">
+    <van-icon name="ecard-pay"></van-icon>
+    <span>ecard-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="balance-pay"></van-icon>
+    <span>balance-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="peer-pay"></van-icon>
+    <span>peer-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="credit-pay"></van-icon>
+    <span>credit-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="debit-pay"></van-icon>
+    <span>debit-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="other-pay"></van-icon>
+    <span>other-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="cart"></van-icon>
+    <span>cart</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="browsing-history"></van-icon>
+    <span>browsing-history</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="goods-collect"></van-icon>
+    <span>goods-collect</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="shop-collect"></van-icon>
+    <span>shop-collect</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="receive-gift"></van-icon>
+    <span>receive-gift</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="send-gift"></van-icon>
+    <span>send-gift</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="setting"></van-icon>
+    <span>setting</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="points"></van-icon>
+    <span>points</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="coupon"></van-icon>
+    <span>coupon</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="free-postage"></van-icon>
+    <span>free-postage</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="discount"></van-icon>
+    <span>discount</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="birthday-privilege"></van-icon>
+    <span>birthday-privilege</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="member-day-privilege"></van-icon>
+    <span>member-day-privilege</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="balance-details"></van-icon>
+    <span>balance-details</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="cash-back-record"></van-icon>
+    <span>cash-back-record</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="points-mall"></van-icon>
+    <span>points-mall</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="exchange-record"></van-icon>
+    <span>exchange-record</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="pending-payment"></van-icon>
+    <span>pending-payment</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="pending-orders"></van-icon>
+    <span>pending-orders</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="pending-deliver"></van-icon>
+    <span>pending-deliver</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="logistics"></van-icon>
+    <span>logistics</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="pending-evaluate"></van-icon>
+    <span>pending-evaluate</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="cash-on-deliver"></van-icon>
+    <span>cash-on-deliver</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="gift-card-pay"></van-icon>
+    <span>gift-card-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="underway"></van-icon>
+    <span>underway</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="point-gift"></van-icon>
+    <span>point-gift</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="after-sale"></van-icon>
+    <span>after-sale</span>
+  </van-col>
 </van-row>
 
               </example-block></section></template>
 <style>
 @component-namespace demo {
   @b icon {
+    .examples {
+      max-height: none;
+    }
+
     .van-col {
       text-align: center;
+      height: 120px;
     }
 
     .van-icon {
diff --git a/docs/examples-dist/lazyload.vue b/docs/examples-dist/lazyload.vue
index bab9e763d..c8d1579c2 100644
--- a/docs/examples-dist/lazyload.vue
+++ b/docs/examples-dist/lazyload.vue
@@ -1,6 +1,6 @@
 <template><section class="demo-lazyload"><h1 class="demo-title">Lazyload 图片懒加载</h1><example-block title="基础用法">
                 <ul class="image-list" ref="container">
-  <li v-for="img in imageList">
+  <li v-for="(img, index) in imageList" :key="index">
     <img class="lazy-img" v-lazy="img">
   </li>
 </ul>
@@ -9,7 +9,7 @@
 
               </example-block><example-block title="背景图懒加载">
                 <ul class="image-list" ref="container">
-  <li v-for="img in backgroundImageList">
+  <li v-for="(img, index) in backgroundImageList" :key="index">
     <div class="lazy-background" v-lazy:background-image="img"></div>
   </li>
 </ul>
@@ -19,7 +19,7 @@
               </example-block><example-block title="懒加载模块">
                 <lazy-component @show="handleComponentShow">
   <ul class="image-list">
-    <li v-for="img in componentImageList">
+    <li v-for="(img, index) in componentImageList" :key="index">
       <img class="lazy-img" v-lazy="img">
     </li>
   </ul>
diff --git a/docs/examples-dist/progress.vue b/docs/examples-dist/progress.vue
index cda4022da..bdc489ae2 100644
--- a/docs/examples-dist/progress.vue
+++ b/docs/examples-dist/progress.vue
@@ -11,13 +11,13 @@
 
               </example-block><example-block title="Inactive">
                 <div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></van-progress>
+  <van-progress class="demo-progress__demo1" inactive="" :percentage="0"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></van-progress>
+  <van-progress class="demo-progress__demo2" inactive="" :percentage="46"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></van-progress>
+  <van-progress class="demo-progress__demo1" inactive="" :percentage="100"></van-progress>
 </div>
 
               </example-block><example-block title="自定义颜色和文字">
diff --git a/docs/examples-dist/search.vue b/docs/examples-dist/search.vue
index 24b981d97..0a05cfb6e 100644
--- a/docs/examples-dist/search.vue
+++ b/docs/examples-dist/search.vue
@@ -3,6 +3,9 @@
 
 
 
+              </example-block><example-block title="基础用法">
+                <van-search placeholder="搜索商品" type="showcase"></van-search>
+
               </example-block><example-block title="监听对应事件">
                 <van-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></van-search>
 
diff --git a/docs/examples-dist/swipe.vue b/docs/examples-dist/swipe.vue
index 62374b944..338fdf8ba 100644
--- a/docs/examples-dist/swipe.vue
+++ b/docs/examples-dist/swipe.vue
@@ -1,6 +1,6 @@
 <template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
                 <van-swipe>
-  <van-swipe-item v-for="img in images">
+  <van-swipe-item v-for="(img, index) in images" :key="index">
     <a href="https://youzan.com" target="_blank">
       <img v-lazy="img" alt="">
     </a>
@@ -11,7 +11,7 @@
 
               </example-block><example-block title="自动轮播">
                 <van-swipe auto-play="" @pagechange:end="handlePageEnd">
-  <van-swipe-item v-for="img in autoImages">
+  <van-swipe-item v-for="(img, index) in autoImages" :key="index">
     <img v-lazy="img" alt="">
   </van-swipe-item>
 </van-swipe>
diff --git a/docs/examples-dist/switch.vue b/docs/examples-dist/switch.vue
index 4aeed0725..4026260c3 100644
--- a/docs/examples-dist/switch.vue
+++ b/docs/examples-dist/switch.vue
@@ -17,11 +17,11 @@
               </example-block><example-block title="禁用状态">
                 <van-row>
   <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
+    <van-switch class="some-customized-class" v-model="switchStateTrue" disabled></van-switch>
     <div class="demo-switch__text">打开</div>
   </van-col>
   <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
+    <van-switch class="some-customized-class" v-model="switchStateFalse" disabled></van-switch>
     <div class="demo-switch__text">关闭</div>
   </van-col>
 </van-row>
@@ -31,11 +31,11 @@
               </example-block><example-block title="loading状态">
                 <van-row>
   <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
+    <van-switch class="some-customized-class" v-model="switchStateTrue" loading=""></van-switch>
     <div class="demo-switch__text">打开</div>
   </van-col>
   <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
+    <van-switch class="some-customized-class" v-model="switchStateFalse" loading=""></van-switch>
     <div class="demo-switch__text">关闭</div>
   </van-col>
 </van-row>
diff --git a/docs/examples-dist/uploader.vue b/docs/examples-dist/uploader.vue
index 46342acc4..ddeb29917 100644
--- a/docs/examples-dist/uploader.vue
+++ b/docs/examples-dist/uploader.vue
@@ -5,6 +5,8 @@
   </van-uploader>
 </div>
 
+
+
               </example-block></section></template>
 <style>
 .uploader-container {
diff --git a/docs/examples-dist/waterfall.vue b/docs/examples-dist/waterfall.vue
index b87244cf2..3a9951243 100644
--- a/docs/examples-dist/waterfall.vue
+++ b/docs/examples-dist/waterfall.vue
@@ -2,7 +2,7 @@
                 <p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
 <div class="waterfall">
   <div v-waterfall-lower="loadMore" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
-    <div class="waterfall-item" v-for="item in list" style="text-align: center;">
+    <div class="waterfall-item" v-for="(item, index) in list" :key="index" style="text-align: center;">
       {{ item }}
     </div>
     <van-loading v-if="loading" :type="'circle'" :color="'black'"></van-loading>
diff --git a/docs/examples-docs/cell-swipe.md b/docs/examples-docs/cell-swipe.md
new file mode 100644
index 000000000..beafe0aa2
--- /dev/null
+++ b/docs/examples-docs/cell-swipe.md
@@ -0,0 +1,90 @@
+<style>
+.swipe-delete-btn {
+    background-color: #FF4444;
+    color: #FFFFFF;
+    font-size: 16px;
+    width: 65px;
+    height: 44px;
+    display: inline-block;
+    text-align: center;
+    line-height: 44px;
+}
+.swipe-check-btn {
+    background-color: #84c483;
+    color: #FFFFFF;
+    font-size: 16px;
+    width: 65px;
+    height: 44px;
+    display: inline-block;
+    text-align: center;
+    line-height: 44px;
+}
+</style>
+## CellSwipe 滑动单元格
+
+### 使用指南
+
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Cell Swipe`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Cell Swipe`组件了：
+
+```js
+import Vue from 'vue';
+import { CellSwipe } from 'vant';
+import 'vant/lib/vant-css/cell-swipe.css';
+
+Vue.component(CellSwipe.name, CellSwipe);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Cell Swipe`组件，这样只能在你注册的组件中使用`Cell Swipe`：
+
+```js
+import { CellSwipe } from 'vant';
+
+export default {
+  components: {
+    'van-cell-swipe': CellSwipe
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+<van-cell-swipe :right-width="65" :left-width="65">
+  <van-cell-group>
+    <van-cell title="单元格1" value="单元格1内容"></van-cell>
+  </van-cell-group>
+  
+  <span slot="right" class="swipe-delete-btn">
+      删除
+  </span>
+  <span slot="left" class="swipe-check-btn">
+      选择
+  </span>
+</van-cell-swipe>
+```
+:::
+
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| right-width | 右侧滑动按钮宽度 | `number`  |      0     |           |
+| left-width | 左侧滑动按钮宽度 | `number`  |       0    |           |
+
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| - | 自定义显示内容 |
+| right | 右侧滑动内容 |
+| left | 左侧滑动内容 |
diff --git a/docs/examples-docs/checkbox.md b/docs/examples-docs/checkbox.md
index 1a0bdf894..dffb5c5a9 100644
--- a/docs/examples-docs/checkbox.md
+++ b/docs/examples-docs/checkbox.md
@@ -101,7 +101,7 @@ export default {
 :::demo 禁用状态
 ```html
 <div class="van-checkbox-wrapper">
-  <van-checkbox v-model="checkbox2">复选框2</van-checkbox>
+  <van-checkbox v-model="checkbox2" disabled>复选框2</van-checkbox>
 </div>
 
 <script>
@@ -124,7 +124,7 @@ export default {
 ```html
 <div class="van-checkbox-wrapper">
   <van-checkbox-group v-model="result">
-    <van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
+    <van-checkbox v-for="(item, index) in list" :key="index" :name="item">复选框{{item}}</van-checkbox>
   </van-checkbox-group>
 </div>
 
@@ -159,7 +159,7 @@ export default {
 ```html
 <div class="van-checkbox-wrapper">
   <van-checkbox-group v-model="result" disabled>
-    <van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
+    <van-checkbox v-for="(item, index) in list" :key="index" :name="item">复选框{{item}}</van-checkbox>
   </van-checkbox-group>
 </div>
 
@@ -188,7 +188,7 @@ export default {
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
-    <van-cell v-for="item in list">
+    <van-cell v-for="(item, index) in list" :key="index">
       <van-checkbox :name="item">复选框{{item}}</van-checkbox>
     </van-cell>
   </van-cell-group>
diff --git a/docs/examples-docs/datetime-picker.md b/docs/examples-docs/datetime-picker.md
index 71bc391ba..5c9672f84 100644
--- a/docs/examples-docs/datetime-picker.md
+++ b/docs/examples-docs/datetime-picker.md
@@ -73,13 +73,13 @@ export default {
 </van-datetime-picker>
 
 <script>
-
 export default {
   data() {
     return {
       minHour: 10,
       maxHour: 20,
-      minDate: new Date()
+      minDate: new Date(),
+      currentDate: null
     };
   },
 
diff --git a/docs/examples-docs/icon.md b/docs/examples-docs/icon.md
index 1c54c7dc3..17dc41d98 100644
--- a/docs/examples-docs/icon.md
+++ b/docs/examples-docs/icon.md
@@ -1,8 +1,13 @@
 <style>
 @component-namespace demo {
   @b icon {
+    .examples {
+      max-height: none;
+    }
+
     .van-col {
       text-align: center;
+      height: 120px;
     }
 
     .van-icon {
@@ -51,7 +56,17 @@ export default {
 
 #### 基础用法
 
-设置`name`属性为对应的图标名称即可，以下目前有的所有图标：
+设置`name`属性为对应的图标名称即可：
+
+:::demo 所有Icon
+```html
+<van-icon name="qr-invalid" style="text-align: center"></van-icon>
+```
+:::
+
+#### 所有Icons
+
+以下目前有的所有图标及其名称：
 
 :::demo 所有Icon
 ```html
@@ -120,10 +135,6 @@ export default {
     <van-icon name="photo"></van-icon>
     <span>photo</span>
   </van-col>
-  <van-col span="8">
-    <van-icon name="logistics"></van-icon>
-    <span>logistics</span>
-  </van-col>
   <van-col span="8">
     <van-icon name="edit"></van-icon>
     <span>edit</span>
@@ -176,18 +187,150 @@ export default {
     <van-icon name="password-view"></van-icon>
     <span>password-view</span>
   </van-col>
-  <van-col span="8">
-    <van-icon name="password-not-view"></van-icon>
-    <span>password-not-view</span>
-  </van-col>
   <van-col span="8">
     <van-icon name="wap-nav"></van-icon>
     <span>wap-nav</span>
   </van-col>
+  <van-col span="8">
+    <van-icon name="password-not-view"></van-icon>
+    <span>password-not-view</span>
+  </van-col>
   <van-col span="8">
     <van-icon name="wap-home"></van-icon>
     <span>wap-home</span>
   </van-col>
+  <van-col span="8">
+    <van-icon name="ecard-pay"></van-icon>
+    <span>ecard-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="balance-pay"></van-icon>
+    <span>balance-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="peer-pay"></van-icon>
+    <span>peer-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="credit-pay"></van-icon>
+    <span>credit-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="debit-pay"></van-icon>
+    <span>debit-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="other-pay"></van-icon>
+    <span>other-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="cart"></van-icon>
+    <span>cart</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="browsing-history"></van-icon>
+    <span>browsing-history</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="goods-collect"></van-icon>
+    <span>goods-collect</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="shop-collect"></van-icon>
+    <span>shop-collect</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="receive-gift"></van-icon>
+    <span>receive-gift</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="send-gift"></van-icon>
+    <span>send-gift</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="setting"></van-icon>
+    <span>setting</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="points"></van-icon>
+    <span>points</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="coupon"></van-icon>
+    <span>coupon</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="free-postage"></van-icon>
+    <span>free-postage</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="discount"></van-icon>
+    <span>discount</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="birthday-privilege"></van-icon>
+    <span>birthday-privilege</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="member-day-privilege"></van-icon>
+    <span>member-day-privilege</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="balance-details"></van-icon>
+    <span>balance-details</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="cash-back-record"></van-icon>
+    <span>cash-back-record</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="points-mall"></van-icon>
+    <span>points-mall</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="exchange-record"></van-icon>
+    <span>exchange-record</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="pending-payment"></van-icon>
+    <span>pending-payment</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="pending-orders"></van-icon>
+    <span>pending-orders</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="pending-deliver"></van-icon>
+    <span>pending-deliver</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="logistics"></van-icon>
+    <span>logistics</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="pending-evaluate"></van-icon>
+    <span>pending-evaluate</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="cash-on-deliver"></van-icon>
+    <span>cash-on-deliver</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="gift-card-pay"></van-icon>
+    <span>gift-card-pay</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="underway"></van-icon>
+    <span>underway</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="point-gift"></van-icon>
+    <span>point-gift</span>
+  </van-col>
+  <van-col span="8">
+    <van-icon name="after-sale"></van-icon>
+    <span>after-sale</span>
+  </van-col>
 </van-row>
 ```
 :::
diff --git a/docs/examples-docs/lazyload.md b/docs/examples-docs/lazyload.md
index 17c3a0bbc..b8725d0bc 100644
--- a/docs/examples-docs/lazyload.md
+++ b/docs/examples-docs/lazyload.md
@@ -69,7 +69,7 @@ Vue.use(Lazyload, options);
 :::demo 基础用法
 ```html
 <ul class="image-list" ref="container">
-  <li v-for="img in imageList">
+  <li v-for="(img, index) in imageList" :key="index">
     <img class="lazy-img" v-lazy="img">
   </li>
 </ul>
@@ -100,7 +100,7 @@ export default {
 :::demo 背景图懒加载
 ```html
 <ul class="image-list" ref="container">
-  <li v-for="img in backgroundImageList">
+  <li v-for="(img, index) in backgroundImageList" :key="index">
     <div class="lazy-background" v-lazy:background-image="img"></div>
   </li>
 </ul>
@@ -128,7 +128,7 @@ export default {
 ```html
 <lazy-component @show="handleComponentShow">
   <ul class="image-list">
-    <li v-for="img in componentImageList">
+    <li v-for="(img, index) in componentImageList" :key="index">
       <img class="lazy-img" v-lazy="img">
     </li>
   </ul>
diff --git a/docs/examples-docs/progress.md b/docs/examples-docs/progress.md
index 084b6cd21..795ba5235 100644
--- a/docs/examples-docs/progress.md
+++ b/docs/examples-docs/progress.md
@@ -71,13 +71,13 @@ export default {
 :::demo Inactive
 ```html
 <div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></van-progress>
+  <van-progress class="demo-progress__demo1" inactive :percentage="0"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></van-progress>
+  <van-progress class="demo-progress__demo2" inactive :percentage="46"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></van-progress>
+  <van-progress class="demo-progress__demo1" inactive :percentage="100"></van-progress>
 </div>
 ```
 :::
diff --git a/docs/examples-docs/quickstart.md b/docs/examples-docs/quickstart.md
index 44ad47016..3636ce4f2 100644
--- a/docs/examples-docs/quickstart.md
+++ b/docs/examples-docs/quickstart.md
@@ -1,7 +1,7 @@
 ## Vant
 
-一套`Vue 2.0`的基础组件。
-<br>A collection of essential UI components written with Vue 2.0.
+一套基于`Vue.js 2.0`的Mobile组件库
+<br>A Vue.js 2.0 Mobile UI
 
 ### 安装
 
@@ -32,3 +32,25 @@ import 'vant/lib/vant-css/cell.css';
 Vue.component(Button.name, Button);
 Vue.component(Cell.name, Cell);
 ```
+
+### 自定义主题
+
+`Vant`默认提供一套主题，`CSS`命名采用`BEM`的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
+
+#### 下载主题
+
+可以通过Github或npm来下载主题：
+
+```shell
+# npm
+npm i vant-css -D
+
+# github
+git clone git@github.com:youzan/vant.git
+cd packages/vant-css
+```
+
+#### 修改主题
+
+修改你下载主题对应的样式即可，然后引入你修改后的主题。
+
diff --git a/docs/examples-docs/search.md b/docs/examples-docs/search.md
index 342e6c44a..241312784 100644
--- a/docs/examples-docs/search.md
+++ b/docs/examples-docs/search.md
@@ -69,6 +69,14 @@ export default {
 ```
 :::
 
+#### 微杂志页搜索样式
+
+:::demo 基础用法
+```html
+<van-search placeholder="搜索商品" type="showcase"></van-search>
+```
+:::
+
 #### 监听对应事件
 
 除了`search`事件，还有`change`和`cancel`事件，`change`事件在`input`输入框每次`change`时触发，适用于实时搜索等，`cancel`在取消按钮点击时触发。
@@ -97,9 +105,10 @@ export default {
 
 ### API
 
-| 参数       | 说明      | 类型       | 默认值       | 必须       |
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | placeholder | `input`的`placeholder`文案 | `string`  |           |     |
+| type | 搜索样式类型 | `string`  |     `normal`      |  `normal`：普通样式，`showcase`：微杂志页样式   |
 
 ### Event
 
diff --git a/docs/examples-docs/swipe.md b/docs/examples-docs/swipe.md
index 3acc26c7a..f7aff3bb1 100644
--- a/docs/examples-docs/swipe.md
+++ b/docs/examples-docs/swipe.md
@@ -77,7 +77,7 @@ export default {
 :::demo 基础用法
 ```html
 <van-swipe>
-  <van-swipe-item v-for="img in images">
+  <van-swipe-item v-for="(img, index) in images" :key="index">
     <a href="https://youzan.com" target="_blank">
       <img v-lazy="img" alt="">
     </a>
@@ -106,7 +106,7 @@ export default {
 :::demo 自动轮播
 ```html
 <van-swipe auto-play @pagechange:end="handlePageEnd">
-  <van-swipe-item v-for="img in autoImages">
+  <van-swipe-item v-for="(img, index) in autoImages" :key="index">
     <img v-lazy="img" alt="">
   </van-swipe-item>
 </van-swipe>
diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md
index 11a18a0aa..bbe4beec1 100644
--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@@ -128,11 +128,11 @@ export default {
 ```html
 <van-row>
   <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
+    <van-switch class="some-customized-class" v-model="switchStateTrue" disabled></van-switch>
     <div class="demo-switch__text">打开</div>
   </van-col>
   <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
+    <van-switch class="some-customized-class" v-model="switchStateFalse" disabled></van-switch>
     <div class="demo-switch__text">关闭</div>
   </van-col>
 </van-row>
@@ -158,11 +158,11 @@ export default {
 ```html
 <van-row>
   <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
+    <van-switch class="some-customized-class" v-model="switchStateTrue" loading></van-switch>
     <div class="demo-switch__text">打开</div>
   </van-col>
   <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
+    <van-switch class="some-customized-class" v-model="switchStateFalse" loading></van-switch>
     <div class="demo-switch__text">关闭</div>
   </van-col>
 </van-row>
diff --git a/docs/examples-docs/uploader.md b/docs/examples-docs/uploader.md
index d3fe3bb71..a682d2da6 100644
--- a/docs/examples-docs/uploader.md
+++ b/docs/examples-docs/uploader.md
@@ -3,6 +3,7 @@
   padding: 5px 15px;
 }
 </style>
+
 <script>
 export default {
   methods: {
@@ -57,6 +58,16 @@ export default {
     <van-icon name="photograph"></van-icon>
   </van-uploader>
 </div>
+
+<script>
+export default {
+  methods: {
+    logContent(file) {
+      console.log(file)
+    }
+  }
+};  
+</script>
 ```
 :::
 
diff --git a/docs/examples-docs/waterfall.md b/docs/examples-docs/waterfall.md
index cc33311d6..6883952d2 100644
--- a/docs/examples-docs/waterfall.md
+++ b/docs/examples-docs/waterfall.md
@@ -105,7 +105,8 @@ export default {
   >
     <div
       class="waterfall-item"
-      v-for="item in list"
+      v-for="(item, index) in list"
+      :key="index"
       style="text-align: center;"
     >
       {{ item }}
diff --git a/docs/src/components/demo-list.vue b/docs/src/components/demo-list.vue
index 5beb190a2..301202bb9 100644
--- a/docs/src/components/demo-list.vue
+++ b/docs/src/components/demo-list.vue
@@ -3,9 +3,9 @@
     <h1 class="zanui-title">Zan UI Wap</h1>
     <h2 class="zanui-desc">有赞移动wap端组件库</h2>
     <div class="mobile-navs">
-      <template v-for="item in data">
-        <div class="mobile-nav-item" v-if="item.showInMobile">
-          <mobile-nav v-for="(group, index) in item.groups" :group="group" :base="base" :nav-key="index"></mobile-nav>
+      <template v-for="(item, index) in data">
+        <div class="mobile-nav-item" v-if="item.showInMobile" :key="index">
+          <mobile-nav v-for="(group, index) in item.groups" :group="group" :base="base" :nav-key="index" :key="index"></mobile-nav>
         </div>
       </template>
     </div>
diff --git a/docs/src/components/mobile-nav.vue b/docs/src/components/mobile-nav.vue
index 9c2ea9e88..bb76f9136 100644
--- a/docs/src/components/mobile-nav.vue
+++ b/docs/src/components/mobile-nav.vue
@@ -10,8 +10,9 @@
     </div>
     <div class="mobile-nav-group__list-wrapper" :class="{ 'mobile-nav-group__list-wrapper--open': isOpen }">
       <ul class="mobile-nav-group__list" :class="{ 'mobile-nav-group__list--open': isOpen }">
-        <template v-for="navItem in group.list">
+        <template v-for="(navItem, index) in group.list">
           <li
+            :key="index"
             class="mobile-nav-group__title"
             v-if="!navItem.disabled">
             <router-link
diff --git a/docs/src/components/page-header.vue b/docs/src/components/page-header.vue
index 20ae6ddac..f0cf42a77 100644
--- a/docs/src/components/page-header.vue
+++ b/docs/src/components/page-header.vue
@@ -9,13 +9,13 @@
           <a href="https://www.youzanyun.com/zanui" class="page-header__link">首页</a>
         </li>
         <li class="page-header__item">
-          <a href="https://www.youzanyun.com/zanui/react" class="page-header__link">PC端</a>
+          <a href="https://www.youzanyun.com/zanui/react" class="page-header__link">Zent - PC端</a>
         </li>
         <li class="page-header__item">
-          <a href="https://www.youzanyun.com/zanui/vue" class="page-header__link page-header__link--active">移动端</a>
+          <a href="https://www.youzanyun.com/zanui/vue" class="page-header__link page-header__link--active">Vant - 移动端</a>
         </li>
         <li class="page-header__item">
-          <a href="https://github.com/youzan/zanui-weapp" class="page-header__link">微信小程序</a>
+          <a href="https://github.com/youzan/zanui-weapp" class="page-header__link">ZanUi-WeApp - 微信小程序</a>
         </li>
       </ul>
     </div>
diff --git a/docs/src/components/side-nav.vue b/docs/src/components/side-nav.vue
index 567f9db32..98298acf4 100644
--- a/docs/src/components/side-nav.vue
+++ b/docs/src/components/side-nav.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="side-nav">
     <ul>
-      <li class="nav-item" v-for="item in data">
+      <li class="nav-item" v-for="(item, index) in data" :key="index">
         <a href="javascript:void(0)" v-if="!item.path" @click="handleTitleClick(item)">{{item.name}}</a>
         <router-link
           v-else
@@ -11,7 +11,7 @@
           v-text="item.title || item.name">
         </router-link>
         <ul class="pure-menu-list sub-nav" v-if="item.children">
-          <li class="nav-item" v-for="navItem in item.children">
+          <li class="nav-item" v-for="(navItem, index) in item.children" :key="index">
             <router-link
               active-class="active"
               :to="base + navItem.path"
@@ -20,11 +20,12 @@
           </li>
         </ul>
         <template v-if="item.groups">
-          <div class="nav-group" v-for="group in item.groups">
+          <div class="nav-group" v-for="(group, index) in item.groups" :key="index">
             <div class="nav-group__title">{{group.groupName}}</div>
             <ul class="pure-menu-list">
-              <template v-for="navItem in group.list">
+              <template v-for="(navItem, index) in group.list">
                 <li
+                  :key="index"
                   class="nav-item"
                   v-if="!navItem.disabled">
                   <router-link
diff --git a/docs/src/examples.js b/docs/src/examples.js
index 716e7c8b2..3018f60f2 100644
--- a/docs/src/examples.js
+++ b/docs/src/examples.js
@@ -25,8 +25,12 @@ const router = new VueRouter({
   base: '/zanui/vue/examples',
   routes: routesConfig
 });
-router.afterEach((route, redirect, next) => {
-  document.querySelector('.examples-container').scrollTop = 0;
+router.beforeEach((to, from, next) => {
+  const container = document.querySelector('.examples-container');
+  if (container) {
+    document.querySelector('.examples-container').scrollTop = 0;
+  }
+  next()
 });
 
 new Vue({ // eslint-disable-line
diff --git a/docs/src/nav.config.js b/docs/src/nav.config.js
index b64adcc35..6f155b732 100644
--- a/docs/src/nav.config.js
+++ b/docs/src/nav.config.js
@@ -37,6 +37,10 @@ module.exports = {
               "path": "/cell",
               "title": "Cell 单元格"
             },
+            {
+              "path": "/cell-swipe",
+              "title": "Cell Swipe 滑动单元格"
+            },
             {
               "path": "/progress",
               "title": "Progress 进度条"
diff --git a/package.json b/package.json
index 99bdadd2c..3b2f48954 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "0.5.11",
+  "version": "0.6.2",
   "description": "有赞vue wap组件库",
   "main": "lib/vant.js",
   "style": "lib/vant-css/index.css",
@@ -46,11 +46,11 @@
     "vue-lazyload": "^1.0.3"
   },
   "peerDependencies": {
-    "vue": "2.1.8"
+    "vue": "2.3.4"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.5",
-    "avoriaz": "^1.11.1",
+    "avoriaz": "^2.0.0",
     "babel-cli": "^6.14.0",
     "babel-core": "^6.17.0",
     "babel-eslint": "^6.1.2",
@@ -78,6 +78,7 @@
     "felint": "^0.5.0-alpha.3",
     "file-loader": "^0.9.0",
     "file-save": "^0.2.0",
+    "friendly-errors-webpack-plugin": "^1.6.1",
     "gh-pages": "^0.12.0",
     "gulp": "^3.9.1",
     "gulp-util": "^3.0.8",
@@ -120,14 +121,14 @@
     "transliteration": "^1.1.11",
     "uppercamelcase": "^1.1.0",
     "url-loader": "^0.5.7",
-    "vue": "2.1.8",
-    "vue-hot-reload-api": "^1.3.3",
-    "vue-html-loader": "^1.2.3",
-    "vue-loader": "^10.3.0",
-    "vue-markdown-loader": "^0.6.1",
-    "vue-router": "^2.0.0",
-    "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "2.1.8",
+    "vue": "2.3.4",
+    "vue-hot-reload-api": "^2.1.0",
+    "vue-html-loader": "^1.2.4",
+    "vue-loader": "^12.0.0",
+    "vue-markdown-loader": "^1.0.0",
+    "vue-router": "^2.5.0",
+    "vue-style-loader": "^3.0.0",
+    "vue-template-compiler": "2.3.4",
     "vue-template-es2015-compiler": "^1.4.2",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^1.16.3",
diff --git a/packages/actionsheet/src/actionsheet.vue b/packages/actionsheet/src/actionsheet.vue
index 149de5b1d..1c9117bf2 100644
--- a/packages/actionsheet/src/actionsheet.vue
+++ b/packages/actionsheet/src/actionsheet.vue
@@ -8,7 +8,8 @@
       <template v-if="!title">
         <ul class="van-actionsheet__list">
           <li
-            v-for="item in actions"
+            v-for="(item, index) in actions"
+            :key="index"
             class="van-actionsheet__item"
             :class="[item.className, item.loading ? 'van-actionsheet__item--loading' : '']"
             @click.stop="handleItemClick(item)">
diff --git a/packages/badge/src/badge.vue b/packages/badge/src/badge.vue
index 65cb72905..6103c1440 100644
--- a/packages/badge/src/badge.vue
+++ b/packages/badge/src/badge.vue
@@ -1,7 +1,9 @@
 <template>
-    <a class="van-badge" :href="url" @click="handleClick" :class="{
-      'van-badge--select': isSelect
-    }">
+    <a
+      class="van-badge"
+      :class="{ 'van-badge--select': isSelect }"
+      :href="url"
+      @click="handleClick">
       <div class="van-badge__active"></div>
       <div v-if="info" class="van-badge__info">{{info}}</div>
       {{title}}
diff --git a/packages/cell-swipe/components/CellSwipe.vue b/packages/cell-swipe/components/CellSwipe.vue
new file mode 100644
index 000000000..777402261
--- /dev/null
+++ b/packages/cell-swipe/components/CellSwipe.vue
@@ -0,0 +1,142 @@
+<template>
+  <div
+    v-clickoutside:touchstart="swipeMove"
+    @click="swipeMove()"
+    @touchstart="startDrag"
+    @touchmove="onDrag"
+    @touchend="endDrag"
+    class="van-cell-swipe"
+    ref="cell">
+    <div class="van-cell-wrapper">
+      <slot>单元格内容</slot>
+    </div>
+    <div class="van-cell-left">
+      <div ref="left">
+        <slot name="left"></slot>
+      </div>
+    </div>
+    <div class="van-cell-right">
+      <div ref="right">
+        <slot name="right"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {once} from 'src/utils/dom';
+  import Clickoutside from 'src/utils/clickoutside';
+  
+  export default {
+    name: 'van-cell-swipe',
+    props: {
+      'leftWidth': {type: Number, default: 0},
+      'rightWidth': {type: Number, default: 0}
+    },
+    directives: {Clickoutside},
+    data() {
+      return {
+        start: {x: 0, y: 0}
+      };
+    },
+    computed: {
+      leftDefaultTransform(){
+        return this.translate3d(-this.leftWidth - 1);
+      },
+      rightDefaultTransform(){
+        return this.translate3d(this.rightWidth);
+      }
+    },
+    mounted() {
+      this.wrap = this.$refs.cell.querySelector('.van-cell-wrapper');
+      this.leftElm = this.$refs.left;
+      this.leftWrapElm = this.leftElm.parentNode;
+      this.leftDefaultTransform = this.translate3d(-this.leftWidth - 1);
+      this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
+
+      this.rightElm = this.$refs.right;
+      this.rightWrapElm = this.rightElm.parentNode;
+      this.rightDefaultTransform = this.translate3d(this.rightWidth);
+      this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
+    },
+    methods: {
+      resetSwipeStatus() {
+        this.swiping = false; // 是否正在拖动
+        this.opened = true; // 记录是否滑动左右 或者 注册
+        this.offsetLeft = 0; // 记录单次拖动的拖动距离
+      },
+      translate3d(offset) {
+        return `translate3d(${offset}px, 0, 0)`;
+      },
+      swipeMove(offset = 0) {
+        this.wrap.style.webkitTransform = this.translate3d(offset);
+        this.rightWrapElm.style.webkitTransform = this.translate3d(this.rightWidth + offset);
+        this.leftWrapElm.style.webkitTransform = this.translate3d(-this.leftWidth + offset);
+        offset && (this.swiping = true);
+      },
+      swipeLeaveTransition(direction) {
+        setTimeout(() => {
+          this.swipeLeave = true;
+          // left
+          if (direction > 0 && -this.offsetLeft > this.rightWidth * 0.4 && this.rightWidth > 0) {
+            this.swipeMove(-this.rightWidth);
+            this.resetSwipeStatus();
+            return;
+            // right
+          } else if (direction < 0 && this.offsetLeft > this.leftWidth * 0.4 && this.leftWidth > 0) {
+            this.swipeMove(this.leftWidth);
+            this.resetSwipeStatus();
+            return;
+          } else {
+            this.swipeMove(0);
+            once(this.wrap, 'webkitTransitionEnd', _ => {
+              this.wrap.style.webkitTransform = '';
+              this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
+              this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
+              this.swipeLeave = false;
+              this.swiping = false;
+            });
+          }
+        }, 0);
+      },
+      startDrag(evt) {
+        console.log('startDrag')
+        evt = evt.changedTouches ? evt.changedTouches[0] : evt;
+        this.dragging = true;
+        this.start.x = evt.pageX;
+        this.start.y = evt.pageY;
+      },
+      onDrag(evt) {
+        console.log('onDrag')
+        if (this.opened) {
+          !this.swiping && this.swipeMove(0);
+          this.opened = false;
+          return;
+        }
+        if (!this.dragging) return;
+        let swiping;
+        const e = evt.changedTouches ? evt.changedTouches[0] : evt;
+        const offsetTop = e.pageY - this.start.y;
+        const offsetLeft = this.offsetLeft = e.pageX - this.start.x;
+        if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
+          (offsetLeft > 0 && offsetLeft > this.leftWidth) ||
+          (offsetLeft > 0 && !this.leftWidth) ||
+          (offsetLeft < 0 && !this.rightWidth)) {
+          return;
+        }
+        const y = Math.abs(offsetTop);
+        const x = Math.abs(offsetLeft);
+        swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
+        if (!swiping) return;
+        evt.preventDefault();
+        this.swipeMove(offsetLeft);
+      },
+      endDrag() {
+        console.log('endDrag')
+        if (!this.swiping) return;
+        this.swipeLeaveTransition(this.offsetLeft > 0 ? -1 : 1);
+      }
+    }
+  };
+</script>
+
diff --git a/packages/cell-swipe/index.js b/packages/cell-swipe/index.js
new file mode 100644
index 000000000..bb9559c21
--- /dev/null
+++ b/packages/cell-swipe/index.js
@@ -0,0 +1,2 @@
+import CellSwipe from './components/CellSwipe.vue'
+export default CellSwipe;
diff --git a/packages/datetime-picker/src/datetime-picker.vue b/packages/datetime-picker/src/datetime-picker.vue
index ad7ad57b4..35153a3b1 100644
--- a/packages/datetime-picker/src/datetime-picker.vue
+++ b/packages/datetime-picker/src/datetime-picker.vue
@@ -18,7 +18,7 @@ export default {
   name: 'van-datetime-picker',
 
   components: {
-    Picker
+    'van-picker': Picker
   },
 
   props: {
diff --git a/packages/dialog/src/dialog.vue b/packages/dialog/src/dialog.vue
index 235a1c054..47849b3eb 100644
--- a/packages/dialog/src/dialog.vue
+++ b/packages/dialog/src/dialog.vue
@@ -21,7 +21,7 @@
 import Popup from 'src/mixins/popup';
 
 const CANCEL_TEXT = '取消';
-const CONFIRM_TEXT = '确认';
+const CONFIRM_TEXT = '确定';
 
 export default {
   name: 'van-dialog',
diff --git a/packages/field/src/field.vue b/packages/field/src/field.vue
index ffb76e74b..cbc38a10b 100644
--- a/packages/field/src/field.vue
+++ b/packages/field/src/field.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'datetime', 'password', 'textarea'];
+const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
 import vanCell from 'packages/cell';
 
 export default {
diff --git a/packages/image-preview/src/image-preview.js b/packages/image-preview/src/image-preview.js
index a2a60141f..550258380 100644
--- a/packages/image-preview/src/image-preview.js
+++ b/packages/image-preview/src/image-preview.js
@@ -6,12 +6,14 @@ let instance;
 const ImagePreviewConstructor = Vue.extend(ImagePreview);
 
 const initInstance = () => {
+  if (Vue.prototype.$isServer) return;
   instance = new ImagePreviewConstructor({
     el: document.createElement('div')
   });
 };
 
 var ImagePreviewBox = images => {
+  if (Vue.prototype.$isServer) return;
   if (!instance) {
     initInstance();
   }
diff --git a/packages/image-preview/src/image-preview.vue b/packages/image-preview/src/image-preview.vue
index 22c2793ca..0616ee2cb 100644
--- a/packages/image-preview/src/image-preview.vue
+++ b/packages/image-preview/src/image-preview.vue
@@ -2,7 +2,7 @@
   <transition name="image-fade">
     <div class="van-image-preview" ref="previewContainer" v-show="value">
       <van-swipe>
-        <van-swipe-item v-for="item in images">
+        <van-swipe-item v-for="(item, index) in images" :key="index">
           <img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
         </van-swipe-item>
       </van-swipe>
diff --git a/packages/picker/src/picker-column.vue b/packages/picker/src/picker-column.vue
index fc005e909..01c831061 100644
--- a/packages/picker/src/picker-column.vue
+++ b/packages/picker/src/picker-column.vue
@@ -2,7 +2,8 @@
   <div class="van-picker-column" :class="classNames">
     <div class="van-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
       <div
-        v-for="item in currentValues"
+        v-for="(item, index) in currentValues"
+        :key="index"
         class="van-picker-column__item"
         :class="{ 'van-picker-column__item--selected': item === currentValue }"
         :style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
diff --git a/packages/picker/src/picker.vue b/packages/picker/src/picker.vue
index 2a6a90b99..cf2851cda 100644
--- a/packages/picker/src/picker.vue
+++ b/packages/picker/src/picker.vue
@@ -10,6 +10,7 @@
     <div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">
       <picker-column
         v-for="(item, index) in columns"
+        :key="index"
         v-model="values[index]"
         :values="item.values"
         :class-name="item.className"
diff --git a/packages/search/src/search.vue b/packages/search/src/search.vue
index 398a89ff4..1fa344e14 100644
--- a/packages/search/src/search.vue
+++ b/packages/search/src/search.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="van-search" :class="{ 'van-search--focus' : isFocus }">
+  <div
+    class="van-search"
+    v-clickoutside="handleClickoutside"
+    :class="{ 'van-search--focus': isFocus, 'van-search--showcase': type === 'showcase' }">
     <div class="van-search__input-wrap">
       <van-icon name="search"></van-icon>
       <input
@@ -12,12 +15,13 @@
         @keyup.enter="handleSearch">
       <van-icon name="clear" @click="handleClean" v-show="isFocus"></van-icon>
     </div>
-    <div class="van-search__cancel" v-show="isFocus" @click="handleBack">取消</div>
+    <div class="van-search__cancel" v-show="type !== 'showcase' && isFocus" @click="handleBack">取消</div>
   </div>
 </template>
 
 <script>
   import VanIcon from 'packages/icon';
+  import Clickoutside from 'src/utils/clickoutside';
 
   export default {
     name: 'van-search',
@@ -27,7 +31,11 @@
     },
 
     props: {
-      placeholder: String
+      placeholder: String,
+      type: {
+        type: String,
+        default: 'normal'
+      }
     },
 
     watch: {
@@ -45,6 +53,7 @@
     },
 
     directives: {
+      Clickoutside,
       refocus: {
         update: function(el, state) {
           if (state.value) {
@@ -85,6 +94,11 @@
        */
       handleSearch() {
         this.$emit('search', this.value);
+      },
+
+      handleClickoutside() {
+        this.isFocus = false;
+        this.focusStatus = false;
       }
     }
   };
diff --git a/packages/swipe/src/input.js b/packages/swipe/src/input.js
index 5fac0da18..5e2fe9658 100755
--- a/packages/swipe/src/input.js
+++ b/packages/swipe/src/input.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import { EventEmitter, extend, bindEvents, removeEvents } from './utils';
 
 function Input(host, options) {
@@ -24,6 +25,7 @@ Input.prototype = Object.create(new EventEmitter());
 
 extend(Input.prototype, {
   bind: function(host) {
+    if (Vue.prototype.$isServer) return;
     bindEvents(host, 'touchstart mousedown', this.onTouchStart);
     if (this.options.listenMoving) {
       bindEvents(window, 'touchmove mousemove', this.onTouchMove);
@@ -104,6 +106,7 @@ extend(Input.prototype, {
   },
 
   destroy: function() {
+    if (Vue.prototype.$isServer) return;
     removeEvents(this.host, 'touchstart mousedown', this.onTouchStart);
     if (this.options.listenMoving) {
       removeEvents(window, 'touchmove mousemove', this.onTouchMove);
diff --git a/packages/swipe/src/swipe.vue b/packages/swipe/src/swipe.vue
index e206d8827..f1b9862be 100644
--- a/packages/swipe/src/swipe.vue
+++ b/packages/swipe/src/swipe.vue
@@ -4,8 +4,8 @@
       <slot></slot>
     </div>
     <div class="van-swipe__indicators" v-if="showIndicators">
-      <span class="van-swipe__indicator" v-for="i in swipes.length" :class="{
-        'van-swipe__indicator--active': currIndex === i -1
+      <span class="van-swipe__indicator" v-for="(item, index) in swipes.length" :key="index" :class="{
+        'van-swipe__indicator--active': currIndex === index
       }">
       </span>
     </div>
diff --git a/packages/swipe/src/utils.js b/packages/swipe/src/utils.js
index 7ff020a59..255bae7b5 100755
--- a/packages/swipe/src/utils.js
+++ b/packages/swipe/src/utils.js
@@ -1,4 +1,4 @@
-'use strict';
+import Vue from 'vue';
 
 var extend = Object.assign.bind(Object);
 
@@ -37,17 +37,24 @@ EventEmitter.prototype = {
   }
 };
 
-const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
-              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
-              function(callback, element) {
-                return window.setTimeout(callback, 1000 / 60);
-              };
+const isSupportRequestAnimationFrame = !Vue.prototype.$isServer &&
+  (window.requestAnimationFrame ||
+  window.mozRequestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.msRequestAnimationFrame);
+const isSupportCancelAnimationFrame = !Vue.prototype.$isServer &&
+  (window.cancelAnimationFrame ||
+  window.mozCancelAnimationFrame ||
+  window.webkitCancelAnimationFrame ||
+  window.msCancelAnimationFrame);
 
-const cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame ||
-              window.webkitCancelAnimationFrame || window.msRequestAnimationFrame ||
-              function(id) {
-                clearTimeout(id);
-              };
+const requestAnimationFrame = isSupportRequestAnimationFrame || function(callback, element) {
+  return window.setTimeout(callback, 1000 / 60);
+};
+
+const cancelAnimationFrame = isSupportCancelAnimationFrame || function(id) {
+  clearTimeout(id);
+};
 
 const bindEvents = (elem, eventNames, fn) => {
   eventNames = eventNames.split(/\s+/);
diff --git a/packages/tab/src/tabs.vue b/packages/tab/src/tabs.vue
index 0959761ca..abb91a582 100644
--- a/packages/tab/src/tabs.vue
+++ b/packages/tab/src/tabs.vue
@@ -7,6 +7,7 @@
       <div class="van-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
       <div
         v-for="(tab, index) in tabs"
+        :key="index"
         class="van-tab"
         :class="{'van-tab--active': index === curActive}"
         ref="tabkey"
diff --git a/packages/vant-css/assets/icons.sketch b/packages/vant-css/assets/icons.sketch
index 95917ce6b..3a15fd865 100644
Binary files a/packages/vant-css/assets/icons.sketch and b/packages/vant-css/assets/icons.sketch differ
diff --git a/packages/vant-css/package.json b/packages/vant-css/package.json
index 91c2f2a41..832ee920c 100644
--- a/packages/vant-css/package.json
+++ b/packages/vant-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vant-css",
-  "version": "0.5.11",
+  "version": "0.6.2",
   "description": "vant css.",
   "main": "lib/index.css",
   "style": "lib/index.css",
diff --git a/packages/vant-css/scripts/fount-config.js b/packages/vant-css/scripts/fount-config.js
index 43b039770..7ae428b47 100644
--- a/packages/vant-css/scripts/fount-config.js
+++ b/packages/vant-css/scripts/fount-config.js
@@ -181,6 +181,168 @@ module.exports = {
       keywords: ['wap', 'home'],
       src: 'wap首页.svg',
       css: 'wap-home'
+    },
+    {
+      keywords: ['ecard', 'pay'],
+      src: '有赞E卡.svg',
+      css: 'ecard-pay',
+      'correct_contour_direction': true
+    },
+    {
+      keywords: ['balance', 'pay'],
+      src: '余额支付.svg',
+      css: 'balance-pay'
+    },
+    {
+      keywords: ['peer', 'pay'],
+      src: '找人代付.svg',
+      css: 'peer-pay'
+    },
+    {
+      keywords: ['credit', 'pay'],
+      src: '信用卡支付.svg',
+      css: 'credit-pay'
+    },
+    {
+      keywords: ['debit', 'pay'],
+      src: '借记卡支付.svg',
+      css: 'debit-pay'
+    },
+    {
+      keywords: ['other', 'pay'],
+      src: '其他支付方式.svg',
+      css: 'other-pay'
+    },
+    {
+      keywords: ['cart'],
+      src: '购物车.svg',
+      css: 'cart'
+    },
+    {
+      keywords: ['browsing', 'history'],
+      src: '浏览记录.svg',
+      css: 'browsing-history'
+    },
+    {
+      keywords: ['goods', 'collect'],
+      src: '商品收藏.svg',
+      css: 'goods-collect'
+    },
+    {
+      keywords: ['shop', 'collect'],
+      src: '店铺收藏.svg',
+      css: 'shop-collect'
+    },
+    {
+      keywords: ['receive', 'gift'],
+      src: '收礼物.svg',
+      css: 'receive-gift',
+      'correct_contour_direction': true
+    },
+    {
+      keywords: ['send', 'gift'],
+      src: '送出赠品.svg',
+      css: 'send-gift'
+    },
+    {
+      keywords: ['setting'],
+      src: '设置.svg',
+      css: 'setting'
+    },
+    {
+      keywords: ['points'],
+      src: '积分.svg',
+      css: 'points'
+    },
+    {
+      keywords: ['coupon'],
+      src: '优惠券.svg',
+      css: 'coupon'
+    },
+    {
+      keywords: ['free', 'postage'],
+      src: '包邮.svg',
+      css: 'free-postage'
+    },
+    {
+      keywords: ['discount'],
+      src: '折扣.svg',
+      css: 'discount'
+    },
+    {
+      keywords: ['birthday', 'privilege'],
+      src: '生日特权.svg',
+      css: 'birthday-privilege'
+    },
+    {
+      keywords: ['member', 'day', 'privilege'],
+      src: '会员日特权.svg',
+      css: 'member-day-privilege'
+    },
+    {
+      keywords: ['balance', 'details'],
+      src: '余额明细.svg',
+      css: 'balance-details'
+    },
+    {
+      keywords: ['cash', 'back', 'record'],
+      src: '返现记录.svg',
+      css: 'cash-back-record'
+    },
+    {
+      keywords: ['points', 'mall'],
+      src: '积分商城.svg',
+      css: 'points-mall'
+    },
+    {
+      keywords: ['exchange', 'record'],
+      src: '兑换记录.svg',
+      css: 'exchange-record'
+    },
+    {
+      keywords: ['pending', 'payment'],
+      src: '待付款.svg',
+      css: 'pending-payment'
+    },
+    {
+      keywords: ['pending', 'orders'],
+      src: '待接单.svg',
+      css: 'pending-orders'
+    },
+    {
+      keywords: ['pending', 'deliver'],
+      src: '待发货.svg',
+      css: 'pending-deliver'
+    },
+    {
+      keywords: ['pending', 'evaluate'],
+      src: '待评价.svg',
+      css: 'pending-evaluate'
+    },
+    {
+      keywords: ['gift', 'card', 'pay'],
+      src: '礼品卡支付.svg',
+      css: 'gift-card-pay'
+    },
+    {
+      keywords: ['cash', 'on', 'deliver'],
+      src: '货到付款.svg',
+      css: 'cash-on-deliver'
+    },
+    {
+      keywords: ['underway'],
+      src: '进行中.svg',
+      css: 'underway'
+    },
+    {
+      keywords: ['point', 'gift'],
+      src: '积分礼包.svg',
+      css: 'point-gift'
+    },
+    {
+      keywords: ['after', 'sale'],
+      src: '售后记录.svg',
+      css: 'after-sale'
     }
   ]
 };
diff --git a/packages/vant-css/src/cell-swipe.css b/packages/vant-css/src/cell-swipe.css
new file mode 100644
index 000000000..637e93854
--- /dev/null
+++ b/packages/vant-css/src/cell-swipe.css
@@ -0,0 +1,27 @@
+
+.van-cell-swipe .van-cell-wrapper, .van-cell-swipe .van-cell-left, .van-cell-swipe .van-cell-right {
+    -webkit-transition: -webkit-transform 150ms ease-in-out;
+    transition: -webkit-transform 150ms ease-in-out;
+    transition: transform 150ms ease-in-out;
+    transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
+}
+
+.van-cell-swipe{
+    position: relative;
+    min-height: 48px;
+    overflow: hidden;
+}
+.van-cell-right{
+    position: absolute;
+    height: 100%;
+    right: 0;
+    top: 0;
+    transform: translate3d(100%,0,0);
+}
+.van-cell-left {
+    position: absolute;
+    height: 100%;
+    left: 0;
+    top: 0;
+    transform: translate3d(-100%,0,0);
+}
\ No newline at end of file
diff --git a/packages/vant-css/src/icon.css b/packages/vant-css/src/icon.css
index d785f143a..8b11c608f 100644
--- a/packages/vant-css/src/icon.css
+++ b/packages/vant-css/src/icon.css
@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: 'vant-icon';
-  src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-3f0c3903d3.eot');
-  src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-3f0c3903d3.eot?#iefix') format('embedded-opentype'),
-       url('https://b.yzcdn.cn/zanui/icon/vant-icon-3f0c3903d3.woff2') format('woff2'),
-       url('https://b.yzcdn.cn/zanui/icon/vant-icon-3f0c3903d3.woff') format('woff'),
-       url('https://b.yzcdn.cn/zanui/icon/vant-icon-3f0c3903d3.ttf') format('truetype')
+  src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-ab58022933.eot');
+  src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-ab58022933.eot?#iefix') format('embedded-opentype'),
+       url('https://b.yzcdn.cn/zanui/icon/vant-icon-ab58022933.woff2') format('woff2'),
+       url('https://b.yzcdn.cn/zanui/icon/vant-icon-ab58022933.woff') format('woff'),
+       url('https://b.yzcdn.cn/zanui/icon/vant-icon-ab58022933.ttf') format('truetype')
 }
 
 .van-icon {
@@ -79,4 +79,36 @@
 .van-icon-password-view:before { content: '\e81d'; } /* '' */
 .van-icon-password-not-view:before { content: '\e81e'; } /* '' */
 .van-icon-wap-nav:before { content: '\e81f'; } /* '' */
-.van-icon-wap-home:before { content: '\e820'; } /* '' */
\ No newline at end of file
+.van-icon-wap-home:before { content: '\e820'; } /* '' */
+.van-icon-ecard-pay:before { content: '\e821'; } /* '' */
+.van-icon-balance-pay:before { content: '\e822'; } /* '' */
+.van-icon-peer-pay:before { content: '\e823'; } /* '' */
+.van-icon-credit-pay:before { content: '\e824'; } /* '' */
+.van-icon-debit-pay:before { content: '\e825'; } /* '' */
+.van-icon-other-pay:before { content: '\e826'; } /* '' */
+.van-icon-cart:before { content: '\e827'; } /* '' */
+.van-icon-browsing-history:before { content: '\e828'; } /* '' */
+.van-icon-goods-collect:before { content: '\e829'; } /* '' */
+.van-icon-shop-collect:before { content: '\e82a'; } /* '' */
+.van-icon-receive-gift:before { content: '\e82b'; } /* '' */
+.van-icon-send-gift:before { content: '\e82c'; } /* '' */
+.van-icon-setting:before { content: '\e82d'; } /* '' */
+.van-icon-points:before { content: '\e82e'; } /* '' */
+.van-icon-coupon:before { content: '\e82f'; } /* '' */
+.van-icon-free-postage:before { content: '\e830'; } /* '' */
+.van-icon-discount:before { content: '\e831'; } /* '' */
+.van-icon-birthday-privilege:before { content: '\e832'; } /* '' */
+.van-icon-member-day-privilege:before { content: '\e833'; } /* '' */
+.van-icon-balance-details:before { content: '\e834'; } /* '' */
+.van-icon-cash-back-record:before { content: '\e835'; } /* '' */
+.van-icon-points-mall:before { content: '\e836'; } /* '' */
+.van-icon-exchange-record:before { content: '\e837'; } /* '' */
+.van-icon-pending-payment:before { content: '\e838'; } /* '' */
+.van-icon-pending-orders:before { content: '\e839'; } /* '' */
+.van-icon-pending-deliver:before { content: '\e83a'; } /* '' */
+.van-icon-pending-evaluate:before { content: '\e83b'; } /* '' */
+.van-icon-gift-card-pay:before { content: '\e83c'; } /* '' */
+.van-icon-cash-on-deliver:before { content: '\e83d'; } /* '' */
+.van-icon-underway:before { content: '\e83e'; } /* '' */
+.van-icon-point-gift:before { content: '\e83f'; } /* '' */
+.van-icon-after-sale:before { content: '\e840'; } /* '' */
\ No newline at end of file
diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css
index 85785cd78..d83ee1789 100644
--- a/packages/vant-css/src/index.css
+++ b/packages/vant-css/src/index.css
@@ -4,6 +4,7 @@
 @import './reset.css';
 @import './button.css';
 @import './cell.css';
+@import './cell-swipe.css';
 @import './card.css';
 @import './dialog.css';
 @import './field.css';
diff --git a/packages/vant-css/src/search.css b/packages/vant-css/src/search.css
index 2d3a8ed1b..c8796ce52 100644
--- a/packages/vant-css/src/search.css
+++ b/packages/vant-css/src/search.css
@@ -12,6 +12,15 @@
       padding-right: 50px;
     }
 
+    @m showcase {
+      padding: 10px;
+      background-color: #f8f8f8;
+
+      .van-search__input-wrap {
+        border-color: $c-gray-light;
+      }
+    }
+
     @e input-wrap {
       position: relative;
       padding: 8px 24px 8px 35px;
diff --git a/packages/vant-css/src/toast.css b/packages/vant-css/src/toast.css
index 95e00469e..88de4527f 100644
--- a/packages/vant-css/src/toast.css
+++ b/packages/vant-css/src/toast.css
@@ -46,6 +46,7 @@
       .van-toast__text {
         padding: 15px 0 20px;
         font-size: 14px;
+        line-height: 1.2;
       }
     }
   }
diff --git a/src/index.js b/src/index.js
index 7146342dd..8f9fa42b5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,7 @@ import Radio from '../packages/radio/index.js';
 import Cell from '../packages/cell/index.js';
 import Icon from '../packages/icon/index.js';
 import CellGroup from '../packages/cell-group/index.js';
+import CellSwipe from '../packages/cell-swipe/index.js';
 import Popup from '../packages/popup/index.js';
 import Dialog from '../packages/dialog/index.js';
 import Picker from '../packages/picker/index.js';
@@ -47,6 +48,7 @@ const install = function(Vue) {
   Vue.component(Cell.name, Cell);
   Vue.component(Icon.name, Icon);
   Vue.component(CellGroup.name, CellGroup);
+  Vue.component(CellSwipe.name, CellSwipe);
   Vue.component(Popup.name, Popup);
   Vue.component(Picker.name, Picker);
   Vue.component(RadioGroup.name, RadioGroup);
@@ -81,7 +83,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 module.exports = {
   install,
-  version: '0.5.11',
+  version: '0.6.2',
   Button,
   Switch,
   Field,
@@ -89,6 +91,7 @@ module.exports = {
   Cell,
   Icon,
   CellGroup,
+  CellSwipe,
   Popup,
   Dialog,
   Picker,
diff --git a/src/mixins/popup/index.js b/src/mixins/popup/index.js
index 388528bab..405b968a9 100644
--- a/src/mixins/popup/index.js
+++ b/src/mixins/popup/index.js
@@ -67,6 +67,7 @@ export default {
      * 显示popup
      */
     open() {
+      if (this.$isServer) return;
       if (this.opened) return;
 
       this.opening = true;
diff --git a/src/mixins/popup/popup-context.js b/src/mixins/popup/popup-context.js
index 66dae4ea2..25a340edc 100644
--- a/src/mixins/popup/popup-context.js
+++ b/src/mixins/popup/popup-context.js
@@ -1,8 +1,11 @@
 import merge from 'src/utils/merge';
+import Vue from 'vue';
 
 let context;
-if (window && window.popupContext) {
-  context = window.popupContext;
+const _global = Vue.prototype.$isServer ? global : window;
+
+if (_global && _global.popupContext) {
+  context = _global.popupContext;
 }
 
 const DEFAULT_CONTEXT = {
@@ -13,7 +16,7 @@ const DEFAULT_CONTEXT = {
   modalStack: []
 };
 
-context = window.popupContext = merge({}, DEFAULT_CONTEXT, context);
+context = _global.popupContext = merge({}, DEFAULT_CONTEXT, context);
 
 const PopupContext = {
   getContext(key) {
diff --git a/src/mixins/popup/popup-manager.js b/src/mixins/popup/popup-manager.js
index b28a36db0..3dc49114f 100644
--- a/src/mixins/popup/popup-manager.js
+++ b/src/mixins/popup/popup-manager.js
@@ -1,7 +1,9 @@
+import Vue from 'vue';
 import { addClass } from 'src/utils/dom';
 import PopupContext from './popup-context';
 
 const getModal = function() {
+  if (Vue.prototype.$isServer) return;
   let modalDom = PopupContext.getContext('modalDom');
 
   if (modalDom) {
diff --git a/src/utils/clickoutside.js b/src/utils/clickoutside.js
new file mode 100644
index 000000000..db5e6a871
--- /dev/null
+++ b/src/utils/clickoutside.js
@@ -0,0 +1,42 @@
+/**
+ * v-clickoutside
+ * @desc 点击元素外面才会触发的事件
+ * @example
+ * ```vue
+ * <div v-clickoutside="handleClose">
+ * ```
+ */
+const clickoutsideContext = '@@clickoutsideContext';
+
+export default {
+  bind(el, binding, vnode) {
+    const documentHandler = function(e) {
+      if (vnode.context && !el.contains(e.target)) {
+        vnode.context[el[clickoutsideContext].methodName]();
+      }
+    };
+    el[clickoutsideContext] = {
+      documentHandler,
+      methodName: binding.expression,
+      arg: binding.arg || 'click'
+    };
+    document.addEventListener(el[clickoutsideContext].arg, documentHandler);
+  },
+
+  update(el, binding) {
+    el[clickoutsideContext].methodName = binding.expression;
+  },
+
+  unbind(el) {
+    document.removeEventListener(
+      el[clickoutsideContext].arg,
+      el[clickoutsideContext].documentHandler);
+  },
+
+  install(Vue) {
+    Vue.directive('clickoutside', {
+      bind: this.bind,
+      unbind: this.unbind
+    });
+  }
+};
diff --git a/src/utils/dom.js b/src/utils/dom.js
index ede0951ec..b5c2550a6 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -55,3 +55,44 @@ export function removeClass(el, cls) {
     el.className = trim(curClass);
   }
 };
+export const once = function(el, event, fn) {
+  var listener = function() {
+    if (fn) {
+      fn.apply(this, arguments);
+    }
+    off(el, event, listener);
+  };
+  on(el, event, listener);
+};
+
+export const on = (function() {
+  if (document.addEventListener) {
+    return function(element, event, handler) {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function(element, event, handler) {
+      if (element && event && handler) {
+        element.attachEvent('on' + event, handler);
+      }
+    };
+  }
+})();
+
+export const off = (function() {
+  if (document.removeEventListener) {
+    return function(element, event, handler) {
+      if (element && event) {
+        element.removeEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function(element, event, handler) {
+      if (element && event) {
+        element.detachEvent('on' + event, handler);
+      }
+    };
+  }
+})();
diff --git a/src/utils/scroll.js b/src/utils/scroll.js
index 5f113ad53..84c5475ab 100644
--- a/src/utils/scroll.js
+++ b/src/utils/scroll.js
@@ -1,3 +1,5 @@
+import Vue from 'vue';
+
 export default {
   debounce(func, wait, immediate) {
     var timeout, args, context, timestamp, result;
@@ -55,6 +57,11 @@ export default {
     return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
   },
 
+  // 设置滚动高度
+  setScrollTop(element, value) {
+    'scrollTop' in element ? element.scrollTop = value : element.scrollTo(element.scrollX, value);
+  },
+
   // 获取元素距离顶部高度
   getElementTop(element) {
     if (element === window) {
@@ -71,5 +78,5 @@ export default {
     return element.getBoundingClientRect().height;
   },
 
-  getComputedStyle: document.defaultView.getComputedStyle.bind(document.defaultView)
+  getComputedStyle: !Vue.prototype.$isServer && document.defaultView.getComputedStyle.bind(document.defaultView)
 };
diff --git a/test/unit/specs/actionsheet.spec.js b/test/unit/specs/actionsheet.spec.js
index bebd408f1..8db863831 100644
--- a/test/unit/specs/actionsheet.spec.js
+++ b/test/unit/specs/actionsheet.spec.js
@@ -84,11 +84,11 @@ describe('ActionSheet', () => {
     });
 
     const actionItem = wrapper.find('.van-actionsheet__item')[0];
-    actionItem.simulate('click');
+    actionItem.trigger('click');
     expect(called).to.be.true;
 
     const secondActionItem = wrapper.find('.van-actionsheet__item')[1];
-    secondActionItem.simulate('click');
+    secondActionItem.trigger('click');
   });
 
   it('create actionsheet with cancel button', () => {
diff --git a/test/unit/specs/badge.spec.js b/test/unit/specs/badge.spec.js
index f34f226d3..66128b479 100644
--- a/test/unit/specs/badge.spec.js
+++ b/test/unit/specs/badge.spec.js
@@ -21,7 +21,7 @@ describe('BadgeGroup', () => {
 
     const badge = wrapper.find('.van-badge')[0];
     const eventStub = sinon.stub(badge.vNode.child, '$emit');
-    badge.simulate('click');
+    badge.trigger('click');
 
     expect(eventStub.calledWith('click')).to.be.true;
   });
diff --git a/test/unit/specs/button.spec.js b/test/unit/specs/button.spec.js
index 882e45e73..a280f7471 100644
--- a/test/unit/specs/button.spec.js
+++ b/test/unit/specs/button.spec.js
@@ -17,7 +17,7 @@ describe('Button', () => {
     expect(wrapper.hasClass('van-button--normal')).to.be.true;
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
-    wrapper.simulate('click');
+    wrapper.trigger('click');
 
     expect(eventStub.calledOnce).to.be.true;
     expect(eventStub.calledWith('click')).to.be.true;
@@ -111,7 +111,7 @@ describe('Button', () => {
     expect(wrapper.hasClass('van-button--disabled')).to.be.true;
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
-    wrapper.simulate('click');
+    wrapper.trigger('click');
 
     expect(eventStub.called).to.be.false;
   });
@@ -128,7 +128,7 @@ describe('Button', () => {
     expect(loading.isVueComponent).to.be.true;
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
-    wrapper.simulate('click');
+    wrapper.trigger('click');
 
     expect(eventStub.called).to.be.false;
   });
diff --git a/test/unit/specs/cell-swipe.spec.js b/test/unit/specs/cell-swipe.spec.js
new file mode 100644
index 000000000..46325f291
--- /dev/null
+++ b/test/unit/specs/cell-swipe.spec.js
@@ -0,0 +1,141 @@
+import CellSwipe from 'packages/cell-swipe';
+import { mount } from 'avoriaz';
+
+describe('CellSwipe', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a CellSwipe', () => {
+    wrapper = mount(CellSwipe, {
+      propsData: {
+        leftWidth: 2,
+        rightWidth: 2
+      }
+    });
+    wrapper.vm.startDrag({
+      pageX: 0,
+      pageY: 0
+    });
+    wrapper.vm.onDrag({
+      preventDefault() {},
+      pageY: 0,
+      pageX: 50
+    });
+    wrapper.vm.offsetLeft = -20;
+    wrapper.vm.rightWidth = 10;
+    wrapper.vm.swipeLeaveTransition(1);
+    wrapper.vm.endDrag();
+    expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
+  });
+});
+
+
+describe('CellSwipe-left', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a CellSwipe left', () => {
+    wrapper = mount(CellSwipe, {
+      propsData: {
+        leftWidth: 2,
+        rightWidth: 2
+      }
+    });
+    wrapper.vm.startDrag({
+      changedTouches: [{
+        pageX: 0,
+        pageY: 0
+      }
+      ]
+    });
+    wrapper.vm.onDrag({
+      preventDefault() {},
+      changedTouches: [{
+        pageX: 0,
+        pageY: -50
+      }
+      ]
+    });
+    wrapper.vm.offsetLeft = 20;
+    wrapper.vm.rightWidth = 10;
+    wrapper.vm.swipeLeaveTransition(-1);
+    wrapper.vm.endDrag();
+    expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
+  });
+});
+
+describe('CellSwipe-0', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a CellSwipe 0', () => {
+    wrapper = mount(CellSwipe, {
+      propsData: {
+        leftWidth: 0,
+        rightWidth: 2
+      }
+    });
+    wrapper.vm.startDrag({
+      pageX: 0,
+      pageY: 0
+    });
+    wrapper.vm.onDrag({
+      preventDefault() {},
+      pageY: 0,
+      pageX: -2
+    });
+    wrapper.vm.opened = true;
+    wrapper.vm.onDrag({
+      preventDefault() {},
+      pageY: 0,
+      pageX: -2
+    });
+    wrapper.vm.opened = false;
+    wrapper.vm.onDrag({
+      preventDefault() {},
+      pageY: 0,
+      pageX: 40
+    });
+    wrapper.vm.swipeLeaveTransition(0);
+    wrapper.vm.endDrag();
+    expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
+  });
+});
+
+
+describe('CellSwipe-0', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a CellSwipe 0', () => {
+    wrapper = mount(CellSwipe, {
+      propsData: {
+        leftWidth: 0,
+        rightWidth: 2
+      }
+    });
+    wrapper.vm.startDrag({
+      pageX: 0,
+      pageY: 0
+    });
+    wrapper.vm.onDrag({
+      preventDefault() {},
+      pageY: 1000,
+      pageX: 40
+    });
+    wrapper.vm.swipeMove();
+    wrapper.vm.swiping = false;
+    wrapper.vm.endDrag();
+    wrapper.vm.swiping = true;
+    wrapper.vm.endDrag();
+    expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
+  });
+});
diff --git a/test/unit/specs/cell.spec.js b/test/unit/specs/cell.spec.js
index ec333641e..268f979dc 100644
--- a/test/unit/specs/cell.spec.js
+++ b/test/unit/specs/cell.spec.js
@@ -44,7 +44,7 @@ describe('Cell', () => {
     wrapper = mount(Cell);
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
-    wrapper.simulate('click');
+    wrapper.trigger('click');
 
     expect(eventStub.calledOnce).to.be.true;
     expect(eventStub.calledWith('click')).to.be.true;
diff --git a/test/unit/specs/checkbox.spec.js b/test/unit/specs/checkbox.spec.js
index 1fa242c13..4eacba7b4 100644
--- a/test/unit/specs/checkbox.spec.js
+++ b/test/unit/specs/checkbox.spec.js
@@ -41,7 +41,7 @@ describe('CheckboxGroup', () => {
     const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
 
     const firstCheckboxLabel = wrapper.find('.van-checkbox')[0].find('.van-checkbox__label')[0];
-    firstCheckboxLabel.simulate('click');
+    firstCheckboxLabel.trigger('click');
 
     wrapper.update();
     wrapper.vm.$nextTick(() => {
@@ -57,7 +57,7 @@ describe('CheckboxGroup', () => {
     const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
 
     const lastCheckboxLabel = wrapper.find('.van-checkbox')[3].find('.van-checkbox__label')[0];
-    lastCheckboxLabel.simulate('click');
+    lastCheckboxLabel.trigger('click');
 
     wrapper.update();
     wrapper.vm.$nextTick(() => {
@@ -121,7 +121,7 @@ describe('Checkbox', () => {
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
     const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
-    checkboxLabel.simulate('click');
+    checkboxLabel.trigger('click');
 
     wrapper.update();
     wrapper.vm.$nextTick(() => {
@@ -145,7 +145,7 @@ describe('Checkbox', () => {
     expect(wrapper.vm.isDisabled).to.be.true;
 
     const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
-    checkboxLabel.simulate('click');
+    checkboxLabel.trigger('click');
 
     expect(wrapper.vm.currentValue).to.be.false;
   });
diff --git a/test/unit/specs/field.spec.js b/test/unit/specs/field.spec.js
index a3136acee..be6d895d1 100644
--- a/test/unit/specs/field.spec.js
+++ b/test/unit/specs/field.spec.js
@@ -60,7 +60,7 @@ describe('Field', () => {
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
     const input = wrapper.find('.van-field__control')[0];
-    input.simulate('focus');
+    input.trigger('focus');
 
     wrapper.update();
     wrapper.vm.$nextTick(() => {
@@ -79,7 +79,7 @@ describe('Field', () => {
     const input = wrapper.find('.van-field__control')[0];
 
     input.element.value = 'test';
-    input.simulate('input');
+    input.trigger('input');
 
     wrapper.update();
     wrapper.vm.$nextTick(() => {
@@ -117,7 +117,7 @@ describe('Field', () => {
           parseInt(textareaElement.style.paddingTop, 10)) || 0;
 
     textareaElement.value = 'test';
-    textarea.simulate('input');
+    textarea.trigger('input');
 
     wrapper.update();
     wrapper.vm.$nextTick(() => {
diff --git a/test/unit/specs/icon.spec.js b/test/unit/specs/icon.spec.js
index c7fa06b4c..7607bb850 100644
--- a/test/unit/specs/icon.spec.js
+++ b/test/unit/specs/icon.spec.js
@@ -27,7 +27,7 @@ describe('Icon', () => {
     });
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
-    wrapper.simulate('click');
+    wrapper.trigger('click');
 
     expect(eventStub.calledOnce).to.be.true;
     expect(eventStub.calledWith('click')).to.be.true;
diff --git a/test/unit/specs/image-preview.spec.js b/test/unit/specs/image-preview.spec.js
index 56b0d2d2e..6475f4b81 100644
--- a/test/unit/specs/image-preview.spec.js
+++ b/test/unit/specs/image-preview.spec.js
@@ -25,9 +25,9 @@ describe('ImagePreview', () => {
     setTimeout(() => {
       const image = document.querySelector('.van-image-preview');
       const avImage = new Wrapper({ elm: image }, () => {}, false);
-      avImage.simulate('click');
-      avImage.simulate('touchstart');
-      avImage.simulate('touchend');
+      avImage.trigger('click');
+      avImage.trigger('touchstart');
+      avImage.trigger('touchend');
       setTimeout(() => {
         expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
         expect(document.body.style.overflow).to.equal('');
@@ -49,9 +49,9 @@ describe('ImagePreview', () => {
     setTimeout(() => {
       const image = document.querySelector('.van-image-preview');
       const avImage = new Wrapper({ elm: image }, () => {}, false);
-      avImage.simulate('click');
-      avImage.simulate('touchstart');
-      avImage.simulate('touchend');
+      avImage.trigger('click');
+      avImage.trigger('touchstart');
+      avImage.trigger('touchend');
 
       setTimeout(() => {
         expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
diff --git a/test/unit/specs/layout.spec.js b/test/unit/specs/layout.spec.js
index 7088fc806..ea9f1b9ba 100644
--- a/test/unit/specs/layout.spec.js
+++ b/test/unit/specs/layout.spec.js
@@ -13,7 +13,7 @@ describe('Layout', () => {
     wrapper = mount(Row);
 
     expect(wrapper.hasClass('van-row')).to.be.true;
-    expect(wrapper.computed().style()).to.be.empty;
+    expect(wrapper.vm.style).to.be.empty;
   });
 
   it('create a simple column', () => {
@@ -26,7 +26,7 @@ describe('Layout', () => {
     expect(wrapper.hasClass('van-col')).to.be.true;
     expect(wrapper.hasClass('van-col-8')).to.be.true;
     expect(wrapper.hasClass('van-col-offset-8')).to.be.true;
-    expect(wrapper.computed().gutter()).to.equal(0);
+    expect(wrapper.vm.gutter).to.equal(0);
   });
 
   it('create a gutter row', () => {
diff --git a/test/unit/specs/picker.spec.js b/test/unit/specs/picker.spec.js
index e49b908c4..dd8e5770a 100644
--- a/test/unit/specs/picker.spec.js
+++ b/test/unit/specs/picker.spec.js
@@ -124,7 +124,7 @@ describe('Picker', () => {
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
     const cancelBtn = wrapper.find('.van-picker__cancel')[0];
-    cancelBtn.simulate('click');
+    cancelBtn.trigger('click');
 
     wrapper.vm.$nextTick(() => {
       expect(eventStub.calledOnce).to.be.true;
@@ -145,7 +145,7 @@ describe('Picker', () => {
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
     const cancelBtn = wrapper.find('.van-picker__confirm')[0];
-    cancelBtn.simulate('click');
+    cancelBtn.trigger('click');
 
     wrapper.vm.$nextTick(() => {
       expect(eventStub.calledOnce).to.be.true;
diff --git a/test/unit/specs/quantity.spec.js b/test/unit/specs/quantity.spec.js
index e7be5f293..b8972daa2 100644
--- a/test/unit/specs/quantity.spec.js
+++ b/test/unit/specs/quantity.spec.js
@@ -19,12 +19,12 @@ describe('Quantity', () => {
     expect(wrapper.data().currentValue).to.equal(1);
 
     const plusButton = wrapper.find('.van-quantity__plus')[0];
-    plusButton.simulate('click');
+    plusButton.trigger('click');
 
     expect(wrapper.data().currentValue).to.equal(2);
 
     const minusButton = wrapper.find('.van-quantity__minus')[0];
-    minusButton.simulate('click');
+    minusButton.trigger('click');
     expect(wrapper.data().currentValue).to.equal(1);
   });
 
@@ -40,7 +40,7 @@ describe('Quantity', () => {
     expect(minusButton.hasClass('van-quantity__minus--disabled')).to.be.true;
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
-    minusButton.simulate('click');
+    minusButton.trigger('click');
 
     wrapper.update();
     wrapper.vm.$nextTick(() => {
@@ -51,7 +51,7 @@ describe('Quantity', () => {
     const plusButton = wrapper.find('.van-quantity__plus')[0];
     expect(plusButton.hasClass('van-quantity__plus--disabled')).to.be.true;
 
-    plusButton.simulate('click');
+    plusButton.trigger('click');
 
     wrapper.update();
     wrapper.vm.$nextTick(() => {
@@ -109,7 +109,7 @@ describe('Quantity', () => {
 
     const input = wrapper.find('.van-quantity__input')[0];
     input.element.value = 2;
-    input.simulate('input');
+    input.trigger('input');
 
     wrapper.update();
     wrapper.vm.$nextTick(() => {
diff --git a/test/unit/specs/radio.spec.js b/test/unit/specs/radio.spec.js
index dba53bc75..311c96832 100644
--- a/test/unit/specs/radio.spec.js
+++ b/test/unit/specs/radio.spec.js
@@ -41,7 +41,7 @@ describe('RadioGroup', () => {
     const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
 
     const uncheckedRadioLabel = wrapper.find('.van-radio')[1].find('.van-radio__label')[0];
-    uncheckedRadioLabel.simulate('click');
+    uncheckedRadioLabel.trigger('click');
 
     wrapper.update();
     wrapper.vm.$nextTick(() => {
@@ -85,7 +85,7 @@ describe('Radio', () => {
     expect(wrapper.hasClass('van-radio')).to.be.true;
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
-    wrapper.simulate('click');
+    wrapper.trigger('click');
     wrapper.update();
     wrapper.vm.$nextTick(() => {
       expect(eventStub.calledOnce).to.be.true;
@@ -107,7 +107,7 @@ describe('Radio', () => {
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
     const checkboxLabel = wrapper.find('.van-radio__label')[0];
-    checkboxLabel.simulate('click');
+    checkboxLabel.trigger('click');
 
     wrapper.update();
     wrapper.vm.$nextTick(() => {
@@ -132,7 +132,7 @@ describe('Radio', () => {
     expect(wrapper.instance().isDisabled).to.be.true;
 
     const checkboxLabel = wrapper.find('.van-radio__label')[0];
-    checkboxLabel.simulate('click');
+    checkboxLabel.trigger('click');
 
     expect(wrapper.instance().currentValue).to.equal('1');
   });
diff --git a/test/unit/specs/search.spec.js b/test/unit/specs/search.spec.js
index 4a4103eb5..1c13a5959 100644
--- a/test/unit/specs/search.spec.js
+++ b/test/unit/specs/search.spec.js
@@ -20,7 +20,7 @@ describe('Search', () => {
     wrapper = mount(Search);
 
     const input = wrapper.find('.van-search__input')[0];
-    input.simulate('focus');
+    input.trigger('focus');
 
     expect(wrapper.data().isFocus).to.be.true;
   });
@@ -46,10 +46,10 @@ describe('Search', () => {
     expect(wrapper.data().value).to.be.equal('test');
 
     const input = wrapper.find('.van-search__input')[0];
-    input.simulate('focus');
+    input.trigger('focus');
 
     const cleanBtn = wrapper.find('.van-icon-clear')[0];
-    cleanBtn.simulate('click');
+    cleanBtn.trigger('click');
     expect(wrapper.data().value).to.equal('');
     expect(wrapper.data().focusStatus).to.be.true;
   });
@@ -63,10 +63,10 @@ describe('Search', () => {
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
     const input = wrapper.find('.van-search__input')[0];
-    input.simulate('focus');
+    input.trigger('focus');
 
     const cancelBtn = wrapper.find('.van-search__cancel')[0];
-    cancelBtn.simulate('click');
+    cancelBtn.trigger('click');
 
     wrapper.vm.$nextTick(() => {
       expect(wrapper.data().value).to.be.equal('');
@@ -84,7 +84,7 @@ describe('Search', () => {
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
     const input = wrapper.find('.van-search__input')[0];
-    input.simulate('keyup.enter');
+    input.trigger('keyup.enter');
 
     wrapper.vm.$nextTick(() => {
       expect(eventStub.calledOnce).to.be.true;
@@ -92,4 +92,25 @@ describe('Search', () => {
       done();
     });
   });
+
+  it('create a showcase type search', () => {
+    wrapper = mount(Search, {
+      propsData: {
+        type: 'showcase'
+      }
+    });
+
+    expect(wrapper.hasClass('van-search')).to.be.true;
+    expect(wrapper.hasClass('van-search--showcase')).to.be.true;
+
+    const input = wrapper.find('.van-search__input')[0];
+    input.trigger('focus');
+
+    expect(wrapper.data().isFocus).to.be.true;
+
+    const body = document.body;
+    body.click();
+    expect(wrapper.data().isFocus).to.be.false;
+    expect(wrapper.data().focusStatus).to.be.false;
+  });
 });
diff --git a/test/unit/specs/switch.spec.js b/test/unit/specs/switch.spec.js
index 58fafbbf3..d1cadd5ca 100644
--- a/test/unit/specs/switch.spec.js
+++ b/test/unit/specs/switch.spec.js
@@ -53,7 +53,7 @@ describe('Switch', () => {
     });
 
     expect(wrapper.hasClass('van-switch--on')).to.be.true;
-    wrapper.simulate('click');
+    wrapper.trigger('click');
     expect(wrapper.hasClass('van-switch--on')).to.be.true;
   });
 
@@ -77,7 +77,7 @@ describe('Switch', () => {
     });
 
     expect(wrapper.hasClass('van-switch--off')).to.be.true;
-    wrapper.simulate('click');
+    wrapper.trigger('click');
     expect(wrapper.hasClass('van-switch--off')).to.be.true;
   });
 
@@ -89,7 +89,7 @@ describe('Switch', () => {
     });
 
     expect(wrapper.hasClass('van-switch--off')).to.be.true;
-    wrapper.simulate('click');
+    wrapper.trigger('click');
     expect(wrapper.hasClass('van-switch--on')).to.be.true;
   });
 
@@ -103,7 +103,7 @@ describe('Switch', () => {
     });
 
     expect(wrapper.hasClass('van-switch--off')).to.be.true;
-    wrapper.simulate('click');
+    wrapper.trigger('click');
     expect(wrapper.hasClass('van-switch--off')).to.be.true;
     expect(stub.calledOnce).to.be.true;
     expect(stub.calledWith(true));
diff --git a/test/unit/specs/tabs.spec.js b/test/unit/specs/tabs.spec.js
index 85a4051ef..377ada337 100644
--- a/test/unit/specs/tabs.spec.js
+++ b/test/unit/specs/tabs.spec.js
@@ -47,7 +47,7 @@ describe('Tabs', () => {
 
     wrapper.vm.$nextTick(() => {
       const nTab = wrapper.find('.van-tab')[0];
-      nTab.simulate('click');
+      nTab.trigger('click');
       expect(clickSpy.calledOnce).to.be.true;
       done();
     });
@@ -63,7 +63,7 @@ describe('Tabs', () => {
 
     wrapper.vm.$nextTick(() => {
       const nTab = wrapper.find('.van-tab')[2];
-      nTab.simulate('click');
+      nTab.trigger('click');
       expect(clickDisabledSpy.calledOnce).to.be.true;
       done();
     });
diff --git a/yarn.lock b/yarn.lock
index 1d73db982..a12b0deb4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -280,11 +280,11 @@ autoprefixer@^6.3.1, autoprefixer@^6.7.5:
     postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
-avoriaz@^1.11.1:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/avoriaz/-/avoriaz-1.11.1.tgz#55bf9456b998b73d82f1c74c90a3858b7088ce3f"
+avoriaz@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/avoriaz/-/avoriaz-2.0.0.tgz#df0b4cd95afa6da03bed886595e36b9c1d17e201"
   dependencies:
-    vue "^2.2.1"
+    vue-add-globals "^1.0.1"
 
 aws-sign2@~0.6.0:
   version "0.6.0"
@@ -2072,6 +2072,12 @@ error-ex@^1.2.0:
   dependencies:
     is-arrayish "^0.2.1"
 
+error-stack-parser@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.1.tgz#a3202b8fb03114aa9b40a0e3669e48b2b65a010a"
+  dependencies:
+    stackframe "^1.0.3"
+
 es-abstract@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.7.0.tgz#dfade774e01bfcd97f96180298c449c8623fb94c"
@@ -2694,6 +2700,14 @@ fresh@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
 
+friendly-errors-webpack-plugin@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.6.1.tgz#e32781c4722f546a06a9b5d7a7cfa28520375d70"
+  dependencies:
+    chalk "^1.1.3"
+    error-stack-parser "^2.0.0"
+    string-length "^1.0.1"
+
 fs-access@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/fs-access/-/fs-access-1.0.1.tgz#d6a87f262271cefebec30c553407fb995da8777a"
@@ -4027,7 +4041,7 @@ loader-runner@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
 
-loader-utils@^0.2.10, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.5, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5:
+loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.5, loader-utils@~0.2.2, loader-utils@~0.2.5:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
   dependencies:
@@ -4036,7 +4050,7 @@ loader-utils@^0.2.10, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.2:
+loader-utils@^1.0.2, loader-utils@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   dependencies:
@@ -5102,12 +5116,6 @@ postcss-convert-values@^2.3.4:
     postcss "^5.0.11"
     postcss-value-parser "^3.1.2"
 
-postcss-css-reset@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-css-reset/-/postcss-css-reset-1.0.2.tgz#769f2d62d3f1f76e2600fb4f79066399bebe2bd8"
-  dependencies:
-    postcss "^5.0.19"
-
 postcss-custom-media@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-5.0.1.tgz#138d25a184bf2eb54de12d55a6c01c30a9d8bd81"
@@ -5197,7 +5205,7 @@ postcss-import@^9.1.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-load-config@^1.2.0:
+postcss-load-config@^1.1.0, postcss-load-config@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
   dependencies:
@@ -5461,7 +5469,7 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.15, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.1.2, postcss@^5.2.15, postcss@^5.2.16, postcss@^5.2.17:
+postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.15, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.21, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.1.2, postcss@^5.2.15, postcss@^5.2.16, postcss@^5.2.17:
   version "5.2.17"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.17.tgz#cf4f597b864d65c8a492b2eabe9d706c879c388b"
   dependencies:
@@ -5979,7 +5987,7 @@ resolve@1.1.x:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.2.0:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.2.0, resolve@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
   dependencies:
@@ -6002,7 +6010,7 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@2, rimraf@^2.2.8, rimraf@^2.4.4, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1:
+rimraf@2, rimraf@^2.2.8, rimraf@^2.4.4, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
   dependencies:
@@ -6343,6 +6351,10 @@ sshpk@^1.7.0:
     jsbn "~0.1.0"
     tweetnacl "~0.14.0"
 
+stackframe@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.0.3.tgz#fe64ab20b170e4ce49044b126c119dfa0e5dc7cc"
+
 "statuses@>= 1.3.1 < 2", statuses@~1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
@@ -6380,6 +6392,12 @@ string-hash@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
 
+string-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac"
+  dependencies:
+    strip-ansi "^3.0.0"
+
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -6921,15 +6939,15 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
-vue-hot-reload-api@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-1.3.3.tgz#54d22d83786a878493f639cc76bca7992a23be46"
+vue-add-globals@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vue-add-globals/-/vue-add-globals-1.0.1.tgz#151f241426e70cbc790a1f31bb0f4435d7575efc"
 
-vue-hot-reload-api@^2.0.1:
+vue-hot-reload-api@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de"
 
-vue-html-loader@^1.2.3:
+vue-html-loader@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/vue-html-loader/-/vue-html-loader-1.2.4.tgz#54ce489be06065c91dc2a1173122f3e004e0a253"
   dependencies:
@@ -6943,52 +6961,47 @@ vue-lazyload@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.0.3.tgz#6bd881a5bf3c681e74e86190094cad104bc403fa"
 
-vue-loader@^10.3.0:
-  version "10.3.0"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-10.3.0.tgz#436421736e9ad0f1c481330327c376963db86a19"
+vue-loader@^12.0.0:
+  version "12.2.1"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.2.1.tgz#53f27c0973d386768f5a75156f4129b5efc6ba55"
   dependencies:
     consolidate "^0.14.0"
     hash-sum "^1.0.2"
     js-beautify "^1.6.3"
-    loader-utils "^0.2.10"
+    loader-utils "^1.1.0"
     lru-cache "^4.0.1"
-    postcss "^5.0.10"
+    postcss "^5.0.21"
+    postcss-load-config "^1.1.0"
     postcss-selector-parser "^2.0.0"
+    resolve "^1.3.3"
     source-map "^0.5.6"
-    vue-hot-reload-api "^2.0.1"
-    vue-style-loader "^2.0.0"
+    vue-hot-reload-api "^2.1.0"
+    vue-style-loader "^3.0.0"
     vue-template-es2015-compiler "^1.2.2"
 
-vue-markdown-loader@^0.6.1:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-0.6.2.tgz#836792c7f9a54cdbb459080c75d0f4bbbddc4489"
+vue-markdown-loader@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-1.0.0.tgz#255a2608e388991faa354618e4f4b642ebb7e0db"
   dependencies:
     cheerio "^0.20.0"
     highlight.js "^9.4.0"
     loader-utils "^0.2.15"
     markdown-it "^6.0.5"
-    rimraf "^2.5.2"
 
-vue-router@^2.0.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.4.0.tgz#56a635e1434a1966ac095f2a485bebdcfc36cec5"
+vue-router@^2.5.0:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.5.3.tgz#073783f564b6aece6c8a59c63e298dc2aabfb51b"
 
-vue-style-loader@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-1.0.0.tgz#abeb7bd0f46313083741244d3079d4f14449e049"
-  dependencies:
-    loader-utils "^0.2.7"
-
-vue-style-loader@^2.0.0:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-2.0.5.tgz#f0efac992febe3f12e493e334edb13cd235a3d22"
+vue-style-loader@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.0.1.tgz#c8b639bb2f24baf9d78274dc17e4f264c1deda08"
   dependencies:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.1.8.tgz#12dd1cc63793f59be580c694a61610cb9369d629"
+vue-template-compiler@2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.3.4.tgz#5a88ac2c5e4d5d6218e6aa80e7e221fb7e67894c"
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"
@@ -6997,13 +7010,9 @@ vue-template-es2015-compiler@^1.2.2, vue-template-es2015-compiler@^1.4.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.5.2.tgz#a0a6c50c941d2a4abda963f2f42c337ac450ee95"
 
-vue@2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.1.8.tgz#ae30aa86024fccf5535292ce414e7b4c221a1756"
-
-vue@^2.2.1:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.2.6.tgz#451714b394dd6d4eae7b773c40c2034a59621aed"
+vue@2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.4.tgz#5ec3b87a191da8090bbef56b7cfabd4158038171"
 
 watchpack@^1.3.1:
   version "1.3.1"