diff --git a/.gitignore b/.gitignore
index 41b8349a1..5f5aad3b6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,4 @@ example/dist
 test/unit/coverage
 packages/vant-css/build
 packages/vant-css/icons
+docs/examples-dist
diff --git a/build/genExamples.js b/build/genExamples.js
index ac4eebe59..b9ecdb6fb 100644
--- a/build/genExamples.js
+++ b/build/genExamples.js
@@ -1,114 +1,18 @@
-var markdownIt = require('markdown-it');
-var markdownItContainer = require('markdown-it-container');
-var fs = require('fs');
-var path = require('path');
-var cheerio = require('cheerio');
-var chalk = require('chalk');
-var decamelize = require('decamelize');
-var striptags = require('./strip-tags');
-var navs = require('../docs/src/nav.config.js');
-navs = navs['zh-CN'];
+const path = require('path');
+const docConfig = require('../docs/src/doc.config');
+const { extractExample } = require('zan-doc/src/helper');
 
-var parser = markdownIt('default', {
-  html: true
-});
-
-var renderVueTemplate = function(html, componentTitle) {
-  var $ = cheerio.load(html, {
-    decodeEntities: false,
-    lowerCaseAttributeNames: false,
-    lowerCaseTags: false
+function extract(watch = false) {
+  extractExample({
+    src: path.resolve(__dirname, '../docs/examples-docs'),
+    dist: path.resolve(__dirname, '../docs/examples-dist'),
+    nav: docConfig['zh-CN'].nav,
+    watch
   });
+}
 
-  var output = {
-    style: $.html('style'),
-    script: $.html('script'),
-    'example-block': $.html('example-block')
-  };
-  var result;
+extract();
 
-  $('style').remove();
-  $('script').remove();
-
-  var script = '';
-  if (output.script) {
-    script = output.script.replace('<script>', '<script>\nimport Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);');
-  } else {
-    script = '<script>\nimport Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>';
-  }
-
-  var componentName = componentTitle.split(' ')[0];
-  componentName = decamelize(componentName, '-');
-  result = `<template><section class="demo-${componentName}"><h1 class="demo-title">${componentTitle}</h1>` + output['example-block'] + '</section></template>\n' +
-    output.style + '\n' +
-    script;
-
-  return result;
+module.exports = function watch() {
+  extract(true);
 };
-
-function convert(str) {
-  str = str.replace(/(&#x)(\w{4});/gi, function($0) {
-    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
-  });
-  return str;
-}
-
-parser.use(markdownItContainer, 'demo', {
-  validate: function(params) {
-    return params.trim().match(/^demo\s*(.*)$/);
-  },
-
-  render: function(tokens, idx) {
-    var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
-    if (tokens[idx].nesting === 1) {
-      var description = (m && m.length > 1) ? m[1] : '';
-      var content = tokens[idx + 1].content;
-      var html = convert(striptags.strip(content, ['script', 'style']));
-
-      return `<example-block title="${description}">
-                ${html}
-              </example-block>\n`;
-    }
-    return '';
-  }
-});
-
-var docsDir = path.resolve(__dirname, '../docs');
-var components = [];
-for (var i = 0; i < navs.length; i++) {
-  var navItem = navs[i];
-
-  if (!navItem.showInMobile) continue;
-
-  if (!navItem.groups) {
-    components.push(navs[i]);
-  } else {
-    for (var j = 0; j < navItem.groups.length; j++) {
-      components = components.concat(navItem.groups[j].list);
-    }
-  }
-}
-for (var i = 0; i < components.length; i++) {
-  var item = components[i];
-  var itemMdFile = `${docsDir}/examples-docs${item.path}.md`;
-  if (!fs.existsSync(itemMdFile)) {
-    continue;
-  }
-
-  var itemMd = fs.readFileSync(`${docsDir}/examples-docs${item.path}.md`).toString();
-  var content = parser.render(itemMd);
-  var result = renderVueTemplate(content, item.title);
-
-  var exampleVueName = `${docsDir}/examples-dist/${item.path}.vue`;
-
-  // 新建一个文件
-  if (!fs.existsSync(exampleVueName)) {
-    fs.closeSync(fs.openSync(exampleVueName, 'w'));
-  }
-  fs.writeFileSync(exampleVueName, result, {
-    encoding: 'utf8'
-  });
-}
-
-console.log(chalk.green('generate examples success!'));
-
diff --git a/build/release.sh b/build/release.sh
index 247684c63..463c07e92 100644
--- a/build/release.sh
+++ b/build/release.sh
@@ -1,6 +1,16 @@
 git checkout master
 git merge dev
 
+basepath=$(dirname $0)
+
+if ! command_exists github_changelog_generator ; then
+    fail 'github_changelog_generator is required to publish packages'
+fi
+
+if [ -z "$CHANGELOG_GITHUB_TOKEN" ] ; then
+    fail 'You must set CHANGELOG_GITHUB_TOKEN environment variable\nhttps://github.com/skywinder/github-changelog-generator#github-token'
+fi
+
 #!/usr/bin/env sh
 set -e
 echo "Enter release version: "
@@ -12,6 +22,15 @@ if [[ $REPLY =~ ^[Yy]$ ]]
 then
   echo "Releasing $VERSION ..."
 
+  github_changelog_generator \
+    --header-label "## 更新日志" \
+    --bugs-label "**修复:**" \
+    --enhancement-label "**非兼容更新和新特性:**" \
+    --issues-label "**处理的 Issue:**" \
+    --pr-label "**合并的 Pull Request (可能有不兼容改动):**" \
+    --no-unreleased \
+    -o $basepath/../docs/examples-docs/changelog.md
+
   # build
   VERSION=$VERSION npm run dist
 
diff --git a/build/webpack.config.dev.js b/build/webpack.config.dev.js
index 04ca6c82f..4294b858c 100644
--- a/build/webpack.config.dev.js
+++ b/build/webpack.config.dev.js
@@ -8,6 +8,12 @@ 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')
+const isProduction = process.env.NODE_ENV === 'production';
+const watchExample = require('./genExamples');
+
+if (!isProduction) {
+  watchExample();  
+}
 
 var StyleExtractPlugin;
 if (process.env.NODE_ENV === 'production') {
@@ -32,7 +38,7 @@ function wrap(render) {
 
 module.exports = {
   entry: {
-    'vendor': ['vue', 'vue-router'],
+    'vendor': ['vue', 'vue-router', 'zan-doc'],
     'vant-docs': './docs/src/index.js',
     'vant-examples': './docs/src/examples.js'
   },
@@ -118,37 +124,23 @@ module.exports = {
         },
         vueMarkdown: {
           use: [
-            [require('markdown-it-anchor'), {
-              level: 2,
-              slugify: slugify,
-              permalink: true,
-              permalinkBefore: true
-            }],
             [require('markdown-it-container'), 'demo', {
               validate: function(params) {
                 return params.trim().match(/^demo\s*(.*)$/);
               },
 
               render: function(tokens, idx) {
-                var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
                 if (tokens[idx].nesting === 1) {
-                  var description = (m && m.length > 1) ? m[1] : '';
-                  var content = tokens[idx + 1].content;
-                  var html = convert(striptags.strip(content, ['script', 'style']));
-
-                  return `<demo-block class="demo-box" description="${description}">
-                            <div class="examples" slot="examples">${html}</div>
-                            <div class="highlight" slot="highlight">`;
+                  return `<demo-block class="demo-box"><div class="highlight" slot="highlight">`;
                 }
-                return '</div></demo-block>\n';
+                return `</div></demo-block>\n`;
               }
             }]
           ],
           preprocess: function(MarkdownIt, source) {
             MarkdownIt.renderer.rules.table_open = function() {
-              return '<table class="table">';
+              return '<table class="zan-doc-table">';
             };
-            MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
             return source;
           }
         }
diff --git a/docs/assets/docs.css b/docs/assets/docs.css
index 883417310..bbcf5edb1 100644
--- a/docs/assets/docs.css
+++ b/docs/assets/docs.css
@@ -97,11 +97,7 @@ code.hljs {
       margin: 20px 0;
       font-weight: normal;
 
-      &:hover a {
-        opacity: .4;
-      }
-
-      a {
+      .header-anchor {
         float: left;
         margin-left: -20px;
         opacity: 0;
diff --git a/docs/examples-dist/actionsheet.vue b/docs/examples-dist/actionsheet.vue
deleted file mode 100644
index 9cad0d3de..000000000
--- a/docs/examples-dist/actionsheet.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template><section class="demo-actionsheet"><h1 class="demo-title">Actionsheet 行动按钮</h1><example-block title="基础用法">
-                <van-button @click="show1 = true">弹出actionsheet</van-button>
-<van-actionsheet v-model="show1" :actions="actions1">
-</van-actionsheet>
-
-
-
-              </example-block><example-block title="带取消按钮的ActionSheet">
-                <van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
-<van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
-</van-actionsheet>
-
-
-
-              </example-block><example-block title="带标题的ActionSheet">
-                <van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
-<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
-  <p>一些内容</p>
-</van-actionsheet>
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b actionsheet {
-    .actionsheet-wx {
-      color: #06BF04;
-    }
-
-    .van-button {
-      margin-left: 15px;
-    }
-
-    .title-actionsheet p {
-      padding: 20px;
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-import MobileComputed from 'components/mobile-computed';
-
-export default {
-  mixins: [MobileComputed],
-
-  data() {
-    return {
-      show1: false,
-      show2: false,
-      show3: false,
-      actions1: [
-        {
-          name: '微信安全支付',
-          className: 'actionsheet-wx',
-          callback: this.handleActionClick
-        },
-        {
-          name: '支付宝支付',
-          loading: true
-        },
-        {
-          name: '有赞E卡',
-          subname: '（剩余260.50元）'
-        },
-        {
-          name: '信用卡支付'
-        },
-        {
-          name: '其他支付方式'
-        }
-      ]
-    };
-  },
-
-  methods: {
-    handleActionClick(item) {
-      console.log(item);
-    }
-  }
-}
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/badge.vue b/docs/examples-dist/badge.vue
deleted file mode 100644
index dccaffbce..000000000
--- a/docs/examples-dist/badge.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template><section class="demo-badge"><h1 class="demo-title">Badge 徽章</h1><example-block title="基础用法">
-                <div class="badge-group-wrapper">
-  <van-badge-group>
-    <van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
-    <van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
-    <van-badge title="火炽寿司" @click="onItemClick"></van-badge>
-    <van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
-  </van-badge-group>
-</div>
-
-              </example-block><example-block title="选中某个badge">
-                <div class="badge-group-wrapper">
-  <van-badge-group :active-key="2">
-    <van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
-    <van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
-    <van-badge title="火炽寿司" @click="onItemClick"></van-badge>
-    <van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
-  </van-badge-group>
-</div>
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b badge {
-    .badge-group-wrapper {
-      padding: 30px 20px;
-      background-color: #fff;
-    }
-
-    .van-badge-group {
-      margin: 0 auto;
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-  export default {
-    data() {
-      return {
-        activeKey: '2'
-      };
-    },
-    methods: {
-      onItemClick(e, data) {
-        this.activeKey = data.mark;
-      }
-    }
-  };
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/button.vue b/docs/examples-dist/button.vue
deleted file mode 100644
index 7a51f9f77..000000000
--- a/docs/examples-dist/button.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template><section class="demo-button"><h1 class="demo-title">Button 按钮</h1><example-block title="按钮功能">
-                <van-row>
-  <van-col span="24">
-    <van-button block="">default</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button type="primary" block="">primary</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button type="danger" block="">danger</van-button>
-  </van-col>
-</van-row>
-
-              </example-block><example-block title="禁用状态">
-                <van-row>
-  <van-col span="24">
-    <van-button disabled block="">diabled</van-button>
-  </van-col>
-</van-row>
-
-              </example-block><example-block title="按钮尺寸">
-                <van-row>
-  <van-col span="24">
-    <van-button size="large">large</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button size="normal">normal</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button size="small">small</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button size="mini">mini</van-button>
-  </van-col>
-</van-row>
-
-              </example-block><example-block title="自定义按钮标签">
-                <van-row>
-  <van-col span="24">
-    <van-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</van-button>
-  </van-col>
-</van-row>
-
-              </example-block><example-block title="loading按钮">
-                <van-row>
-  <van-col span="24">
-    <van-button type="primary" loading="" block="">loading</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button loading="" block=""></van-button>
-  </van-col>
-</van-row>
-
-              </example-block><example-block title="页面底部操作按钮">
-                <van-row>
-  <van-col span="24">
-    <van-button type="primary" bottom-action="">立即购买</van-button>
-  </van-col>
-</van-row>
-<van-row>
-  <van-col span="12">
-    <van-button bottom-action="">加入购物车</van-button>
-  </van-col>
-  <van-col span="12">
-    <van-button type="primary" bottom-action="">立即购买</van-button>
-  </van-col>
-</van-row>
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b button {
-    .van-button {
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      user-select: none;
-    }
-    .van-row {
-      padding: 0 15px;
-      margin-bottom: 20px;
-    }
-    .van-col-24 {
-      margin-bottom: 20px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-</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/card.vue b/docs/examples-dist/card.vue
deleted file mode 100644
index 1e8a6c2af..000000000
--- a/docs/examples-dist/card.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template><section class="demo-card"><h1 class="demo-title">Card 图文组件</h1><example-block title="基础用法">
-                <van-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-</van-card>
-
-              </example-block><example-block title="高级用法">
-                <van-card thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-  <div class="van-card__row" slot="title">
-    <h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-    <span class="van-card__price">¥ 2.00</span>
-  </div>
-  <div class="van-card__row" slot="desc">
-    <span class="van-card__num">x 2</span>
-  </div>
-  <div class="van-card__footer" slot="footer">
-    <van-button size="mini">按钮一</van-button>
-    <van-button size="mini">按钮二</van-button>
-  </div>
-</van-card>
-
-              </example-block></section></template>
-
-<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/cell-swipe.vue b/docs/examples-dist/cell-swipe.vue
deleted file mode 100644
index cd91bd534..000000000
--- a/docs/examples-dist/cell-swipe.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<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/cell.vue b/docs/examples-dist/cell.vue
deleted file mode 100644
index cecd940e3..000000000
--- a/docs/examples-dist/cell.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template><section class="demo-cell"><h1 class="demo-title">Cell 单元格</h1><example-block title="基础用法">
-                <van-cell-group>
-  <van-cell title="单元格1" value="单元格1内容"></van-cell>
-  <van-cell title="单元格2" value="单元格2内容"></van-cell>
-</van-cell-group>
-
-              </example-block><example-block title="只设置value">
-                <van-cell-group>
-  <van-cell value="单元格1内容"></van-cell>
-  <van-cell value="单元格2内容"></van-cell>
-</van-cell-group>
-
-              </example-block><example-block title="标题带描述信息">
-                <van-cell-group>
-  <van-cell title="单元格1" label="描述信息" value="查看专栏" is-link="" url="javascript:void(0)" @click="handleClick"></van-cell>
-  <van-cell title="单元格2" label="描述信息" value="查看专栏" is-link=""></van-cell>
-</van-cell-group>
-
-              </example-block><example-block title="带图标">
-                <van-cell-group>
-  <van-cell title="起码运动馆" icon="home"></van-cell>
-  <van-cell title="线下门店" icon="location"></van-cell>
-</van-cell-group>
-
-              </example-block><example-block title="可点击的链接">
-                <van-cell-group>
-  <van-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link=""></van-cell>
-  <van-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></van-cell>
-</van-cell-group>
-
-              </example-block><example-block title="高级用法">
-                <van-cell-group>
-  <van-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
-    <template slot="title">
-      <span class="van-cell-text">起码运动馆</span>
-      <van-tag type="danger">官方</van-tag>
-    </template>
-  </van-cell>
-  <van-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></van-cell>
-  <van-cell title="其他">
-    <template slot="right-icon">
-      <van-icon name="passed" class="van-cell__right-icon" style="font-size: 16px;"></van-icon>
-    </template>
-  </van-cell>
-</van-cell-group>
-
-              </example-block></section></template>
-
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-export default {
-  methods: {
-    handleClick() {
-      console.log('cell click');
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/checkbox.vue b/docs/examples-dist/checkbox.vue
deleted file mode 100644
index 89c897ed2..000000000
--- a/docs/examples-dist/checkbox.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template><section class="demo-checkbox"><h1 class="demo-title">Checkbox 复选框</h1><example-block title="基础用法">
-                <div class="van-checkbox-wrapper">
-  <van-checkbox v-model="checkbox1">复选框1</van-checkbox>
-</div>
-
-
-
-              </example-block><example-block title="禁用状态">
-                <div class="van-checkbox-wrapper">
-  <van-checkbox v-model="checkbox2" disabled>复选框2</van-checkbox>
-</div>
-
-
-
-              </example-block><example-block title="Checkbox组">
-                <div class="van-checkbox-wrapper">
-  <van-checkbox-group v-model="result">
-    <van-checkbox v-for="(item, index) in list" :key="index" :name="item">复选框{{item}}</van-checkbox>
-  </van-checkbox-group>
-</div>
-
-
-
-              </example-block><example-block title="禁用Checkbox组">
-                <div class="van-checkbox-wrapper">
-  <van-checkbox-group v-model="result" disabled>
-    <van-checkbox v-for="(item, index) in list" :key="index" :name="item">复选框{{item}}</van-checkbox>
-  </van-checkbox-group>
-</div>
-
-
-
-              </example-block><example-block title="与Cell组件一起使用">
-                <van-checkbox-group v-model="result">
-  <van-cell-group>
-    <van-cell v-for="(item, index) in list" :key="index">
-      <van-checkbox :name="item">复选框{{item}}</van-checkbox>
-    </van-cell>
-  </van-cell-group>
-</van-checkbox-group>
-
-
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b checkbox {
-    .van-checkbox-wrapper {
-      padding: 0 20px;
-
-      .van-checkbox {
-        margin: 10px 0;
-      }
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-export default {
-  data() {
-    return {
-      checkbox1: true,
-      checkbox2: true,
-      list: [
-        'a',
-        'b',
-        'c'
-      ],
-      result: ['a', 'b']
-    };
-  },
-
-  watch: {
-    result(val) {
-      console.log(val);
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/datetime-picker.vue b/docs/examples-dist/datetime-picker.vue
deleted file mode 100644
index a3eba9767..000000000
--- a/docs/examples-dist/datetime-picker.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template><section class="demo-datetime"><h1 class="demo-title">Datetime Picker 时间选择</h1><example-block title="基础用法">
-                <van-datetime-picker v-model="currentDate" type="datetime" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">  
-</van-datetime-picker>
-
-
-
-              </example-block><example-block title="选择日期">
-                <van-datetime-picker v-model="currentDate" type="date" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">  
-</van-datetime-picker>
-
-              </example-block><example-block title="选择时间">
-                <van-datetime-picker v-model="currentDate" type="time" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">  
-</van-datetime-picker>
-
-              </example-block></section></template>
-
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-export default {
-  data() {
-    return {
-      minHour: 10,
-      maxHour: 20,
-      minDate: new Date(),
-      currentDate: null
-    };
-  },
-
-  methods: {
-    handlePickerChange(picker, values) {
-      // picker.setColumnValues(1, citys[values[0]]);
-      console.log(values);
-    },
-    handlePickerCancel() {
-      alert('picker cancel');
-    },
-    handlePickerConfirm() {
-      alert('picker confirm');
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/dialog.vue b/docs/examples-dist/dialog.vue
deleted file mode 100644
index 52a14caaa..000000000
--- a/docs/examples-dist/dialog.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template><section class="demo-dialog"><h1 class="demo-title">Dialog 弹出框</h1><example-block title="消息提示">
-                <van-button @click="handleAlertClick">alert</van-button>
-<van-button @click="handleAlert2Click">无标题alert</van-button>
-
-
-
-              </example-block><example-block title="消息确认">
-                <van-button @click="handleConfirmClick">confirm</van-button>
-
-
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b dialog {
-    .van-button {
-      margin: 15px;
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-import { Dialog } from 'src/index';
-import MobileComputed from 'components/mobile-computed';
-
-export default {
-  mixins: [MobileComputed],
-
-  methods: {
-    handleAlertClick() {
-      Dialog.alert({
-        title: 'alert标题',
-        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      }).then((action) => {
-        console.log(action);
-      });
-    },
-
-    handleAlert2Click() {
-      Dialog.alert({
-        message: '无标题alert'
-      }).then((action) => {
-        console.log(action);
-      });
-    },
-
-    handleConfirmClick() {
-      Dialog.confirm({
-        title: 'confirm标题',
-        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      }).then((action) => {
-        console.log(action);
-      }, (error) => {
-        console.log(error);
-      });
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/field.vue b/docs/examples-dist/field.vue
deleted file mode 100644
index 1241f24af..000000000
--- a/docs/examples-dist/field.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template><section class="demo-field"><h1 class="demo-title">Field 输入框</h1><example-block title="基础用法">
-                <van-cell-group>
-  <van-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></van-field>
-  <van-field type="password" label="密码：" placeholder="请输入密码" required></van-field>
-  <van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
-</van-cell-group>
-
-              </example-block><example-block title="无label的输入框">
-                <van-cell-group>
-  <van-field type="text" placeholder="请输入用户名"></van-field>
-</van-cell-group>
-
-              </example-block><example-block title="带border的输入框">
-                <div class="van-field-wrapper">
-  <van-field type="text" placeholder="请输入用户名" border=""></van-field>
-</div>
-
-              </example-block><example-block title="禁用的输入框">
-                <van-cell-group>
-  <van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
-</van-cell-group>
-
-              </example-block><example-block title="错误的输入框">
-                <van-cell-group>
-  <van-field label="用户名：" type="text" placeholder="请输入用户名" error=""></van-field>
-</van-cell-group>
-
-              </example-block><example-block title="错误的输入框">
-                <van-cell-group>
-  <van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize=""></van-field>
-</van-cell-group>
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b field {
-    .van-field-wrapper {
-      padding: 0 10px;
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-export default {
-  data() {
-    return {
-      username: 'zhangmin'
-    };
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/icon.vue b/docs/examples-dist/icon.vue
deleted file mode 100644
index 40620f0e0..000000000
--- a/docs/examples-dist/icon.vue
+++ /dev/null
@@ -1,290 +0,0 @@
-<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>
-    <span>qr-invalid</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="qr"></van-icon>
-    <span>qr</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="exchange"></van-icon>
-    <span>exchange</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="close"></van-icon>
-    <span>close</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="location"></van-icon>
-    <span>location</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="upgrade"></van-icon>
-    <span>upgrade</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="check"></van-icon>
-    <span>check</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="checked"></van-icon>
-    <span>checked</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="like-o"></van-icon>
-    <span>like-o</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="like" style="color: red;"></van-icon>
-    <span>like</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="chat"></van-icon>
-    <span>chat</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="shop"></van-icon>
-    <span>shop</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="photograph"></van-icon>
-    <span>photograph</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="add"></van-icon>
-    <span>add</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="add2"></van-icon>
-    <span>add2</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="photo"></van-icon>
-    <span>photo</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="edit"></van-icon>
-    <span>edit</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="passed"></van-icon>
-    <span>passed</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="arrow"></van-icon>
-    <span>arrow</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="gift"></van-icon>
-    <span>gift</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="search"></van-icon>
-    <span>search</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="clear"></van-icon>
-    <span>clear</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="success"></van-icon>
-    <span>success</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="fail"></van-icon>
-    <span>fail</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="contact"></van-icon>
-    <span>contact</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="wechat"></van-icon>
-    <span>wechat</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="alipay"></van-icon>
-    <span>alipay</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="password-view"></van-icon>
-    <span>password-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 {
-      font-size: 45px;
-      display: block;
-      margin: 15px 0;
-    }
-  }
-} 
-</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/image-preview.vue b/docs/examples-dist/image-preview.vue
deleted file mode 100644
index 28572f8a9..000000000
--- a/docs/examples-dist/image-preview.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template><section class="demo-image-preview"><h1 class="demo-title">ImagePreview 图片预览</h1><example-block title="基础用法">
-                <van-button @click="handleImagePreview">预览图片</van-button>
-
-
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b image-preview {
-    .van-button {
-      margin-left: 15px;
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-import { ImagePreview } from 'src/index';
-import MobileComputed from 'components/mobile-computed';
-
-export default {
-  mixins: [MobileComputed],
-
-  methods: {
-    handleImagePreview() {
-      ImagePreview([
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
-        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
-      ]);
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/layout.vue b/docs/examples-dist/layout.vue
deleted file mode 100644
index 99f74fa79..000000000
--- a/docs/examples-dist/layout.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template><section class="demo-layout"><h1 class="demo-title">Layout 布局</h1><example-block title="常规用法">
-                <van-row>
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
-  <van-col span="8">
-    <div class="white">span: 8</div>
-  </van-col>
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
-</van-row>
-<van-row>
-  <van-col span="4">
-    <div class="gray">span: 4</div>
-  </van-col>
-  <van-col span="10" offset="4">
-    <div class="gray">offset: 4, span: 10</div>
-  </van-col>
-</van-row>
-<van-row>
-  <van-col offset="12" span="12">
-    <div class="gray">offset: 12, span: 12</div>
-  </van-col>
-</van-row>
-
-              </example-block><example-block title="在列元素之间增加间距">
-                <van-row gutter="20">
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
-</van-row>
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b layout {
-    .van-row {
-      padding: 0 20px;
-    }
-    .van-col {
-      margin-bottom: 10px;
-    }
-  }
-}
-
-.gray {
-    height: 30px;
-    line-height: 30px;
-    font-size: 12px;
-    background: #666;
-    color: #fff;
-    text-align: center;
-}
-.white {
-    height: 30px;
-    line-height: 30px;
-    font-size: 12px;
-    background: #fff;
-    color: #333;
-    text-align: center;
-}
-</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/lazyload.vue b/docs/examples-dist/lazyload.vue
deleted file mode 100644
index c8d1579c2..000000000
--- a/docs/examples-dist/lazyload.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template><section class="demo-lazyload"><h1 class="demo-title">Lazyload 图片懒加载</h1><example-block title="基础用法">
-                <ul class="image-list" ref="container">
-  <li v-for="(img, index) in imageList" :key="index">
-    <img class="lazy-img" v-lazy="img">
-  </li>
-</ul>
-
-
-
-              </example-block><example-block title="背景图懒加载">
-                <ul class="image-list" ref="container">
-  <li v-for="(img, index) in backgroundImageList" :key="index">
-    <div class="lazy-background" v-lazy:background-image="img"></div>
-  </li>
-</ul>
-
-
-
-              </example-block><example-block title="懒加载模块">
-                <lazy-component @show="handleComponentShow">
-  <ul class="image-list">
-    <li v-for="(img, index) in componentImageList" :key="index">
-      <img class="lazy-img" v-lazy="img">
-    </li>
-  </ul>
-</lazy-component>
-
-
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b lazyload {
-    .lazy-img {
-      display: block;
-      width: 100%;
-      height: auto;
-    }
-
-    .lazy-background {
-      height: 300px;
-      background-size: cover;
-      background-repeat: no-repeat;
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-export default {
-  data() {
-    return {
-      imageList: [
-        'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
-        'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL',
-        'https://img.yzcdn.cn/upload_files/2016/01/27/FpWD3kX18w8qjM6faH-4JqOWHsF4',
-        'https://img.yzcdn.cn/upload_files/2016/09/08/9ff28d555e5760fa830344f12efa0087.jpg',
-        'https://img.yzcdn.cn/upload_files/2016/11/13/FlZIeSgbSANSPkmUHttMjoIgY3cv.jpg',
-        'https://img.yzcdn.cn/upload_files/2016/12/12/FuxgsGPRnupGu_eaMuaR8W0DuSKp.jpeg'
-      ],
-      backgroundImageList: [
-        'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
-        'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
-      ],
-      componentImageList: [
-        'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
-        'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
-      ]
-    };
-  },
-
-  methods: {
-    handleComponentShow() {
-      console.log('component show');
-    }
-  }
-}
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/loading.vue b/docs/examples-dist/loading.vue
deleted file mode 100644
index 15f88434f..000000000
--- a/docs/examples-dist/loading.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template><section class="demo-loading"><h1 class="demo-title">Loading 加载</h1><example-block title="渐变深色spinner">
-                <van-loading class="some-customized-class"></van-loading>
-
-              </example-block><example-block title="渐变浅色spinner">
-                <div class="demo-loading__example demo-loading__example--with-bg">
-  <van-loading class="some-customized-class" :color="'white'"></van-loading>
-</div>
-
-
-
-              </example-block><example-block title="单色spinner">
-                <van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading>
-<van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading>
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b loading {
-    .van-loading {
-      margin: 0 auto;
-    }
-
-    .circle-loading {
-      margin: 20px auto;
-    }
-
-    .demo-loading__example--with-bg {
-      background-color: rgba(17, 17, 17, 0.7);
-      margin: 0 auto;
-      width: 120px;
-      padding: 45px 0;
-      border-radius: 10px;
-    }
-  }
-}
-</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/panel.vue b/docs/examples-dist/panel.vue
deleted file mode 100644
index c4a86f503..000000000
--- a/docs/examples-dist/panel.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template><section class="demo-panel"><h1 class="demo-title">Panel 面板</h1><example-block title="基础用法">
-                <van-panel title="标题" desc="标题描述" status="状态">
-  <div class="panel-content">
-    panel内容
-  </div>
-</van-panel>
-
-              </example-block><example-block title="高级用法">
-                <van-panel title="标题" desc="标题描述" status="状态">
-  <van-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-    <div class="van-card__row" slot="title">
-      <h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-      <span class="van-card__price">¥ 2.00</span>
-    </div>
-    <div class="van-card__row" slot="desc">
-      <h4 class="van-card__desc">商品sku</h4>
-      <span class="van-card__num">x 2</span>
-    </div>
-    <div class="van-card__footer" slot="footer">
-      <van-button size="mini">按钮一</van-button>
-      <van-button size="mini">按钮二</van-button>
-    </div>
-  </van-card>
-  <div class="van-panel-sum">
-    合计：<span>¥ 1999.90</span>
-  </div>
-  <div class="van-panel-buttons" slot="footer">
-    <van-button size="small">按钮一</van-button>
-    <van-button size="small" type="danger">按钮二</van-button>
-  </div>
-</van-panel>
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b panel {
-    .van-panel-sum {
-      background: #fff;
-      text-align: right;
-      font-size: 14px;
-      color: #333;
-      line-height: 30px;
-      padding-right: 15px;
-
-      span {
-        color: red;
-      }
-    }
-
-    .van-panel-buttons {
-      text-align: right;
-
-      .van-button {
-        margin-left: 5px;
-      }
-    }
-
-    .panel-content {
-      padding: 20px;
-    }
-  }
-}
-</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/picker.vue b/docs/examples-dist/picker.vue
deleted file mode 100644
index c530067af..000000000
--- a/docs/examples-dist/picker.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template><section class="demo-picker"><h1 class="demo-title">Picker 选择器</h1><example-block title="基础用法">
-                <van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
-
-
-
-              </example-block><example-block title="带toolbar的Picker">
-                <van-picker :title="title" :columns="pickerColumns" show-toolbar="" @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></van-picker>
-
-
-
-              </example-block></section></template>
-
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-const citys = {
-  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
-  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
-  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
-};
-
-export default {
-  data() {
-    return {
-      title: '地区选择',
-      pickerColumns: [
-        {
-          values: Object.keys(citys),
-          className: 'column1'
-        },
-        {
-          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
-          className: 'column2'
-        }
-      ]
-    };
-  },
-
-  methods: {
-    handlePickerChange(picker, values) {
-      picker.setColumnValues(1, citys[values[0]]);
-    },
-    handlePickerCancel() {
-      alert('picker cancel');
-    },
-    handlePickerConfirm() {
-      alert('picker confirm');
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/popup.vue b/docs/examples-dist/popup.vue
deleted file mode 100644
index 1db6b6907..000000000
--- a/docs/examples-dist/popup.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template><section class="demo-popup"><h1 class="demo-title">Popup 弹出菜单</h1><example-block title="基础用法">
-                <van-button @click="popupShow1 = true">从中间弹出popup</van-button>
-<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
-  从中间弹出popup
-</van-popup>
-
-
-
-              </example-block><example-block title="从不同位置弹出菜单">
-                <van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
-<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
-  <van-button @click="showDialog">弹出dialog</van-button>
-</van-popup>
-
-<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
-<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
-  更新成功
-</van-popup>
-
-<van-button @click="popupShow4 = true">从右方弹出popup</van-button>
-<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false">
-  <van-button @click.native="popupShow4 = false">关闭 popup</van-button>
-</van-popup>
-
-
-<van-button @click="popupShow5 = true">从左方弹出popup</van-button>
-<van-popup v-model="popupShow5" position="left" class="van-popup-5" :overlay="false">
-  <van-button @click.native="popupShow5 = false">关闭 popup</van-button>
-</van-popup>
-
-
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b popup {
-    .van-button {
-      margin: 10px 15px;
-    }
-
-    .van-popup-1 {
-      width: 60%;
-      box-sizing: border-box;
-      padding: 20px;
-      border-radius: 5px;
-      text-align: center;
-    }
-
-    .van-popup-2 {
-      width: 100%;
-      height: 200px;
-      box-sizing: border-box;
-      padding: 20px;
-    }
-
-    .van-popup-3 {
-      line-height: 50px;
-      text-align: center;
-      background-color: rgba(0, 0, 0, 0.701961);
-      color: #fff;
-    }
-
-    .van-popup-4,
-    .van-popup-5 {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-import MobileComputed from 'components/mobile-computed';
-import Dialog from 'packages/dialog';
-
-export default {
-  mixins: [MobileComputed],
-
-  data() {
-    return {
-      popupShow1: false,
-      popupShow2: false,
-      popupShow3: false,
-      popupShow4: false,
-      popupShow5: false
-    }
-  },
-
-  watch: {
-    popupShow3(val) {
-      if (val) {
-        setTimeout(() => {
-          this.popupShow3 = false;
-        }, 2000);
-      }
-    }
-  },
-
-  methods: {
-    showDialog() {
-      Dialog.confirm({
-        title: 'confirm标题',
-        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      }).then((action) => {
-        console.log(action);
-      }, (error) => {
-        console.log(error);
-      });
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/progress.vue b/docs/examples-dist/progress.vue
deleted file mode 100644
index bdc489ae2..000000000
--- a/docs/examples-dist/progress.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template><section class="demo-progress"><h1 class="demo-title">Progress 进度条</h1><example-block title="基础用法">
-                <div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
-</div>
-
-              </example-block><example-block title="Inactive">
-                <div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" inactive="" :percentage="0"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo2" inactive="" :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" inactive="" :percentage="100"></van-progress>
-</div>
-
-              </example-block><example-block title="自定义颜色和文字">
-                <div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
-</div>
-
-              </example-block></section></template>
-<style>
-  @component-namespace demo {
-    @b progress {
-      @e wrapper {
-        padding: 5px;
-        margin: 20px 10px;
-      }
-    }
-  } 
-</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/quantity.vue b/docs/examples-dist/quantity.vue
deleted file mode 100644
index e2d0ddb94..000000000
--- a/docs/examples-dist/quantity.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template><section class="demo-quantity"><h1 class="demo-title">Quantity 数量选择</h1><example-block title="基础用法">
-                <van-quantity v-model="quantity1"></van-quantity>
-<p class="curr-quantity">当前值：{{ quantity1 }}</p>
-
-              </example-block><example-block title="禁用Quantity">
-                <van-quantity v-model="quantity1" disabled></van-quantity>
-
-              </example-block><example-block title="高级用法">
-                <van-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></van-quantity>
-<p class="curr-quantity">当前值：{{ quantity2 || 9 }}</p>
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b quantity {
-    .van-quantity {
-      margin-left: 15px;
-    }
-
-    .curr-quantity {
-      margin: 15px;
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-export default {
-  data() {
-    return {
-      quantity1: 1,
-      quantity2: null,
-    };
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/radio.vue b/docs/examples-dist/radio.vue
deleted file mode 100644
index 978319c8a..000000000
--- a/docs/examples-dist/radio.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template><section class="demo-radio"><h1 class="demo-title">Radio 单选框</h1><example-block title="基础用法">
-                <div class="van-radios">
-  <van-radio name="1" v-model="radio1">单选框1</van-radio>
-  <van-radio name="2" v-model="radio1">单选框2</van-radio>
-</div>
-
-
-
-              </example-block><example-block title="禁用状态">
-                <div class="van-radios">
-  <van-radio name="1" v-model="radio2" disabled>未选中禁用</van-radio>
-  <van-radio name="2" v-model="radio2" disabled>选中且禁用</van-radio>
-</div>
-
-
-
-              </example-block><example-block title="radio组">
-                <div class="van-radios">
-  <van-radio-group v-model="radio3">
-    <van-radio name="1">单选框1</van-radio>
-    <van-radio name="2">单选框2</van-radio>
-  </van-radio-group>
-</div>
-  
-
-
-              </example-block><example-block title="与Cell组件一起使用">
-                <van-radio-group v-model="radio4">
-  <van-cell-group>
-    <van-cell><van-radio name="1">单选框1</van-radio></van-cell>
-    <van-cell><van-radio name="2">单选框2</van-radio></van-cell>
-  </van-cell-group>
-</van-radio-group>
-
-
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b radio {
-    .van-radios {
-      padding: 0 20px;
-
-      .van-radio {
-        margin: 10px 0;
-      }
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-export default {
-  data() {
-    return {
-      radio1: '1',
-      radio2: '2',
-      radio3: '1',
-      radio4: '1'
-    };
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/search.vue b/docs/examples-dist/search.vue
deleted file mode 100644
index 0a05cfb6e..000000000
--- a/docs/examples-dist/search.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template><section class="demo-search"><h1 class="demo-title">Search 搜索</h1><example-block title="基础用法">
-                <van-search placeholder="商品名称" @search="goSearch"></van-search>
-
-
-
-              </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>
-
-
-
-              </example-block></section></template>
-
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-export default {
-  methods: {
-    goSearch(value) {
-      alert(value)
-    },
-    handleChange(value) {
-      console.log(value);
-    },
-    handleCancel() {
-      alert('cancel');
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/steps.vue b/docs/examples-dist/steps.vue
deleted file mode 100644
index 735c128fb..000000000
--- a/docs/examples-dist/steps.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template><section class="demo-steps"><h1 class="demo-title">Steps 步骤条</h1><example-block title="基础用法">
-                <van-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
-  <van-step>买家下单</van-step>
-  <van-step>商家接单</van-step>
-  <van-step>买家提货</van-step>
-  <van-step>交易完成</van-step>
-</van-steps>
-
-<van-button @click="nextStep">下一步</van-button>
-
-
-
-              </example-block><example-block title="只显示步骤条">
-                <van-steps :active="active">
-  <van-step>买家下单</van-step>
-  <van-step>商家接单</van-step>
-  <van-step>买家提货</van-step>
-  <van-step>交易完成</van-step>
-</van-steps>
-
-              </example-block><example-block title="只显示步骤条">
-                <van-steps direction="vertical" :active="0" active-color="#f60">
-  <van-step>
-    <h3>【城市】最新的物流状态之类的表述哈哈哈哈</h3>
-    <p>2016-07-12 12:12:12</p>
-  </van-step>
-  <van-step>
-    <h3>【城市】已经过了的物流状态我是折行我是折行我是折行联系电话：158630099999</h3>
-    <p>2016-07-12 12:12:12</p>
-  </van-step>
-  <van-step>
-    <h3>未发货</h3>
-    <p>2016-07-12 12:12:12</p>
-  </van-step>
-</van-steps>
-
-              </example-block><example-block title="高级用法">
-                <van-steps :active="active" title="等待商家发货">
-  <van-icon slot="icon" name="like"></van-icon>
-  <p slot="message-extra">流程</p>
-  <van-step>买家下单</van-step>
-  <van-step>商家接单</van-step>
-  <van-step>买家提货</van-step>
-  <van-step>交易完成</van-step>  
-</van-steps>
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b steps {
-    .steps-success {
-      color: #06bf04;
-    }
-
-    .van-button {
-      margin: 15px 0 0 15px;
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-export default {
-  data() {
-    return {
-      active: 0
-    };
-  },
-
-  methods: {
-    nextStep() {
-      if (++this.active > 3) this.active = 0;
-    }
-  }
-}
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/swipe.vue b/docs/examples-dist/swipe.vue
deleted file mode 100644
index 338fdf8ba..000000000
--- a/docs/examples-dist/swipe.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
-                <van-swipe>
-  <van-swipe-item v-for="(img, index) in images" :key="index">
-    <a href="https://youzan.com" target="_blank">
-      <img v-lazy="img" alt="">
-    </a>
-  </van-swipe-item>
-</van-swipe>
-
-
-
-              </example-block><example-block title="自动轮播">
-                <van-swipe auto-play="" @pagechange:end="handlePageEnd">
-  <van-swipe-item v-for="(img, index) in autoImages" :key="index">
-    <img v-lazy="img" alt="">
-  </van-swipe-item>
-</van-swipe>
-
-
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b swipe {
-    .van-swipe {
-      height: 200px;
-
-      img {
-        width: 100%;
-      }
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-export default {
-  data() {
-    return {
-      autoImages: [
-        'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
-        'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
-      ],
-      images: [
-        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
-      ]
-    };
-  },
-
-  methods: {
-    handlePageEnd(page, index) {
-      console.log(page, index);
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/switch.vue b/docs/examples-dist/switch.vue
deleted file mode 100644
index 4026260c3..000000000
--- a/docs/examples-dist/switch.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template><section class="demo-switch"><h1 class="demo-title">Switch 开关</h1><example-block title="基础用法">
-                <van-row>
-  <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchState1"></van-switch>
-    <div class="demo-switch__text">{{ switchState1 ? ' 打开' : '关闭' }}</div>
-  </van-col>
-  <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
-    <div class="demo-switch__text">{{ switchState2 ? ' 打开' : '关闭' }}</div>
-  </van-col>
-</van-row>
-
-
-
-
-
-              </example-block><example-block title="禁用状态">
-                <van-row>
-  <van-col span="12">
-    <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></van-switch>
-    <div class="demo-switch__text">关闭</div>
-  </van-col>
-</van-row>
-
-
-
-              </example-block><example-block title="loading状态">
-                <van-row>
-  <van-col span="12">
-    <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=""></van-switch>
-    <div class="demo-switch__text">关闭</div>
-  </van-col>
-</van-row>
-
-
-
-              </example-block></section></template>
-<style>
-  @component-namespace demo {
-    @b switch {
-      .van-switch {
-        float: left;
-        margin: 0 15px;
-      }
-
-      @e text {
-        display: inline-block;
-        line-height: 32px;
-        float: left;
-        font-size: 14px;
-        color: #333;
-      }
-    }
-  }
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-import Dialog from 'packages/dialog';
-
-export default {
-  data() {
-    return {
-      switchState1: true,
-      switchState2: false,
-      switchStateTrue: true,
-      switchStateFalse: false
-    };
-  },
-  methods: {
-    updateState(newState) {
-      const state = newState ? '打开' : '关闭';
-      Dialog.confirm({
-        title: '提醒',
-        message: '是否' + state + '开关？'
-      }).then((action) => {
-        this.switchState2 = newState;
-      }, (error) => {});
-    }
-  }
-};  
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/tab.vue b/docs/examples-dist/tab.vue
deleted file mode 100644
index fa8534e5d..000000000
--- a/docs/examples-dist/tab.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template><section class="demo-tab"><h1 class="demo-title">Tab 标签</h1><example-block title="基础用法">
-                <van-tabs>
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-</van-tabs>
-
-              </example-block><example-block title="基础用法">
-                <van-tabs :active="active">
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-</van-tabs>
-
-              </example-block><example-block title="设置切换tab的动画时间">
-                <van-tabs :duration="0.6">
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-</van-tabs>
-
-              </example-block><example-block title="多于4个tab时">
-                <van-tabs>
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-  <van-tab title="选项五">内容五</van-tab>
-  <van-tab title="选项六">内容六</van-tab>
-  <van-tab title="选项七">内容七</van-tab>
-  <van-tab title="选项八">内容八</van-tab>
-</van-tabs>
-
-              </example-block><example-block title="禁用tab">
-                <van-tabs>
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-</van-tabs>
-
-
-
-              </example-block><example-block title="card样式">
-                <van-tabs type="card">
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-</van-tabs>
-
-              </example-block><example-block title="自定义样式">
-                <van-tabs active="2" class="custom-tabwrap">
-    <van-tab title="选项一" class="custom-pane">内容一</van-tab>
-    <van-tab title="选项二" class="custom-pane">内容二</van-tab>
-    <van-tab title="选项三" class="custom-pane">内容三</van-tab>
-    <van-tab title="选项四" class="custom-pane">内容四</van-tab>
-</van-tabs>
-
-
-
-              </example-block><example-block title="click事件">
-                <van-tabs @click="handleTabClick">
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-</van-tabs>
-
-
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b tab {
-    .van-tab__pane {
-      background-color: #fff;
-      padding: 20px;
-    }
-
-    .van-tabs--card .van-tab__pane {
-      background-color: transparent;
-    }
-
-    .custom-tabwrap .van-tab-active {
-      color: #20a0ff;
-    }
-    .custom-tabwrap .van-tabs-nav-bar {
-      background: #20a0ff;
-    }
-    .custom-pane {
-      text-align: center;
-      height: 50px;
-      line-height: 50px;
-    }
-  }
-}
-</style><style>
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-  .custom-pane {
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-  }
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-export default {
-  data() {
-    return {
-      active: 2
-    };
-  },
-  mounted() {
-    setTimeout(() => {
-      this.active = 3;
-    }, 1000);
-  },
-  methods: {
-    popalert() {
-      alert('haha')
-    },
-
-    handleTabClick(index) {
-      alert(index);
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/tag.vue b/docs/examples-dist/tag.vue
deleted file mode 100644
index 407388999..000000000
--- a/docs/examples-dist/tag.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template><section class="demo-tag"><h1 class="demo-title">Tag 标记</h1><example-block title="基础用法">
-                <div class="tags-container">
-  <van-tag>返现</van-tag>
-</div>
-<div class="tags-container">
-  <van-tag type="danger">返现</van-tag>
-  <van-tag type="success">四字标签</van-tag>
-  <van-tag type="primary">一</van-tag>
-</div>
-
-              </example-block><example-block title="高级用法">
-                <div class="tags-container">
-  <van-tag>返现</van-tag>
-  <van-tag plain="">返现</van-tag>
-</div>
-<div class="tags-container">
-  <van-tag type="danger">返现</van-tag>
-  <van-tag plain="" type="danger">返现</van-tag>
-</div>
-<div class="tags-container">
-  <van-tag type="primary">返现</van-tag>
-  <van-tag plain="" type="primary">返现</van-tag>
-</div>
-<div class="tags-container">
-  <van-tag type="success">返现</van-tag>
-  <van-tag plain="" type="success">返现</van-tag>
-</div>
-
-              </example-block></section></template>
-<style>
-.tags-container {
-  padding: 5px 15px;
-
-  .van-tag + .van-tag {
-    margin-left: 10px;
-  }
-}
-</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/toast.vue b/docs/examples-dist/toast.vue
deleted file mode 100644
index 918f64275..000000000
--- a/docs/examples-dist/toast.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template><section class="demo-toast"><h1 class="demo-title">Toast 轻提示</h1><example-block title="基础用法">
-                <van-button @click="showSimpleToast">普通文字提示</van-button>
-<van-button @click="showLoadingToast">加载Toast</van-button>
-<van-button @click="showSuccessToast">成功</van-button>
-<van-button @click="showFailToast">失败</van-button>
-<van-button @click="showForbidClickToast">背景不能点击</van-button>
-<van-button @click="showCustomizedToast(5000)">倒数5秒</van-button>
-
-
-
-              </example-block><example-block title="手动关闭">
-                <van-button @click="showToast">打开</van-button>
-<van-button @click="closeToast">关闭</van-button>
-
-
-
-              </example-block><example-block title="手动关闭">
-                <van-button @click="showHtmlToast">打开</van-button>
-
-
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b toast {
-    .van-button {
-      margin: 15px;
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-import { Toast } from 'src/index';
-
-export default {
-  methods: {
-    showSimpleToast() {
-      Toast('我是提示文案，建议不超过十五字~');
-    },
-    showLoadingToast() {
-      Toast.loading();
-    },
-    showSuccessToast() {
-      Toast.success('成功文案');
-    },
-    showFailToast() {
-      Toast.fail('失败文案');
-    },
-    showForbidClickToast() {
-      Toast({
-        message: '背景不能点击',
-        forbidClick: true
-      })
-    },
-    showCustomizedToast(duration) {
-      let leftSec = duration / 1000;
-      let toast = Toast({
-        duration: duration + 1000,
-        type: 'success',
-        message: leftSec.toString()
-      });
-      const id = window.setInterval(() => {
-        if (leftSec <= 1) {
-          window.clearInterval(id);
-          toast.message = '跳转中...'
-          return;
-        }
-        toast.message = (--leftSec).toString();
-      }, 1000);
-    },
-    showToast() {
-      this.toast = Toast('我是提示文案，建议不超过十五字~');
-    },
-    closeToast() {
-      this.toast.clear();
-    },
-    showHtmlToast() {
-      Toast({
-        type: 'html',
-        message: '<em>HTML<em>'
-      })
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/uploader.vue b/docs/examples-dist/uploader.vue
deleted file mode 100644
index ddeb29917..000000000
--- a/docs/examples-dist/uploader.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template><section class="demo-uploader"><h1 class="demo-title">Uploader 图片上传</h1><example-block title="基础用法">
-                <div class="uploader-container">
-  <van-uploader :after-read="logContent">
-    <van-icon name="photograph"></van-icon>
-  </van-uploader>
-</div>
-
-
-
-              </example-block></section></template>
-<style>
-.uploader-container {
-  padding: 5px 15px;
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-export default {
-  methods: {
-    logContent(file) {
-      console.log(file)
-    }
-  }
-};  
-</script>
\ No newline at end of file
diff --git a/docs/examples-dist/waterfall.vue b/docs/examples-dist/waterfall.vue
deleted file mode 100644
index 3a9951243..000000000
--- a/docs/examples-dist/waterfall.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template><section class="demo-waterfall"><h1 class="demo-title">Waterfall 瀑布流</h1><example-block title="基础用法">
-                <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, index) in list" :key="index" style="text-align: center;">
-      {{ item }}
-    </div>
-    <van-loading v-if="loading" :type="'circle'" :color="'black'"></van-loading>
-  </div>
-</div>
-
-              </example-block></section></template>
-<style>
-@component-namespace demo {
-  @b waterfall {
-    .waterfall {
-      max-height: 360px;
-      overflow: scroll;
-      border-top: 1px solid #e5e5e5;
-    }
-    .waterfall-item {
-      line-height: 50px;
-      border-bottom: 1px solid #e5e5e5;
-      background: #fff;
-    }
-    .page-desc {
-      padding: 5px 0;
-      line-height: 1.4;
-      font-size: 14px;
-      text-align: center;
-      color: #666;
-    }
-    .van-loading {
-      margin: 10px auto;
-    }
-  }
-}
-</style>
-<script>
-import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
-export default {
-  data() {
-    return {
-      list: [1, 2, 3, 4, 5],
-      loading: false,
-      finished: false
-    };
-  },
-  methods: {
-    loadMore() {
-      if (this.list.length >= 200) {
-        this.finished = true;
-        return;
-      }
-
-      this.loading = true;
-      setTimeout(() => {
-        let lastNumber = this.list[this.list.length - 1];
-        for (let i = 0; i < 5; i ++) {
-          lastNumber += 1;
-          this.list.push(lastNumber);
-        }
-        this.loading = false;
-      }, 2000);
-    }
-  },
-  computed: {
-    isWaterfallDisabled: function() {
-      return this.loading || this.finished;
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
index 82a0a1b8a..74d652d65 100644
--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@@ -77,6 +77,7 @@ export default {
 | thumb | 左侧图片 | `string`  |          |          |
 | title | 标题 | `string`  |          |          |
 | desc | 描述 | `string`  |          |          |
+| centered | 内容是否垂直居中 | `string`  | `false` |          |
 
 
 ### Slot
diff --git a/docs/examples-docs/changelog.md b/docs/examples-docs/changelog.md
new file mode 100644
index 000000000..4f4aba483
--- /dev/null
+++ b/docs/examples-docs/changelog.md
@@ -0,0 +1,182 @@
+## 更新日志
+
+## [v0.6.5](https://github.com/youzan/vant/tree/v0.6.5) (2017-07-11)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.6.4...v0.6.5)
+
+**非兼容更新和新特性:**
+
+- tabs组件支持滑动 [\#52](https://github.com/youzan/vant/pull/52) ([cookfront](https://github.com/cookfront))
+
+**处理的 Issue:**
+
+- 有计划都生成vue版本吗 [\#50](https://github.com/youzan/vant/issues/50)
+
+## [v0.6.4](https://github.com/youzan/vant/tree/v0.6.4) (2017-07-06)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.6.3...v0.6.4)
+
+**非兼容更新和新特性:**
+
+- src/utils目录支持SSR [\#51](https://github.com/youzan/vant/pull/51) ([cookfront](https://github.com/cookfront))
+
+## [v0.6.3](https://github.com/youzan/vant/tree/v0.6.3) (2017-07-04)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.6.2...v0.6.3)
+
+**非兼容更新和新特性:**
+
+- 步骤条组件新增direction和activeColor属性，增加了竖的步骤条 [\#49](https://github.com/youzan/vant/pull/49) ([cookfront](https://github.com/cookfront))
+- Card component supoort thumb slot，use flex layout [\#48](https://github.com/youzan/vant/pull/48) ([chenjiahan](https://github.com/chenjiahan))
+
+**修复:**
+
+- 修复人民币符号在ios显示问题 [\#44](https://github.com/youzan/vant/pull/44) ([w91](https://github.com/w91))
+
+**处理的 Issue:**
+
+- goods-action 文档有误 [\#47](https://github.com/youzan/vant/issues/47)
+
+## [v0.6.2](https://github.com/youzan/vant/tree/v0.6.2) (2017-06-26)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.6.1...v0.6.2)
+
+**非兼容更新和新特性:**
+
+- 新增icon、filed组件新增time类型和Dialog组件默认文案修改 [\#43](https://github.com/youzan/vant/pull/43) ([cookfront](https://github.com/cookfront))
+
+## [v0.6.1](https://github.com/youzan/vant/tree/v0.6.1) (2017-06-19)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.6.0...v0.6.1)
+
+**修复:**
+
+- 新增icon和修复toast样式问题 [\#42](https://github.com/youzan/vant/pull/42) ([cookfront](https://github.com/cookfront))
+
+## [v0.6.0](https://github.com/youzan/vant/tree/v0.6.0) (2017-06-15)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.5.12...v0.6.0)
+
+**非兼容更新和新特性:**
+
+- Search组件新增微杂志样式 [\#38](https://github.com/youzan/vant/pull/38) ([cookfront](https://github.com/cookfront))
+- 支持SSR、升级Vue版本和增加新的icon [\#40](https://github.com/youzan/vant/pull/40) ([cookfront](https://github.com/cookfront))
+- 增加cell swipe组件 [\#39](https://github.com/youzan/vant/pull/39) ([tsxuehu](https://github.com/tsxuehu))
+
+## [v0.5.12](https://github.com/youzan/vant/tree/v0.5.12) (2017-06-02)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.5.11...v0.5.12)
+
+**处理的 Issue:**
+
+- 业务组件的cap-goods-list出现问题 [\#36](https://github.com/youzan/vant/issues/36)
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- utils/scroll [\#37](https://github.com/youzan/vant/pull/37) ([pangxie1991](https://github.com/pangxie1991))
+
+## [v0.5.11](https://github.com/youzan/vant/tree/v0.5.11) (2017-05-25)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.5.10...v0.5.11)
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- 移除postcss-reset [\#35](https://github.com/youzan/vant/pull/35) ([cookfront](https://github.com/cookfront))
+
+## [v0.5.10](https://github.com/youzan/vant/tree/v0.5.10) (2017-05-25)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.5.9...v0.5.10)
+
+## [v0.5.9](https://github.com/youzan/vant/tree/v0.5.9) (2017-05-25)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.5.8...v0.5.9)
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- 新增微信导航icon [\#34](https://github.com/youzan/vant/pull/34) ([cookfront](https://github.com/cookfront))
+
+## [v0.5.8](https://github.com/youzan/vant/tree/v0.5.8) (2017-05-25)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.5.7...v0.5.8)
+
+**修复:**
+
+- 修复长按图片后，图片会隐藏问题 [\#32](https://github.com/youzan/vant/pull/32) ([w91](https://github.com/w91))
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- 新增微信导航icon [\#33](https://github.com/youzan/vant/pull/33) ([cookfront](https://github.com/cookfront))
+
+## [v0.5.7](https://github.com/youzan/vant/tree/v0.5.7) (2017-05-19)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.5.6...v0.5.7)
+
+**非兼容更新和新特性:**
+
+- picker 增加 title 显示 [\#30](https://github.com/youzan/vant/pull/30) ([pangxie1991](https://github.com/pangxie1991))
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- 更新reset中body背景色 [\#31](https://github.com/youzan/vant/pull/31) ([w91](https://github.com/w91))
+
+## [v0.5.6](https://github.com/youzan/vant/tree/v0.5.6) (2017-05-15)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.5.4...v0.5.6)
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- 添加两个新的icon [\#29](https://github.com/youzan/vant/pull/29) ([cookfront](https://github.com/cookfront))
+- 改变打包出来的amd模块，增加amd模块的名字 [\#28](https://github.com/youzan/vant/pull/28) ([pangxie1991](https://github.com/pangxie1991))
+
+## [v0.5.4](https://github.com/youzan/vant/tree/v0.5.4) (2017-05-09)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.5.3...v0.5.4)
+
+**修复:**
+
+- 修复：添加reset.css和cell加上right-icon的slot [\#27](https://github.com/youzan/vant/pull/27) ([cookfront](https://github.com/cookfront))
+- 修复：cell同时设置title和label时，value不居中 [\#26](https://github.com/youzan/vant/pull/26) ([cookfront](https://github.com/cookfront))
+- 修复：popup的zIndex转换为number [\#24](https://github.com/youzan/vant/pull/24) ([cookfront](https://github.com/cookfront))
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- fix bugs and add new features [\#25](https://github.com/youzan/vant/pull/25) ([radicalviva](https://github.com/radicalviva))
+
+## [v0.5.3](https://github.com/youzan/vant/tree/v0.5.3) (2017-04-27)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.5.2...v0.5.3)
+
+**修复:**
+
+- 修复：picker中值变了后未更新picker-colum中的值 [\#23](https://github.com/youzan/vant/pull/23) ([cookfront](https://github.com/cookfront))
+
+## [v0.5.2](https://github.com/youzan/vant/tree/v0.5.2) (2017-04-26)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.5.1...v0.5.2)
+
+**处理的 Issue:**
+
+- does it render UI Natively just like React - Native or  like ionic ? [\#15](https://github.com/youzan/vant/issues/15)
+- give me an english version of this :  https://www.youzanyun.com/zanui/react/guides/install [\#14](https://github.com/youzan/vant/issues/14)
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- 修复：webpack打包修复 [\#21](https://github.com/youzan/vant/pull/21) ([cookfront](https://github.com/cookfront))
+- unit test: picker [\#20](https://github.com/youzan/vant/pull/20) ([cookfront](https://github.com/cookfront))
+- Fix: 修复toast关闭时未移除Dom节点，以及补上单元测试 [\#19](https://github.com/youzan/vant/pull/19) ([cookfront](https://github.com/cookfront))
+- tabs 组件修改 [\#18](https://github.com/youzan/vant/pull/18) ([pangxie1991](https://github.com/pangxie1991))
+- 补充 Col & Row 测试用例 [\#16](https://github.com/youzan/vant/pull/16) ([w91](https://github.com/w91))
+- 单元测试 排除src/目录 [\#13](https://github.com/youzan/vant/pull/13) ([pangxie1991](https://github.com/pangxie1991))
+- 添加单元测试 [\#12](https://github.com/youzan/vant/pull/12) ([cookfront](https://github.com/cookfront))
+- test 环境不跑 PhantomJS [\#11](https://github.com/youzan/vant/pull/11) ([pangxie1991](https://github.com/pangxie1991))
+- 修改 unit test 的配置 [\#10](https://github.com/youzan/vant/pull/10) ([pangxie1991](https://github.com/pangxie1991))
+- unit test: uploader [\#9](https://github.com/youzan/vant/pull/9) ([tsxuehu](https://github.com/tsxuehu))
+- 文档页样式优化和打包配置优化 [\#8](https://github.com/youzan/vant/pull/8) ([cookfront](https://github.com/cookfront))
+- 修复表单组件样式和单元测试用例 [\#7](https://github.com/youzan/vant/pull/7) ([cookfront](https://github.com/cookfront))
+- 文档小细节优化 [\#6](https://github.com/youzan/vant/pull/6) ([cookfront](https://github.com/cookfront))
+
+## [v0.5.1](https://github.com/youzan/vant/tree/v0.5.1) (2017-04-24)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.5.0...v0.5.1)
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- 文档细节优化，search、loading和dialog组件样式修复 [\#5](https://github.com/youzan/vant/pull/5) ([cookfront](https://github.com/cookfront))
+
+## [v0.5.0](https://github.com/youzan/vant/tree/v0.5.0) (2017-04-23)
+**处理的 Issue:**
+
+- 一些建议 [\#1](https://github.com/youzan/vant/issues/1)
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- use vue in amd & commonjs, use Vue in root [\#4](https://github.com/youzan/vant/pull/4) ([pangxie1991](https://github.com/pangxie1991))
+- 手机端样式细节调整，补充测试用例 [\#3](https://github.com/youzan/vant/pull/3) ([cookfront](https://github.com/cookfront))
+- 补充waterfall文档，依赖vue改为Vue [\#2](https://github.com/youzan/vant/pull/2) ([pangxie1991](https://github.com/pangxie1991))
+
+
+
+\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
\ No newline at end of file
diff --git a/docs/examples-docs/field.md b/docs/examples-docs/field.md
index c2223ff99..5dc74c679 100644
--- a/docs/examples-docs/field.md
+++ b/docs/examples-docs/field.md
@@ -14,6 +14,15 @@ export default {
     return {
       username: 'zhangmin'
     };
+  },
+  methods: {
+    onIconClick() {
+      this.username = '';
+    },
+
+    onFieldBlur() {
+      console.log('blured');
+    }
   }
 };
 </script>
@@ -62,7 +71,15 @@ export default {
 :::demo 基础用法
 ```html
 <van-cell-group>
-  <van-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></van-field>
+  <van-field
+    type="text"
+    label="用户名："
+    placeholder="请输入用户名"
+    v-model="username"
+    icon="clear"
+    :on-icon-click="onIconClick"
+    @blur="onFieldBlur"
+    required></van-field>
   <van-field type="password" label="密码：" placeholder="请输入密码" required></van-field>
   <van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
 </van-cell-group>
@@ -145,4 +162,6 @@ export default {
 | rows | textarea rows | `string`, `number`   |  |   |
 | cols | textarea cols | `string`, `number`  |  |   |
 | autosize | 自动调整高度(仅支持textarea) | `boolean`  | `false` |  `true`, `false` |
+| icon | 输入框尾部图标 | `string`  |  |  icon中支持的类型 |
+| onIconClick | 点击图标的回调函数 | `function`  |  |  |
 
diff --git a/docs/examples-docs/icon.md b/docs/examples-docs/icon.md
index 17dc41d98..f2d7d7079 100644
--- a/docs/examples-docs/icon.md
+++ b/docs/examples-docs/icon.md
@@ -58,7 +58,7 @@ export default {
 
 设置`name`属性为对应的图标名称即可：
 
-:::demo 所有Icon
+:::demo 基础用法
 ```html
 <van-icon name="qr-invalid" style="text-align: center"></van-icon>
 ```
diff --git a/docs/examples-docs/quickstart.md b/docs/examples-docs/quickstart.md
index 3636ce4f2..c0b202cc7 100644
--- a/docs/examples-docs/quickstart.md
+++ b/docs/examples-docs/quickstart.md
@@ -1,7 +1,8 @@
 ## Vant
 
-一套基于`Vue.js 2.0`的Mobile组件库
-<br>A Vue.js 2.0 Mobile UI
+一套基于`Vue.js 2.0`的 Mobile 组件库
+
+[查看业务组件库 Captain-UI](https://www.youzanyun.com/zanui/captain/component/quickstart)
 
 ### 安装
 
diff --git a/docs/src/ExamplesDocsApp.vue b/docs/src/ExamplesDocsApp.vue
index 19ad99e08..c8753bf7f 100644
--- a/docs/src/ExamplesDocsApp.vue
+++ b/docs/src/ExamplesDocsApp.vue
@@ -1,40 +1,30 @@
 <template>
   <div class="app">
-    <page-header></page-header>
-    <div class="main-content">
-      <div class="page-container clearfix">
-        <side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
-        <div class="page-content">
-          <router-view></router-view>
-          <footer-nav></footer-nav>
-        </div>
-      </div>
-    </div>
-    <page-footer></page-footer>
+    <zan-doc :simulator="simulatorSrc" :config="config">
+      <router-view></router-view>
+    </zan-doc>
   </div>
 </template>
 
 <script>
-import Vue from 'vue';
 import 'highlight.js/styles/color-brewer.css';
-import navConfig from './nav.config.js';
-import SideNav from './components/side-nav';
-import DemoBlock from './components/demo-block';
-import FooterNav from './components/footer-nav';
-import PageHeader from './components/page-header';
-import PageFooter from './components/page-footer';
-
-Vue.component('side-nav', SideNav);
-Vue.component('demo-block', DemoBlock);
-Vue.component('footer-nav', FooterNav);
-Vue.component('page-header', PageHeader);
-Vue.component('page-footer', PageFooter);
+import docConfig from './doc.config';
 
 export default {
   data() {
     return {
-      navConfig: navConfig
+      config: docConfig['zh-CN']
     };
+  },
+  computed: {
+    simulatorSrc() {
+      const dir = this.$route.path.split('/').pop();
+      if (dir === 'quickstart' || dir === 'changelog') {
+        return '/zanui/vue/examples';
+      } else {
+        return `/zanui/vue/examples/component/${dir}`;
+      }
+    }
   }
 };
 </script>
diff --git a/docs/src/components/demo-block.vue b/docs/src/components/demo-block.vue
index 50dfb211e..466594eaf 100644
--- a/docs/src/components/demo-block.vue
+++ b/docs/src/components/demo-block.vue
@@ -1,66 +1,15 @@
 <template>
-  <div class="demo-block" :class="blockClass">
-    <slot name="examples"></slot>
+  <zan-doc-block :class="`demo-${component}`">
     <slot name="highlight"></slot>
-  </div>
+  </zan-doc-block>
 </template>
 
 <script>
 export default {
   computed: {
-    blockClass() {
-      return `demo-${this.$route.path.split('/').pop()}`;
+    component() {
+      return this.$route.path.split('/').pop();
     }
   }
 };
 </script>
-
-<style>
-  .demo-block {
-    transition: .2s;
-    overflow: hidden;
-    margin-bottom: 20px;
-
-    code {
-      font-family: Menlo, Monaco, Consolas, Courier, monospace;
-      overflow: auto;
-      white-space: pre-wrap;
-    }
-
-    .examples {
-      width: 320px;
-      box-sizing: border-box;
-      padding: 10px 0;
-      min-height: 60px;
-      max-height: 500px;
-      overflow: auto;
-      background-color: #F8F8F8;
-      border: 1px solid #E5E5E5;
-      float: right;
-    }
-
-    .highlight {
-      box-sizing: border-box;
-      border: 1px solid #E5E5E5;
-      border-radius: 4px;
-      margin-right: 345px;
-
-      pre {
-        margin: 0;
-      }
-
-      code.hljs {
-        margin: 0;
-        border: none;
-        max-height: none;
-        border-radius: 0;
-        padding: 20px;
-        background-color: #F8F8F8;
-
-        &::before {
-          content: none;
-        }
-      }
-    }
-  }
-</style>
diff --git a/docs/src/components/demo-list.vue b/docs/src/components/demo-list.vue
index 301202bb9..87d9ecdd5 100644
--- a/docs/src/components/demo-list.vue
+++ b/docs/src/components/demo-list.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import navConfig from '../nav.config.js';
+import docConfig from '../doc.config.js';
 import MobileNav from './mobile-nav';
 
 export default {
@@ -21,7 +21,7 @@ export default {
     return {
       highlights: [],
       navState: [],
-      data: navConfig['zh-CN'],
+      data: docConfig['zh-CN'].nav,
       base: '/component'
     };
   },
diff --git a/docs/src/components/footer-nav.vue b/docs/src/components/footer-nav.vue
deleted file mode 100644
index 4fb190a15..000000000
--- a/docs/src/components/footer-nav.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <div class="footer-nav">
-    <a
-      href="javascript:void(0)"
-      v-if="leftNav"
-      class="footer-nav__link footer-nav__left"
-      @click="handleNavClick('prev')">
-      <van-icon name="arrow"></van-icon>
-      <span>{{ leftNav.title }}</span>
-    </a>
-    <a
-      href="javascript:void(0)"
-      v-if="rightNav"
-      class="footer-nav__link footer-nav__right"
-      @click="handleNavClick('next')">
-      <van-icon name="arrow"></van-icon>
-      <span>{{ rightNav.title }}</span>
-    </a>
-  </div>
-</template>
-
-<script>
-import navConfig from '../nav.config.js';
-
-export default {
-  data() {
-    return {
-      currentPath: null,
-      nav: [],
-      leftNav: null,
-      rightNav: null
-    };
-  },
-
-  watch: {
-    '$route.path'() {
-      this.setNav();
-      this.updateNav();
-    }
-  },
-
-  methods: {
-    setNav() {
-      let nav = navConfig['zh-CN'];
-      for (let i = 0; i < nav.length; i++) {
-        let navItem = nav[i];
-        if (!navItem.groups) {
-          this.nav.push(nav[i]);
-        } else {
-          for (let j = 0; j < navItem.groups.length; j++) {
-            this.nav = this.nav.concat(navItem.groups[j].list);
-          }
-        }
-      }
-    },
-
-    updateNav() {
-      let baseUrl = '/component';
-      let currentIndex;
-
-      this.currentPath = this.$route.path.slice(baseUrl.length);
-
-      for (let i = 0, len = this.nav.length; i < len; i++) {
-        if (this.nav[i].path === this.currentPath) {
-          currentIndex = i;
-          break;
-        }
-      }
-      this.leftNav = this.nav[currentIndex - 1];
-      this.rightNav = this.nav[currentIndex + 1];
-    },
-
-    handleNavClick(direction) {
-      this.$router.push(`/component${ direction === 'prev' ? this.leftNav.path : this.rightNav.path }`);
-    }
-  },
-
-  created() {
-    this.setNav();
-    this.updateNav();
-  }
-};
-</script>
-
-<style>
-@component-namespace footer {
-  @b nav {
-    padding: 24px 40px;
-    overflow: hidden;
-    border-top: 1px solid #e5e5e5;
-
-    @e link {
-      color: #3388FF;
-      overflow: hidden;
-      position: relative;
-      font-size: 20px;
-      line-height: 1.5;
-
-      .van-icon {
-        width: 20px;
-        font-size: 12px;
-        line-height: 20px;
-        border: 2px solid #3388FF;
-        border-radius: 50%;
-        text-align: center;
-        margin-top: 3px;
-      }
-    }
-
-    @e left {
-      float: left;
-
-      .van-icon {
-        float: left;
-        transform: rotate(180deg);
-        margin-right: 10px;
-      }
-    }
-
-    @e right {
-      float: right;
-
-      .van-icon {
-        float: right;
-        margin-left: 10px;
-      }
-    }
-  }
-}
-</style>
diff --git a/docs/src/components/page-footer.vue b/docs/src/components/page-footer.vue
deleted file mode 100644
index d840c518b..000000000
--- a/docs/src/components/page-footer.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div class="page-footer">
-    <ul class="page-footer__navs">
-      <li class="page-footer__item">
-        <a href="https://www.youzan.com/" class="page-footer__link" target="_blank">有赞官网</a>
-      </li>
-      <li class="page-footer__item">
-        <a href="https://www.youzanyun.com/" class="page-footer__link" target="_blank">有赞云</a>
-      </li>
-      <li class="page-footer__item">
-        <a href="https://job.youzan.com/" class="page-footer__link" target="_blank">加入我们</a>
-      </li>
-    </ul>
-    <p class="page-footer__copyright">
-      2012-{{ curYear }} © youzanyun.com -  浙公网安备 33010602004354号 增值电信业务经营许可证：浙B2-20140331 - 浙ICP备13037466号
-    </p>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      curYear: (new Date()).getFullYear()
-    };
-  }
-};
-</script>
-
-<style>
-@component-namespace page {
-  @b footer {
-    height: 72px;
-    margin-top: 40px;
-    background-color: #34383B;
-    display: flex;
-    justify-content: center;
-
-    @e item {
-      float: left;
-      margin: 0 20px;
-    }
-
-    @e link {
-      display: block;
-      color: #E5E5E5;
-      font-size: 12px;
-      line-height: 72px;
-    }
-
-    @e copyright {
-      color: #999;
-      font-size: 12px;
-      line-height: 72px;
-      margin-left: 50px;
-    }
-  }
-}
-</style>
diff --git a/docs/src/components/page-header.vue b/docs/src/components/page-header.vue
deleted file mode 100644
index f0cf42a77..000000000
--- a/docs/src/components/page-header.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-  <div class="page-header">
-    <div class="page-header__top">
-      <h1 class="page-header__logo">
-        <a href="https://www.youzanyun.com/zanui"></a>
-      </h1>
-      <ul class="page-header__navs">
-        <li class="page-header__item">
-          <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">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">Vant - 移动端</a>
-        </li>
-        <li class="page-header__item">
-          <a href="https://github.com/youzan/zanui-weapp" class="page-header__link">ZanUi-WeApp - 微信小程序</a>
-        </li>
-      </ul>
-    </div>
-    <ul class="page-header__subnavs" :class="{ 'page-header__subnavs--shadow': scrollTop > 0 }">
-      <li class="page-header__item">
-        <a href="https://www.youzanyun.com/zanui/vue" class="page-header__link page-header__link--active">基础组件</a>
-      </li>
-      <li class="page-header__item">
-        <a href="https://www.youzanyun.com/zanui/captain" class="page-header__link">业务组件</a>
-      </li>
-      <li class="page-header__item">
-        <span class="page-header__link">V{{ version }}</span>
-      </li>
-      <li class="page-header__item">
-        <a href="https://github.com/youzan/vant" class="page-header__github" target="_blank"></a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      version: window._global.version,
-      scrollTop: 0
-    };
-  },
-
-  mounted() {
-    const _this = this;
-    let timer;
-    window.addEventListener('scroll', () => {
-      clearTimeout(timer);
-      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
-      timer = setTimeout(() => {
-        _this.scrollTop = scrollTop;
-      }, 500);
-    });
-  }
-};
-</script>
-
-<style>
-@component-namespace page {
-  @b header {
-    position: fixed;
-    top: 0;
-    z-index: 1;
-    width: 100%;
-    
-    @e top {
-      overflow: hidden;
-      height: 80px;
-      background-color: #fbfbfb;
-      box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
-    }
-
-    @e logo {
-      float: left;
-
-      > a {
-        display: block;
-        width: 78px;
-        height: 20px;
-        background-image: url(https://img.yzcdn.cn/upload_files/2017/04/20/FjwR1mraVIqtHWb8YWDW_YzQ_Kh2.png);
-        background-size: contain;
-        background-repeat: no-repeat;
-        margin: 30px 0 0 20px;
-      }
-    }
-
-    @e navs {
-      float: right;
-    }
-
-    @e item {
-      float: left;
-      height: 50px;
-    }
-
-    @e subnavs {
-      line-height: 50px;
-      display: flex;
-      justify-content: center;
-      background-color: #f2f2f2;
-      position: relative;
-      z-index: -1;
-
-      @m shadow {
-        box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
-      }
-
-      a,
-      span {
-        line-height: 50px;
-      }
-    }
-
-    @e link {
-      display: block;
-      line-height: 80px;
-      color: #333;
-      font-size: 16px;
-      margin: 0 20px;
-
-      &:hover {
-        color: #3388FF;
-      }
-
-      @m active {
-        color: #3388FF;
-      }
-    }
-
-    @e github {
-      display: inline-block;
-      width: 22px;
-      height: 22px;
-      overflow: hidden;
-      background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fil9peDfgzvk3kj-oFCsElS4FS1x.png);
-      background-size: contain;
-      background-repeat: no-repeat;
-      margin: 14px 20px 0;
-    }
-  }
-}
-</style>
diff --git a/docs/src/components/side-nav.vue b/docs/src/components/side-nav.vue
deleted file mode 100644
index 98298acf4..000000000
--- a/docs/src/components/side-nav.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-  <div class="side-nav">
-    <ul>
-      <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
-          active-class="active"
-          :to="base + item.path"
-          exact
-          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, index) in item.children" :key="index">
-            <router-link
-              active-class="active"
-              :to="base + navItem.path"
-              v-text="navItem.title || navItem.name">
-            </router-link>
-          </li>
-        </ul>
-        <template v-if="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, index) in group.list">
-                <li
-                  :key="index"
-                  class="nav-item"
-                  v-if="!navItem.disabled">
-                  <router-link
-                    active-class="active"
-                    :to="base + navItem.path"
-                    v-text="navItem.title">
-                  </router-link>
-                </li>
-              </template>
-            </ul>
-          </div>
-        </template>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    data: Array,
-    base: {
-      type: String,
-      default: ''
-    }
-  },
-
-  methods: {
-    handleTitleClick(item) {
-      const firstGroup = item.groups && item.groups[0];
-      if (firstGroup && firstGroup.list && firstGroup.list.length !== 0) {
-        return this.$router.replace(this.base + firstGroup.list[0].path);
-      }
-    }
-  }
-};
-</script>
-
-<style lang="css">
-  .side-nav {
-    flex: 0 0 250px;
-    box-sizing: border-box;
-    padding: 40px 0;
-    border-right: 1px solid #e5e5e5;
-
-    li {
-      list-style: none;
-    }
-    ul {
-      padding: 0;
-      margin: 0;
-      overflow: hidden;
-    }
-
-    .nav-item {
-      a {
-        font-size: 16px;
-        color: #333;
-        line-height: 40px;
-        height: 40px;
-        margin: 0;
-        padding: 0;
-        text-decoration: none;
-        display: block;
-        position: relative;
-        transition: all .3s;
-        padding: 0 20px;
-
-        &.active {
-          color: #3388FF;
-          background-color: #F2F2F2;
-        }
-      }
-      .nav-item {
-        a {
-          display: block;
-          height: 40px;
-          line-height: 40px;
-          font-size: 14px;
-          padding-left: 44px;
-
-          &:hover {
-            color: #3388FF;
-          }
-        }
-      }
-    }
-    .nav-group__title {
-      font-size: 12px;
-      color: #666;
-      padding-left: 28px;
-      line-height: 26px;
-      margin-top: 10px;
-    }
-  }
-</style>
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
new file mode 100644
index 000000000..b58bf3a99
--- /dev/null
+++ b/docs/src/doc.config.js
@@ -0,0 +1,181 @@
+/* eslint-disable */
+module.exports = {
+  "zh-CN": {
+    header: {
+      '首页': 'https://www.youzanyun.com/zanui',
+      'PC端': 'https://www.youzanyun.com/zanui/react',
+      '移动端': 'https://www.youzanyun.com/zanui/vue',
+      '微信小程序': 'https://github.com/youzan/zanui-weapp'
+    },
+    footer: {
+      copyright: `2012-${(new Date()).getFullYear()} © youzanyun.com -  浙公网安备 33010602004354号 增值电信业务经营许可证：浙B2-20140331 - 浙ICP备13037466号`,
+      nav: {
+        '有赞官网': 'https://www.youzan.com/',
+        '有赞云': 'http://www.youzanyun.com/zanui',
+        '加入我们': 'https://job.youzan.com/'
+      }
+    },
+    nav: [
+      {
+        "name": "开发指南",
+        "groups": [
+          {
+            "list": [
+              {
+                "path": "/quickstart",
+                "title": "快速上手",
+                noExample: true
+              },
+              {
+                "path": "/changelog",
+                "title": "更新日志",
+                noExample: true
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "name": "Vant组件",
+        "showInMobile": true,
+        "groups": [
+          {
+            "groupName": "基础组件",
+            "list": [
+              {
+                "path": "/layout",
+                "title": "Layout 布局"
+              },
+              {
+                "path": "/button",
+                "title": "Button 按钮"
+              },
+              {
+                "path": "/icon",
+                "title": "Icon 图标"
+              },
+              {
+                "path": "/cell",
+                "title": "Cell 单元格"
+              },
+              {
+                "path": "/cell-swipe",
+                "title": "Cell Swipe 滑动单元格"
+              },
+              {
+                "path": "/progress",
+                "title": "Progress 进度条"
+              },
+              {
+                "path": "/card",
+                "title": "Card 图文组件"
+              },
+              {
+                "path": "/panel",
+                "title": "Panel 面板"
+              },
+              {
+                "path": "/loading",
+                "title": "Loading 加载"
+              },
+              {
+                "path": "/steps",
+                "title": "Steps 步骤条"
+              },
+              {
+                "path": "/tag",
+                "title": "Tag 标记"
+              },
+              {
+                "path": "/badge",
+                "title": "Badge 徽章"
+              },
+              {
+                "path": "/tab",
+                "title": "Tab 标签"
+              },
+              {
+                "path": "/popup",
+                "title": "Popup 弹出菜单"
+              },
+              {
+                "path": "/swipe",
+                "title": "Swipe 轮播"
+              },
+              {
+                "path": "/search",
+                "title": "Search 搜索"
+              },
+              {
+                "path": "/quantity",
+                "title": "Quantity 数量选择"
+              },
+              {
+                "path": "/waterfall",
+                "title": "Waterfall 瀑布流"
+              },
+              {
+                "path": "/image-preview",
+                "title": "ImagePreview 图片预览"
+              },
+              {
+                "path": "/lazyload",
+                "title": "Lazyload 图片懒加载"
+              }
+            ]
+          },
+          {
+            "groupName": "表单",
+            "list": [
+              {
+                "path": "/switch",
+                "title": "Switch 开关"
+              },
+              {
+                "path": "/field",
+                "title": "Field 输入框"
+              },
+              {
+                "path": "/radio",
+                "title": "Radio 单选框"
+              },
+              {
+                "path": "/checkbox",
+                "title": "Checkbox 复选框"
+              },
+              {
+                "path": "/uploader",
+                "title": "Uploader 图片上传"
+              }
+            ]
+          },
+          {
+            "groupName": "操作反馈",
+            "list": [
+              {
+                "path": "/actionsheet",
+                "title": "Actionsheet 行动按钮"
+              },
+              {
+                "path": "/toast",
+                "title": "Toast 轻提示"
+              },
+              {
+                "path": "/picker",
+                "title": "Picker 选择器"
+              },
+              {
+                "path": "/datetime-picker",
+                "title": "Datetime Picker 时间选择"
+              },
+              {
+                "path": "/dialog",
+                "title": "Dialog 弹出框"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/docs/src/examples.js b/docs/src/examples.js
index 3018f60f2..d6d0c5d6d 100644
--- a/docs/src/examples.js
+++ b/docs/src/examples.js
@@ -1,21 +1,21 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './ExamplesApp';
-import navConfig from './nav.config.js';
 import routes from './router.config';
 import ZanUI from 'src/index';
-
+import ZanDoc from 'zan-doc';
 import 'packages/vant-css/src/index.css';
 
 import DemoList from './components/demo-list.vue';
 
 Vue.use(ZanUI);
+Vue.use(ZanDoc);
 Vue.use(ZanUI.Lazyload, {
   lazyComponent: true
 });
 Vue.use(VueRouter);
 
-const routesConfig = routes(navConfig, true);
+const routesConfig = routes(true);
 routesConfig.push({
   path: '/',
   component: DemoList.default || DemoList
diff --git a/docs/src/index.js b/docs/src/index.js
index 14d173937..2f7c3b729 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -1,10 +1,11 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './ExamplesDocsApp';
-import navConfig from './nav.config.js';
 import routes from './router.config';
 import ZanUI from 'src/index.js';
+import ZanDoc from 'zan-doc';
 import packageJson from '../../package.json';
+import DemoBlock from './components/demo-block';
 
 const global = {
   version: packageJson.version
@@ -22,11 +23,13 @@ function isMobile() {
 
 Vue.use(VueRouter);
 Vue.use(ZanUI);
+Vue.use(ZanDoc);
 Vue.use(ZanUI.Lazyload, {
   lazyComponent: true
 });
+Vue.component('demo-block', DemoBlock);
 
-const routesConfig = routes(navConfig);
+const routesConfig = routes();
 routesConfig.push({
   path: '/',
   redirect: '/component/quickstart'
diff --git a/docs/src/nav.config.js b/docs/src/nav.config.js
deleted file mode 100644
index 6f155b732..000000000
--- a/docs/src/nav.config.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/* eslint-disable */
-module.exports = {
-  "zh-CN": [
-    {
-      "name": "开发指南",
-      "groups": [
-        {
-          "list": [
-            {
-              "path": "/quickstart",
-              "title": "快速上手"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "name": "Vant组件",
-      "showInMobile": true,
-      "groups": [
-        {
-          "groupName": "基础组件",
-          "list": [
-            {
-              "path": "/layout",
-              "title": "Layout 布局"
-            },
-            {
-              "path": "/button",
-              "title": "Button 按钮"
-            },
-            {
-              "path": "/icon",
-              "title": "Icon 图标"
-            },
-            {
-              "path": "/cell",
-              "title": "Cell 单元格"
-            },
-            {
-              "path": "/cell-swipe",
-              "title": "Cell Swipe 滑动单元格"
-            },
-            {
-              "path": "/progress",
-              "title": "Progress 进度条"
-            },
-            {
-              "path": "/card",
-              "title": "Card 图文组件"
-            },
-            {
-              "path": "/panel",
-              "title": "Panel 面板"
-            },
-            {
-              "path": "/loading",
-              "title": "Loading 加载"
-            },
-            {
-              "path": "/steps",
-              "title": "Steps 步骤条"
-            },
-            {
-              "path": "/tag",
-              "title": "Tag 标记"
-            },
-            {
-              "path": "/badge",
-              "title": "Badge 徽章"
-            },
-            {
-              "path": "/tab",
-              "title": "Tab 标签"
-            },
-            {
-              "path": "/popup",
-              "title": "Popup 弹出菜单"
-            },
-            {
-              "path": "/swipe",
-              "title": "Swipe 轮播"
-            },
-            {
-              "path": "/search",
-              "title": "Search 搜索"
-            },
-            {
-              "path": "/quantity",
-              "title": "Quantity 数量选择"
-            },
-            {
-              "path": "/waterfall",
-              "title": "Waterfall 瀑布流"
-            },
-            {
-              "path": "/image-preview",
-              "title": "ImagePreview 图片预览"
-            },
-            {
-              "path": "/lazyload",
-              "title": "Lazyload 图片懒加载"
-            }
-          ]
-        },
-        {
-          "groupName": "表单",
-          "list": [
-            {
-              "path": "/switch",
-              "title": "Switch 开关"
-            },
-            {
-              "path": "/field",
-              "title": "Field 输入框"
-            },
-            {
-              "path": "/radio",
-              "title": "Radio 单选框"
-            },
-            {
-              "path": "/checkbox",
-              "title": "Checkbox 复选框"
-            },
-            {
-              "path": "/uploader",
-              "title": "Uploader 图片上传"
-            }
-          ]
-        },
-        {
-          "groupName": "操作反馈",
-          "list": [
-            {
-              "path": "/actionsheet",
-              "title": "Actionsheet 行动按钮"
-            },
-            {
-              "path": "/toast",
-              "title": "Toast 轻提示"
-            },
-            {
-              "path": "/picker",
-              "title": "Picker 选择器"
-            },
-            {
-              "path": "/datetime-picker",
-              "title": "Datetime Picker 时间选择"
-            },
-            {
-              "path": "/dialog",
-              "title": "Dialog 弹出框"
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
diff --git a/docs/src/router.config.js b/docs/src/router.config.js
index 77c2502e9..19d7ad0a3 100644
--- a/docs/src/router.config.js
+++ b/docs/src/router.config.js
@@ -1,6 +1,7 @@
-const registerRoute = (navConfig, isExample) => {
+const navs = require('./doc.config')['zh-CN'].nav;
+
+const registerRoute = (isExample) => {
   let route = [];
-  let navs = navConfig['zh-CN'];
   navs.forEach(nav => {
     if (isExample && !nav.showInMobile) {
       return;
diff --git a/package.json b/package.json
index 1b06c7654..a984d1d87 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "有赞vue wap组件库",
   "main": "lib/vant.js",
   "style": "lib/vant-css/index.css",
@@ -134,6 +134,7 @@
     "webpack-dev-server": "^1.16.3",
     "webpack-merge": "^2.0.0",
     "webpack-node-externals": "^1.5.4",
-    "webpack-vendor-chunk-plugin": "^1.0.0"
+    "webpack-vendor-chunk-plugin": "^1.0.0",
+    "zan-doc": "^0.1.0"
   }
 }
diff --git a/packages/card/src/card.vue b/packages/card/src/card.vue
index 9860cbade..387b8f9cc 100644
--- a/packages/card/src/card.vue
+++ b/packages/card/src/card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['van-card', { 'van-card--center': !$slots.footer }]">
+  <div :class="['van-card', { 'van-card--center': centered }]">
     <div class="van-card__thumb">
       <slot name="thumb">
         <img :src="thumb" class="van-card__img" />
@@ -21,10 +21,12 @@
 <script>
 export default {
   name: 'van-card',
+
   props: {
     thumb: String,
     title: String,
-    desc: String
+    desc: String,
+    centered: Boolean
   }
 };
 </script>
diff --git a/packages/field/src/field.vue b/packages/field/src/field.vue
index cbc38a10b..f2c542e27 100644
--- a/packages/field/src/field.vue
+++ b/packages/field/src/field.vue
@@ -17,6 +17,7 @@
       class="van-field__control"
       v-model="currentValue"
       @focus="handleInputFocus"
+      @blur="handleInputBlur"
       :placeholder="placeholder"
       :maxlength="maxlength"
       :disabled="disabled"
@@ -30,23 +31,27 @@
       :value="currentValue"
       @input="handleInput"
       @focus="handleInputFocus"
+      @blur="handleInputBlur"
       :type="type"
       :placeholder="placeholder"
       :maxlength="maxlength"
       :disabled="disabled"
       :readonly="readonly">
+    <van-icon v-if="icon && currentValue" :name="icon" class="van-field__icon" @click="onIconClick"></van-icon>
   </van-cell>
 </template>
 
 <script>
 const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
 import vanCell from 'packages/cell';
+import vanIcon from 'packages/icon';
 
 export default {
   name: 'van-field',
 
   components: {
-    vanCell
+    vanCell,
+    vanIcon
   },
 
   props: {
@@ -71,6 +76,11 @@ export default {
     autosize: {
       type: Boolean,
       default: false
+    },
+    icon: String,
+    onIconClick: {
+      type: Function,
+      default: () => {}
     }
   },
 
@@ -107,6 +117,10 @@ export default {
 
     handleInputFocus() {
       this.$emit('focus');
+    },
+
+    handleInputBlur() {
+      this.$emit('blur');
     }
   }
 };
diff --git a/packages/vant-css/package.json b/packages/vant-css/package.json
index 2d1d27332..e0123460e 100644
--- a/packages/vant-css/package.json
+++ b/packages/vant-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vant-css",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "vant css.",
   "main": "lib/index.css",
   "style": "lib/index.css",
diff --git a/packages/vant-css/src/field.css b/packages/vant-css/src/field.css
index 2acaa8388..4cfa75a6d 100644
--- a/packages/vant-css/src/field.css
+++ b/packages/vant-css/src/field.css
@@ -1,6 +1,7 @@
 @import './common/var.css';
 @import './mixins/border_retina.css';
 @import './cell.css';
+@import './icon.css';
 
 @component-namespace van {
   @b field {
@@ -85,5 +86,13 @@
       resize: none;
       outline: 0;
     }
+
+    @e icon {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translate3d(0, -50%, 0);
+      padding: 10px;
+    }
   }
 }
diff --git a/packages/vant-css/src/switch.css b/packages/vant-css/src/switch.css
index 346bc03e5..2da558bca 100644
--- a/packages/vant-css/src/switch.css
+++ b/packages/vant-css/src/switch.css
@@ -1,7 +1,7 @@
 @import './mixins/border_retina.css';
 
 @component-namespace van {
-  @b switch { 
+  @b switch {
     height: 31px;
     width: 51px;
     display: inline-block;
@@ -24,6 +24,7 @@
       left: 1px;
       top: 1px;
       z-index: 2;
+      transition: transform .3s;
       &::after {
         @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
         border-radius: 27px;
diff --git a/src/index.js b/src/index.js
index 1e512bef2..e19e6e2e4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -83,7 +83,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 module.exports = {
   install,
-  version: '0.6.5',
+  version: '0.6.6',
   Button,
   Switch,
   Field,
diff --git a/yarn.lock b/yarn.lock
index a12b0deb4..e7756f407 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1116,19 +1116,7 @@ change-case@3.0.x:
     upper-case "^1.1.1"
     upper-case-first "^1.1.0"
 
-cheerio@^0.20.0:
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.20.0.tgz#5c710f2bab95653272842ba01c6ea61b3545ec35"
-  dependencies:
-    css-select "~1.2.0"
-    dom-serializer "~0.1.0"
-    entities "~1.1.1"
-    htmlparser2 "~3.8.1"
-    lodash "^4.1.0"
-  optionalDependencies:
-    jsdom "^7.0.2"
-
-cheerio@^0.22.0:
+cheerio@0.22.0, cheerio@^0.22.0:
   version "0.22.0"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.22.0.tgz#a9baa860a3f9b595a6b81b1a86873121ed3a269e"
   dependencies:
@@ -1149,6 +1137,18 @@ cheerio@^0.22.0:
     lodash.reject "^4.4.0"
     lodash.some "^4.4.0"
 
+cheerio@^0.20.0:
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.20.0.tgz#5c710f2bab95653272842ba01c6ea61b3545ec35"
+  dependencies:
+    css-select "~1.2.0"
+    dom-serializer "~0.1.0"
+    entities "~1.1.1"
+    htmlparser2 "~3.8.1"
+    lodash "^4.1.0"
+  optionalDependencies:
+    jsdom "^7.0.2"
+
 chokidar@^1.4.1, chokidar@^1.4.3, chokidar@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
@@ -4014,6 +4014,12 @@ liftoff@^2.1.0:
     rechoir "^0.6.2"
     resolve "^1.1.7"
 
+linkify-it@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.0.3.tgz#d94a4648f9b1c179d64fa97291268bdb6ce9434f"
+  dependencies:
+    uc.micro "^1.0.1"
+
 linkify-it@~1.2.2:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-1.2.4.tgz#0773526c317c8fd13bd534ee1d180ff88abf881a"
@@ -4384,11 +4390,21 @@ markdown-it@^6.0.5, markdown-it@^6.1.1:
     mdurl "~1.0.1"
     uc.micro "^1.0.1"
 
+markdown-it@^8.3.1:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.3.1.tgz#2f4b622948ccdc193d66f3ca2d43125ac4ac7323"
+  dependencies:
+    argparse "^1.0.7"
+    entities "~1.1.1"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.3"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.16"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9"
 
-mdurl@~1.0.1:
+mdurl@^1.0.1, mdurl@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
 
@@ -4626,6 +4642,10 @@ node-pre-gyp@^0.6.29:
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
+node-watch@^0.5.5:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/node-watch/-/node-watch-0.5.5.tgz#34865ba8bc6861ab086acdcc3403e40ed55c3274"
+
 nomnomnomnom@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/nomnomnomnom/-/nomnomnomnom-2.0.1.tgz#b2239f031c8d04da67e32836e1e3199e12f7a8e2"
@@ -6707,7 +6727,7 @@ typedarray@^0.0.6, typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-uc.micro@^1.0.1:
+uc.micro@^1.0.1, uc.micro@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.3.tgz#7ed50d5e0f9a9fb0a573379259f2a77458d50192"
 
@@ -7287,3 +7307,13 @@ yauzl@2.4.1:
 yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+
+zan-doc@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.1.0.tgz#6ea2aba808c39b35b9730899f000dbf05806cbad"
+  dependencies:
+    cheerio "0.22.0"
+    decamelize "^1.2.0"
+    markdown-it "^8.3.1"
+    markdown-it-container "^2.0.0"
+    node-watch "^0.5.5"