diff --git a/.eslintrc.js b/.eslintrc.js
index 15ae2f995..892f6e1db 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -44,7 +44,7 @@ module.exports = {
     'generator-star-spacing': [2, { 'before': true, 'after': true }],
     'handle-callback-err': [2, '^(err|error)$' ],
     'indent': [2, 2, { 'SwitchCase': 1 }],
-    'jsx-quotes': [2, 'prefer-single'],
+    'jsx-quotes': [2, 'prefer-double'],
     'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],
     'keyword-spacing': [2, { 'before': true, 'after': true }],
     'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],
diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index 3343ac7a6..b58e200be 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -3,6 +3,7 @@ var fs = require('fs');
 var render = require('json-templater/string');
 var uppercamelcase = require('uppercamelcase');
 var path = require('path');
+var chalk = require('chalk');
 
 var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
 var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
@@ -70,5 +71,5 @@ var template = render(MAIN_TEMPLATE, {
 });
 
 fs.writeFileSync(OUTPUT_PATH, template);
-console.log('[build entry] DONE:', OUTPUT_PATH);
+console.log(chalk.green('[build entry] DONE:' + OUTPUT_PATH));
 
diff --git a/build/genExamples.js b/build/genExamples.js
index 5db7e8244..3152b4f4d 100644
--- a/build/genExamples.js
+++ b/build/genExamples.js
@@ -3,8 +3,10 @@ var markdownItContainer = require('markdown-it-container');
 var fs = require('fs');
 var path = require('path');
 var cheerio = require('cheerio');
+var chalk = require('chalk');
 var striptags = require('./strip-tags');
-var Components = require('../components.json');
+var navs = require('../docs/src/nav.config.js');
+navs = navs['zh-CN'];
 
 var parser = markdownIt('default', {
   html: true
@@ -29,9 +31,9 @@ var renderVueTemplate = function (html, componentName) {
 
   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);');
+    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>';
+    script = '<script>\nimport Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>';
   }
 
   result = `<template><section class="demo-${componentName}"><h1 class="demo-title">${componentName}</h1>` + output['example-block'] + '</section></template>\n' +
@@ -69,18 +71,34 @@ parser.use(markdownItContainer, 'demo', {
 });
 
 var docsDir = path.resolve(__dirname, '../docs');
-for (var item in Components) {
-  var itemMdFile = `${docsDir}/examples-docs/${item}.md`;
+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}.md`).toString();
+  var itemMd = fs.readFileSync(`${docsDir}/examples-docs${item.path}.md`).toString();
   var content = parser.render(itemMd);
-  var result = renderVueTemplate(content, item);
+  var result = renderVueTemplate(content, item.path.slice(1));
 
-  var exampleVueName = `${docsDir}/examples-dist/${item}.vue`;
+  var exampleVueName = `${docsDir}/examples-dist/${item.path}.vue`;
 
+  // 新建一个文件
   if (!fs.existsSync(exampleVueName)) {
     fs.closeSync(fs.openSync(exampleVueName, 'w'));
   }
@@ -89,5 +107,5 @@ for (var item in Components) {
   });
 }
 
-console.log('generate examples success!');
+console.log(chalk.green('generate examples success!'));
 
diff --git a/build/webpack.config.js b/build/webpack.config.js
index 56b140900..32f2bf8d5 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -9,6 +9,7 @@ var getPoastcssPlugin = require('./utils/postcss_pipe');
 var ProgressBarPlugin = require('progress-bar-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 var StyleExtractPlugin;
 if (process.env.NODE_ENV === 'production') {
@@ -35,8 +36,8 @@ function wrap(render) {
 module.exports = {
   entry: {
     'vendor': ['vue', 'vue-router'],
-    'docs': './docs/index.js',
-    'examples': './docs/examples.js'
+    'zan-docs': './docs/src/index.js',
+    'zan-examples': './docs/src/examples.js'
   },
   output: {
     path: path.join(__dirname, '../docs/dist'),
@@ -48,14 +49,14 @@ module.exports = {
       path.join(__dirname, '../node_modules'),
       'node_modules'
     ],
-    extensions: ['.js', '.vue', '.pcss'],
+    extensions: ['.js', '.vue', '.css'],
     alias: {
       'vue$': 'vue/dist/vue.runtime.common.js',
       'zanui': path.join(__dirname, '..'),
       'src': path.join(__dirname, '../src'),
       'packages': path.join(__dirname, '../packages'),
       'lib': path.join(__dirname, '../lib'),
-      'components': path.join(__dirname, '../docs/components')
+      'components': path.join(__dirname, '../docs/src/components')
     }
   },
   module: {
@@ -97,20 +98,7 @@ module.exports = {
   },
   devtool: 'source-map',
   plugins: [
-    StyleExtractPlugin,
     new ProgressBarPlugin(),
-    new HtmlWebpackPlugin({
-      chunks: ['vendor', 'docs'],
-      template: 'docs/index.tpl',
-      filename: 'index.html',
-      inject: true
-    }),
-    new HtmlWebpackPlugin({
-      chunks: ['vendor', 'examples'],
-      template: 'docs/index.tpl',
-      filename: 'examples.html',
-      inject: true
-    }),
     new webpack.LoaderOptionsPlugin({
       minimize: true,
       options: {
@@ -160,7 +148,21 @@ module.exports = {
           }
         }
       }
-    })
+    }),
+    new HtmlWebpackPlugin({
+      chunks: ['vendor', 'zan-docs'],
+      template: 'docs/src/index.tpl',
+      filename: 'index.html',
+      inject: true
+    }),
+    new HtmlWebpackPlugin({
+      chunks: ['vendor', 'zan-examples'],
+      template: 'docs/src/index.tpl',
+      filename: 'examples.html',
+      inject: true
+    }),
+    new OptimizeCssAssetsPlugin(),
+    StyleExtractPlugin
   ]
 };
 
@@ -168,7 +170,7 @@ if (process.env.NODE_ENV === 'production') {
   delete module.exports.devtool;
   module.exports.output = {
     path: path.join(__dirname, '../docs/dist'),
-    publicPath: './',
+    publicPath: '/vue',
     filename: '[name].[hash:8].js'
   };
   module.exports.plugins = module.exports.plugins.concat([
diff --git a/docs/ExamplesDocsApp.vue b/docs/ExamplesDocsApp.vue
deleted file mode 100644
index 31f8d5860..000000000
--- a/docs/ExamplesDocsApp.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="app">
-    <div class="page-header">
-      header
-    </div>
-    <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>
-    <div class="page-footer">
-      footer
-    </div>
-  </div>
-</template>
-
-<script>
-import 'highlight.js/styles/color-brewer.css';
-import navConfig from './nav.config.json';
-
-export default {
-  data() {
-    return {
-      navConfig: navConfig
-    };
-  }
-};
-</script>
-
-<style lang="css">
-  @import './assets/docs.css';
-</style>
diff --git a/docs/assets/docs.css b/docs/assets/docs.css
index 3ab54888d..9c18a759c 100644
--- a/docs/assets/docs.css
+++ b/docs/assets/docs.css
@@ -41,13 +41,13 @@ ul, ol {
   list-style: none;
 }
 
-.hljs {
-  line-height: 1.8;
+code.hljs {
+  line-height: 1.5;
   font-family: Menlo, Monaco, Consolas, Courier, monospace;
   font-size: 12px;
-  padding: 18px 24px;
-  background-color: #f9fafc;
-  border: solid 1px #eaeefb;
+  padding: 20px;
+  background-color: #f8f8f8;
+  border: solid 1px #E5E5E5;
   margin-bottom: 25px;
   border-radius: 4px;
   -webkit-font-smoothing: auto;
@@ -66,29 +66,26 @@ ul, ol {
   }
 }
 
-.page-header {
-  height: 60px;
-  background-color: #fff;
-}
-
 .main-content {
-  margin: 40px 15px;
+  margin: 110px 20px 40px;
+  padding-top: 20px;
 }
 
 .page-container {
   background-color: #fff;
   position: relative;
-  display: table;
+  display: flex;
   width: 100%;
+  overflow: hidden;
 }
 
 .page-content {
   box-sizing: border-box;
-  margin-left: 220px;
-  padding: 0 40px;
-  display: table-cell;
+  flex: 1;
 
   section {
+    padding: 0 40px;
+
     > h1,
     > h2,
     > h3,
@@ -211,9 +208,3 @@ ul, ol {
     padding: 10px;
   }
 }
-
-.page-footer {
-  height: 150px;
-  margin-top: 40px;
-  background-color: #fff;
-}
diff --git a/docs/components/mobile-computed.js b/docs/components/mobile-computed.js
deleted file mode 100644
index b59fb80e9..000000000
--- a/docs/components/mobile-computed.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import MobilePopup from 'components/mobile-popup.vue';
-
-export default {
-  components: {
-    MobilePopup
-  },
-
-  computed: {
-    mobileUrl() {
-      return '/examples.html#' + location.pathname.slice(4);
-    }
-  },
-
-  data() {
-    return {
-      mobileShow: false
-    };
-  }
-};
diff --git a/docs/examples-dist/actionsheet.vue b/docs/examples-dist/actionsheet.vue
index 7a2418f86..8fe60d92a 100644
--- a/docs/examples-dist/actionsheet.vue
+++ b/docs/examples-dist/actionsheet.vue
@@ -5,6 +5,8 @@
 <zan-actionsheet v-model="show1" :actions="actions1">
 </zan-actionsheet>
 
+
+
               </example-block><example-block title="带取消按钮的ActionSheet">
                 <div class="zan-row">
   <zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
@@ -12,6 +14,8 @@
 <zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
 </zan-actionsheet>
 
+
+
               </example-block><example-block title="带标题的ActionSheet">
                 <div class="zan-row">
   <zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
@@ -39,7 +43,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 import MobileComputed from 'components/mobile-computed';
 
 export default {
@@ -53,7 +57,8 @@ export default {
       actions1: [
         {
           name: '微信安全支付',
-          className: 'actionsheet-wx'
+          className: 'actionsheet-wx',
+          callback: this.handleActionClick
         },
         {
           name: '支付宝支付',
@@ -71,6 +76,12 @@ export default {
         }
       ]
     };
+  },
+
+  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
index 842d0937c..9d0eba259 100644
--- a/docs/examples-dist/badge.vue
+++ b/docs/examples-dist/badge.vue
@@ -1,15 +1,23 @@
 <template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
-                <zan-badge-group :active-key="activeKey">
-  <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
-  <zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
-  <zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
-  <zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
+                <zan-badge-group>
+  <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
+  <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
+  <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
+  <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
+</zan-badge-group>
+
+              </example-block><example-block title="选中某个badge">
+                <zan-badge-group :active-key="2">
+  <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
+  <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
+  <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
+  <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
 </zan-badge-group>
 
               </example-block></section></template>
 
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
   export default {
     data() {
       return {
diff --git a/docs/examples-dist/button.vue b/docs/examples-dist/button.vue
index ecbc26d0f..2a3051d39 100644
--- a/docs/examples-dist/button.vue
+++ b/docs/examples-dist/button.vue
@@ -24,15 +24,19 @@
     <zan-button size="large">large</zan-button>
   </zan-col>
 </zan-row>
-<zan-row gutter="10">
-  <zan-col span="8">
-    <zan-button type="primary" block="">normal</zan-button>
+<zan-row>
+  <zan-col span="24">
+    <zan-button size="normal">normal</zan-button>
   </zan-col>
-  <zan-col span="8">
-    <zan-button size="small" block="">small</zan-button>
+</zan-row>
+<zan-row>
+  <zan-col span="24">
+    <zan-button size="small">small</zan-button>
   </zan-col>
-  <zan-col span="8">
-    <zan-button size="mini" block="">mini</zan-button>
+</zan-row>
+<zan-row>
+  <zan-col span="24">
+    <zan-button size="mini">mini</zan-button>
   </zan-col>
 </zan-row>
 
@@ -53,12 +57,20 @@
   </zan-col>
 </zan-row>
 
-              </example-block><example-block title="button group">
-                <div class="button-group">
-  <zan-button type="primary" size="small">确认付款</zan-button>
-  <zan-button size="small">确认收货</zan-button>
-  <zan-button size="small">取消订单</zan-button>
-</div>
+              </example-block><example-block title="">
+                <zan-row>
+  <zan-col span="24">
+    <zan-button type="primary" bottom-action="">立即购买</zan-button>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="12">
+    <zan-button bottom-action="">加入购物车</zan-button>
+  </zan-col>
+  <zan-col span="12">
+    <zan-button type="primary" bottom-action="">立即购买</zan-button>
+  </zan-col>
+</zan-row>
 
               </example-block></section></template>
 <style>
@@ -70,12 +82,8 @@
     .zan-col {
       margin-bottom: 10px;
     }
-    .button-group {
-      font-size: 0;
-      padding: 0 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
+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
index 7545736c2..df1e123ae 100644
--- a/docs/examples-dist/card.vue
+++ b/docs/examples-dist/card.vue
@@ -20,4 +20,4 @@
               </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
+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
index c0649e6a0..7e3a8026b 100644
--- a/docs/examples-dist/cell.vue
+++ b/docs/examples-dist/cell.vue
@@ -4,11 +4,6 @@
   <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
 </zan-cell-group>
 
-              </example-block><example-block title="带*号，标明必填">
-                <zan-cell-group>
-  <zan-cell title="单元格1" required></zan-cell>
-</zan-cell-group>
-
               </example-block><example-block title="标题带描述信息">
                 <zan-cell-group>
   <zan-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></zan-cell>
@@ -32,22 +27,16 @@
   <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
     <template slot="title">
       <span class="zan-cell-text">起码运动馆</span>
-      <img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
+      <zan-tag type="danger">官方</zan-tag>
     </template>
   </zan-cell>
   <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
 </zan-cell-group>
 
               </example-block></section></template>
-<style>
-.official-img {
-  width: 31px;
-  vertical-align: middle;
-  border: 0;
-}
-</style>
+
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   methods: {
     handleClick() {
diff --git a/docs/examples-dist/checkbox.vue b/docs/examples-dist/checkbox.vue
index d784aee41..531edf027 100644
--- a/docs/examples-dist/checkbox.vue
+++ b/docs/examples-dist/checkbox.vue
@@ -56,7 +56,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/datetime-picker.vue b/docs/examples-dist/datetime-picker.vue
index 2bbd5265f..9a0e2ced4 100644
--- a/docs/examples-dist/datetime-picker.vue
+++ b/docs/examples-dist/datetime-picker.vue
@@ -1,5 +1,5 @@
 <template><section class="demo-datetime-picker"><h1 class="demo-title">datetime-picker</h1><example-block title="基础用法">
-                <zan-datetime-picker type="time" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">  
+                <zan-datetime-picker v-model="currentDate" type="datetime" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">  
 </zan-datetime-picker>
 
 
@@ -7,13 +7,14 @@
               </example-block></section></template>
 
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+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()
+      minDate: new Date(),
+      currentDate: null
     };
   },
 
diff --git a/docs/examples-dist/dialog.vue b/docs/examples-dist/dialog.vue
index 54c15ce68..cc543fd0b 100644
--- a/docs/examples-dist/dialog.vue
+++ b/docs/examples-dist/dialog.vue
@@ -1,7 +1,10 @@
-<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="基础用法">
+<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="消息提示">
                 <zan-button @click="handleAlertClick">alert</zan-button>
 
-<zan-button @click="handleConfirmClick">confirm</zan-button>
+
+
+              </example-block><example-block title="消息确认">
+                <zan-button @click="handleConfirmClick">confirm</zan-button>
 
 
 
@@ -16,7 +19,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+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';
 
diff --git a/docs/examples-dist/field.vue b/docs/examples-dist/field.vue
index 5a5e6fdeb..45aa9d939 100644
--- a/docs/examples-dist/field.vue
+++ b/docs/examples-dist/field.vue
@@ -41,7 +41,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/icon.vue b/docs/examples-dist/icon.vue
index ca11e36c4..dfe12daae 100644
--- a/docs/examples-dist/icon.vue
+++ b/docs/examples-dist/icon.vue
@@ -1,44 +1,146 @@
 <template><section class="demo-icon"><h1 class="demo-title">icon</h1><example-block title="所有Icon">
-                <zan-icon name="qr-invalid"></zan-icon>
-<zan-icon name="qr"></zan-icon>
-<zan-icon name="exchange"></zan-icon>
-<zan-icon name="close"></zan-icon>
-<zan-icon name="location"></zan-icon>
-<zan-icon name="upgrade"></zan-icon>
-<zan-icon name="check"></zan-icon>
-<zan-icon name="checked"></zan-icon>
-<zan-icon name="like-o"></zan-icon>
-<zan-icon name="like"></zan-icon>
-<zan-icon name="chat"></zan-icon>
-<zan-icon name="shop"></zan-icon>
-<zan-icon name="photograph"></zan-icon>
-<zan-icon name="add"></zan-icon>
-<zan-icon name="add2"></zan-icon>
-<zan-icon name="photo"></zan-icon>
-<zan-icon name="logistics"></zan-icon>
-<zan-icon name="edit"></zan-icon>
-<zan-icon name="passed"></zan-icon>
-<zan-icon name="cart"></zan-icon>
-<zan-icon name="arrow"></zan-icon>
-<zan-icon name="gift"></zan-icon>
-<zan-icon name="search"></zan-icon>
-<zan-icon name="clear"></zan-icon>
-<zan-icon name="success"></zan-icon>
-<zan-icon name="fail"></zan-icon>
+                <zan-row>
+  <zan-col span="8">
+   <zan-icon name="qr-invalid"></zan-icon>
+   <span>qr-invalid</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="qr"></zan-icon>
+   <span>qr</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="exchange"></zan-icon>
+   <span>exchange</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="close"></zan-icon>
+   <span>close</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="location"></zan-icon>
+   <span>location</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="upgrade"></zan-icon>
+   <span>upgrade</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="check"></zan-icon>
+   <span>check</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="checked"></zan-icon>
+   <span>checked</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="like-o"></zan-icon>
+   <span>like-o</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="like" style="color: red;"></zan-icon>
+   <span>like</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="chat"></zan-icon>
+   <span>chat</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="shop"></zan-icon>
+   <span>shop</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="photograph"></zan-icon>
+   <span>photograph</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="add"></zan-icon>
+   <span>add</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="add2"></zan-icon>
+   <span>add2</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="photo"></zan-icon>
+   <span>photo</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="logistics"></zan-icon>
+   <span>logistics</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="edit"></zan-icon>
+   <span>edit</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="passed"></zan-icon>
+   <span>passed</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="cart"></zan-icon>
+   <span>cart</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="arrow"></zan-icon>
+   <span>arrow</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="gift"></zan-icon>
+   <span>gift</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="search"></zan-icon>
+   <span>search</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="clear"></zan-icon>
+   <span>clear</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="success"></zan-icon>
+   <span>success</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="fail"></zan-icon>
+   <span>fail</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="contact"></zan-icon>
+   <span>contact</span>
+  </zan-col>
+</zan-row>
 
               </example-block></section></template>
 <style>
 @component-namespace demo {
   @b icon {
+    .zan-col {
+      text-align: center;
+    }
 
     .zan-icon {
-      margin: 10px;
       font-size: 45px;
-      width: 56px;
-      text-align: center;
+      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
+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
index 37389b507..37d71469b 100644
--- a/docs/examples-dist/image-preview.vue
+++ b/docs/examples-dist/image-preview.vue
@@ -14,15 +14,19 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+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/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
+        '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'
       ]);
     }
   }
diff --git a/docs/examples-dist/layout.vue b/docs/examples-dist/layout.vue
new file mode 100644
index 000000000..2b5799282
--- /dev/null
+++ b/docs/examples-dist/layout.vue
@@ -0,0 +1,71 @@
+<template><section class="demo-layout"><h1 class="demo-title">layout</h1><example-block title="常规用法">
+                <zan-row>
+  <zan-col span="8">
+    <div class="gray">span: 8</div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="white">span: 8</div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="gray">span: 8</div>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="4">
+    <div class="gray">span: 4</div>
+  </zan-col>
+  <zan-col span="10" offset="4">
+    <div class="gray">offset: 4, span: 10</div>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col offset="12" span="12">
+    <div class="gray">offset: 12, span: 12</div>
+  </zan-col>
+</zan-row>
+
+              </example-block><example-block title="在列元素之间增加间距">
+                <zan-row gutter="10">
+  <zan-col span="8">
+    <div class="gray">span: 8</div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="gray">span: 8</div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="gray">span: 8</div>
+  </zan-col>
+</zan-row>
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b layout {
+    .zan-row {
+      padding: 0 20px;
+    }
+    .zan-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
new file mode 100644
index 000000000..637093324
--- /dev/null
+++ b/docs/examples-dist/lazyload.vue
@@ -0,0 +1,78 @@
+<template><section class="demo-lazyload"><h1 class="demo-title">lazyload</h1><example-block title="基础用法">
+                <ul class="image-list" ref="container">
+  <li v-for="img in imageList">
+    <img class="lazy-img" v-lazy="img">
+  </li>
+</ul>
+
+
+
+              </example-block><example-block title="背景图懒加载">
+                <ul class="image-list" ref="container">
+  <li v-for="img in backgroundImageList">
+    <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 in componentImageList">
+      <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
index ff83d7b07..e2fc134ae 100644
--- a/docs/examples-dist/loading.vue
+++ b/docs/examples-dist/loading.vue
@@ -1,41 +1,36 @@
-<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="基础用法">
-                <div class="demo-loading">
-  <h2 class="demo-sub-title">渐变深色spinner</h2>
-  <div class="demo-loading__example">
-    <zan-loading class="some-customized-class"></zan-loading>
-  </div>
-  <h2 class="demo-sub-title">渐变浅色spinner</h2>
-  <div class="demo-loading__example demo-loading__example--with-bg">
-    <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
-  </div>
-  <h2 class="demo-sub-title">单色spinner</h2>
-  <div class="demo-loading__example">
-    <zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
-  </div>
-  <h2 class="demo-sub-title">单色spinner</h2>
-  <div class="demo-loading__example">
-    <zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
-  </div>
+<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="渐变深色spinner">
+                <zan-loading class="some-customized-class"></zan-loading>
+
+              </example-block><example-block title="">
+                <div class="demo-loading__example demo-loading__example--with-bg">
+  <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
 </div>
 
+              </example-block><example-block title="">
+                <zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
+<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
+
               </example-block></section></template>
 <style>
-.demo-loading__example{
-  width: 30px;
-  height: 30px;
-  padding: 20px;
-  margin: auto;
-  border-radius: 5px;
-  border: 1px solid transparent;
-}
+@component-namespace demo {
+  @b loading {
+    .zan-loading {
+      margin: 0 auto;
+    }
 
-.demo-loading__example--with-bg {
-  background-color: rgba(0, 0, 0, 0.5);
-}
+    .circle-loading {
+      margin: 20px auto;
+    }
 
-.demo-loading {
-  padding: 0 20px;
+    .demo-loading__example--with-bg {
+      background-color: rgba(0, 0, 0, 0.5);
+      margin: 0 auto;
+      width: 80px;
+      padding: 25px 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
+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
index bdce2d348..aaca6e5a5 100644
--- a/docs/examples-dist/panel.vue
+++ b/docs/examples-dist/panel.vue
@@ -62,4 +62,4 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+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
index a99eaa6d4..5e33b9d9f 100644
--- a/docs/examples-dist/picker.vue
+++ b/docs/examples-dist/picker.vue
@@ -11,7 +11,7 @@
               </example-block></section></template>
 
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 const citys = {
   '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
   '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
diff --git a/docs/examples-dist/popup.vue b/docs/examples-dist/popup.vue
index de1283f6f..6850c194f 100644
--- a/docs/examples-dist/popup.vue
+++ b/docs/examples-dist/popup.vue
@@ -1,59 +1,44 @@
 <template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
-                <div class="zan-row">
-  <zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button>
-</div>
-<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
-  <zan-button @click="showDialog">弹出dialog</zan-button>
-</zan-popup>
-
-<div class="zan-row">
-  <zan-button @click="popupShow2 = true">从上方弹出popup</zan-button>
-</div>
-<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
-  更新成功
-</zan-popup>
-
-<div class="zan-row">
-  <zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
-</div>
-<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
-  <zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
-</zan-popup>
-
-<div class="zan-row">
-  <zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
-</div>
-<zan-popup v-model="popupShow4" class="zan-popup-4">
+                <zan-button block="" @click="popupShow1 = true">从中间弹出popup</zan-button>
+<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
   从中间弹出popup
 </zan-popup>
 
 
 
+              </example-block><example-block title="从不同位置弹出菜单">
+                <zan-button block="" @click="popupShow2 = true;">从下方弹出popup</zan-button>
+<zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
+  <zan-button @click="showDialog">弹出dialog</zan-button>
+</zan-popup>
+
+<zan-button block="" @click="popupShow3 = true">从上方弹出popup</zan-button>
+<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
+  更新成功
+</zan-popup>
+
+<zan-button block="" @click="popupShow4 = true">从右方弹出popup</zan-button>
+<zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
+  <zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
+</zan-popup>
+
+<zan-button block="" @click="popupShow5 = true">从左方弹出popup</zan-button>
+<zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
+  <zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
+</zan-popup>
+
+
 
               </example-block></section></template>
 <style>
 @component-namespace demo {
   @b popup {
+    .examples,
+    .example-block {
+      padding: 0 15px;
+    }
+
     .zan-popup-1 {
-      width: 100%;
-      height: 200px;
-      box-sizing: border-box;
-      padding: 20px;
-    }
-
-    .zan-popup-2 {
-      line-height: 50px;
-      text-align: center;
-      background-color: rgba(0, 0, 0, 0.701961);
-      color: #fff;
-    }
-
-    .zan-popup-3 {
-      width: 100%;
-      height: 100%;
-    }
-
-    .zan-popup-4 {
       width: 60%;
       box-sizing: border-box;
       padding: 20px;
@@ -61,14 +46,34 @@
       text-align: center;
     }
 
+    .zan-popup-2 {
+      width: 100%;
+      height: 200px;
+      box-sizing: border-box;
+      padding: 20px;
+    }
+
+    .zan-popup-3 {
+      line-height: 50px;
+      text-align: center;
+      background-color: rgba(0, 0, 0, 0.701961);
+      color: #fff;
+    }
+
+    .zan-popup-4,
+    .zan-popup-5 {
+      width: 100%;
+      height: 100%;
+    }
+
     .zan-button {
-      margin: 15px;
+      margin: 10px 0;
     }
   }
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+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';
 
@@ -80,15 +85,16 @@ export default {
       popupShow1: false,
       popupShow2: false,
       popupShow3: false,
-      popupShow4: false
+      popupShow4: false,
+      popupShow5: false
     }
   },
 
   watch: {
-    popupShow2(val) {
+    popupShow3(val) {
       if (val) {
         setTimeout(() => {
-          this.popupShow2 = false;
+          this.popupShow3 = false;
         }, 2000);
       }
     }
diff --git a/docs/examples-dist/progress.vue b/docs/examples-dist/progress.vue
index 5f2575f0b..a98a61dff 100644
--- a/docs/examples-dist/progress.vue
+++ b/docs/examples-dist/progress.vue
@@ -19,9 +19,9 @@
 <div class="demo-progress__wrapper">
   <zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
 </div>
-              </example-block><example-block title="自定义颜色">
-                
-<div class="demo-progress__wrapper">
+
+              </example-block><example-block title="自定义颜色和文字">
+                <div class="demo-progress__wrapper">
   <zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
 </div>
 <div class="demo-progress__wrapper">
@@ -43,4 +43,4 @@
   } 
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+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
index 6e9cd6075..939fa032b 100644
--- a/docs/examples-dist/quantity.vue
+++ b/docs/examples-dist/quantity.vue
@@ -24,7 +24,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/radio.vue b/docs/examples-dist/radio.vue
index c6e78c9b1..cb9c96633 100644
--- a/docs/examples-dist/radio.vue
+++ b/docs/examples-dist/radio.vue
@@ -49,7 +49,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/search.vue b/docs/examples-dist/search.vue
index 0debad168..0a53909e3 100644
--- a/docs/examples-dist/search.vue
+++ b/docs/examples-dist/search.vue
@@ -2,14 +2,26 @@
                 <zan-search placeholder="商品名称" @search="goSearch"></zan-search>
 
 
+
+              </example-block><example-block title="监听对应事件">
+                <zan-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></zan-search>
+
+
+
               </example-block></section></template>
 
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+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');
     }
   }
 };
diff --git a/docs/examples-dist/steps.vue b/docs/examples-dist/steps.vue
index 8c4bde264..110976069 100644
--- a/docs/examples-dist/steps.vue
+++ b/docs/examples-dist/steps.vue
@@ -1,5 +1,5 @@
 <template><section class="demo-steps"><h1 class="demo-title">steps</h1><example-block title="基础用法">
-                <zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
+                <zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
   <zan-step>买家下单</zan-step>
   <zan-step>商家接单</zan-step>
   <zan-step>买家提货</zan-step>
@@ -33,7 +33,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/swipe.vue b/docs/examples-dist/swipe.vue
index e107e8bf5..79e12508b 100644
--- a/docs/examples-dist/swipe.vue
+++ b/docs/examples-dist/swipe.vue
@@ -1,23 +1,21 @@
 <template><section class="demo-swipe"><h1 class="demo-title">swipe</h1><example-block title="基础用法">
                 <zan-swipe>
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
-  </zan-swipe-item>
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+  <zan-swipe-item v-for="img in images">
+    <img v-lazy="img" alt="">
   </zan-swipe-item>
 </zan-swipe>
 
+
+
               </example-block><example-block title="自动轮播">
-                <zan-swipe :auto-play="true">
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
-  </zan-swipe-item>
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+                <zan-swipe auto-play="" @pagechange:end="handlePageEnd">
+  <zan-swipe-item v-for="img in autoImages">
+    <img v-lazy="img" alt="">
   </zan-swipe-item>
 </zan-swipe>
 
+
+
               </example-block></section></template>
 <style>
 @component-namespace demo {
@@ -33,4 +31,25 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+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
index 2c07c2cac..cb89d3c1d 100644
--- a/docs/examples-dist/switch.vue
+++ b/docs/examples-dist/switch.vue
@@ -1,24 +1,32 @@
 <template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
-                <div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
-  <div class="demo-switch__text">{{switchStateText}}</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
-  <div class="demo-switch__text">ON, DISABLED</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
-  <div class="demo-switch__text">OFF, DISABLED</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
-  <div class="demo-switch__text">ON, LOADING</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
-  <div class="demo-switch__text">OFF, LOADING</div>
-</div>
+                <zan-switch class="some-customized-class" v-model="switchState1"></zan-switch>
+<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
+
+
+
+
+              </example-block><example-block title="基础用法">
+                <zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
+<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
+
+
+
+
+              </example-block><example-block title="">
+                <zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
+<div class="demo-switch__text">ON, DISABLED</div>
+
+<zan-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></zan-switch>
+<div class="demo-switch__text">OFF, DISABLED</div>
+
+
+
+              </example-block><example-block title="">
+                <zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
+<div class="demo-switch__text">ON, LOADING</div>
+
+<zan-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></zan-switch>
+<div class="demo-switch__text">OFF, LOADING</div>
 
 
 
@@ -26,36 +34,38 @@
 <style>
   @component-namespace demo {
     @b switch {
-      padding: 0 15px 15px;
-
-      @e wrapper {
-        width: 33.33%;
-        float: left;
+      .examples {
         text-align: center;
       }
 
       @e text {
-        margin: 20px 0;
+        margin: 20px auto;
       }
     }
   }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
+import Dialog from 'packages/dialog';
+
 export default {
   data() {
     return {
-      switchState: true
+      switchState1: true,
+      switchState2: true,
+      switchStateTrue: true,
+      switchStateFalse: false
     };
   },
-  computed: {
-    switchStateText() {
-      return this.switchState ? ' ON' : 'OFF';
-    }
-  },
   methods: {
     updateState(newState) {
-      this.switchState = newState;
+      const state = newState ? '打开' : '关闭';
+      Dialog.confirm({
+        title: '提醒',
+        message: '是否' + state + '开关？'
+      }).then((action) => {
+        this.switchState2 = newState;
+      }, (error) => {});
     }
   }
 };  
diff --git a/docs/examples-dist/tab.vue b/docs/examples-dist/tab.vue
index ac97cb4e8..ab3ce0697 100644
--- a/docs/examples-dist/tab.vue
+++ b/docs/examples-dist/tab.vue
@@ -7,17 +7,27 @@
   <zan-tab title="选项五">内容五</zan-tab>
 </zan-tabs>
 
-              </example-block><example-block title="禁用用法">
+              </example-block><example-block title="基础用法">
                 <zan-tabs :active="active">
   <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab disable="" title="选项二" @disable="popalert">内容二</zan-tab>
+  <zan-tab title="选项二">内容二</zan-tab>
+  <zan-tab title="选项三">内容三</zan-tab>
+  <zan-tab title="选项四">内容四</zan-tab>
+  <zan-tab title="选项五">内容五</zan-tab>
+</zan-tabs>
+
+              </example-block><example-block title="禁用tab">
+                <zan-tabs>
+  <zan-tab title="选项一">内容一</zan-tab>
+  <zan-tab title="选项二" disabled @disabled="popalert">内容二</zan-tab>
   <zan-tab title="选项三">内容三</zan-tab>
   <zan-tab title="选项四">内容四</zan-tab>
   <zan-tab title="选项五">内容五</zan-tab>
 </zan-tabs>
 
 
-              </example-block><example-block title="card样式用法">
+
+              </example-block><example-block title="card样式">
                 <zan-tabs type="card">
   <zan-tab title="选项一">内容一</zan-tab>
   <zan-tab title="选项二">内容二</zan-tab>
@@ -26,8 +36,8 @@
   <zan-tab title="选项五">内容五</zan-tab>
 </zan-tabs>
 
-              </example-block><example-block title="自定义样式用法">
-                <zan-tabs active="2" navclass="custom-tabwrap">
+              </example-block><example-block title="自定义样式">
+                <zan-tabs active="2" class="custom-tabwrap">
     <zan-tab title="选项一" class="custom-pane">内容一</zan-tab>
     <zan-tab title="选项二" class="custom-pane">内容二</zan-tab>
     <zan-tab title="选项三" class="custom-pane">内容三</zan-tab>
@@ -36,6 +46,18 @@
 </zan-tabs>
 
 
+
+              </example-block><example-block title="click事件">
+                <zan-tabs @click="handleTabClick">
+  <zan-tab title="选项一">内容一</zan-tab>
+  <zan-tab title="选项二">内容二</zan-tab>
+  <zan-tab title="选项三">内容三</zan-tab>
+  <zan-tab title="选项四">内容四</zan-tab>
+  <zan-tab title="选项五">内容五</zan-tab>
+</zan-tabs>
+
+
+
               </example-block></section></template>
 <style>
 @component-namespace demo {
@@ -44,21 +66,31 @@
       background-color: #fff;
       padding: 20px;
     }
+
+    .zan-tabs--card .zan-tab__pane {
+      background-color: transparent;
+    }
+
+    .custom-tabwrap .zan-tab-active {
+      color: #20a0ff;
+    }
+    .custom-tabwrap .zan-tabs-nav-bar {
+      background: #20a0ff;
+    }
+    .custom-pane {
+      text-align: center;
+      height: 50px;
+      line-height: 50px;
+    }
   }
 }
 </style><style>
-  .page-tab {
-    padding: 0 15px;
-  }
-  .custom-tabwrap .zan-tab-active{
+  .custom-tabwrap .zan-tab-active {
     color: #20a0ff;
   }
-  .custom-tabwrap .zan-tabs-nav-bar{
+  .custom-tabwrap .zan-tabs-nav-bar {
     background: #20a0ff;
   }
-  .custom-tab {
-    font-weight: bold;
-  }
   .custom-pane {
     text-align: center;
     height: 50px;
@@ -66,7 +98,7 @@
   }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
@@ -81,6 +113,10 @@ export default {
   methods: {
     popalert() {
       alert('haha')
+    },
+
+    handleTabClick(index) {
+      alert(index);
     }
   }
 };
diff --git a/docs/examples-dist/tag.vue b/docs/examples-dist/tag.vue
index 717c19bdc..d8d23cb0c 100644
--- a/docs/examples-dist/tag.vue
+++ b/docs/examples-dist/tag.vue
@@ -1,7 +1,7 @@
 <template><section class="demo-tag"><h1 class="demo-title">tag</h1><example-block title="基础用法">
                 <div class="tags-container">
   <zan-tag>返现</zan-tag>
-  <zan-tag :plain="true">返现</zan-tag>
+  <zan-tag plain="">返现</zan-tag>
 </div>
 <div class="tags-container">
   <zan-tag type="danger">返现</zan-tag>
@@ -12,18 +12,18 @@
               </example-block><example-block title="高级用法">
                 <div class="tags-container">
   <zan-tag type="danger">返现</zan-tag>
-  <zan-tag :plain="true" type="danger">返现</zan-tag>
+  <zan-tag plain="" type="danger">返现</zan-tag>
 </div>
 <div class="tags-container">
   <zan-tag type="primary">返现</zan-tag>
-  <zan-tag :plain="true" type="primary">返现</zan-tag>
+  <zan-tag plain="" type="primary">返现</zan-tag>
 </div>
 <div class="tags-container">
   <zan-tag type="success">返现</zan-tag>
-  <zan-tag :plain="true" type="success">返现</zan-tag>
+  <zan-tag plain="" type="success">返现</zan-tag>
 </div>
 <div class="tags-container">
-  <zan-tag type="danger" :mark="true">返现</zan-tag>
+  <zan-tag type="danger" mark="">返现</zan-tag>
 </div>
 
               </example-block></section></template>
@@ -37,4 +37,4 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+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
index 4627ab266..405b649bc 100644
--- a/docs/examples-dist/toast.vue
+++ b/docs/examples-dist/toast.vue
@@ -30,7 +30,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 import { Toast } from 'src/index';
 
 export default {
@@ -60,9 +60,9 @@ export default {
         type: 'success',
         message: leftSec.toString()
       });
-      window.setInterval(() => {
+      const id = window.setInterval(() => {
         if (leftSec <= 1) {
-          window.clearInterval();
+          window.clearInterval(id);
           toast.message = '跳转中...'
           return;
         }
diff --git a/docs/examples-dist/uploader.vue b/docs/examples-dist/uploader.vue
index b8d55e9e6..76221e4c2 100644
--- a/docs/examples-dist/uploader.vue
+++ b/docs/examples-dist/uploader.vue
@@ -1,12 +1,12 @@
 <template><section class="demo-uploader"><h1 class="demo-title">uploader</h1><example-block title="基础用法">
                 <div class="uploader-container">
-    <zan-uploader :before-read="logContent" @file-readed="logContent">
+    <zan-uploader :before-read="logContent" :after-read="logContent">
     </zan-uploader>
 </div>
 
               </example-block><example-block title="自定义上传图标">
                 <div class="uploader-container">
-  <zan-uploader @file-readed="logContent">
+  <zan-uploader :after-read="logContent">
     <zan-icon name="photograph"></zan-icon>
   </zan-uploader>
 </div>
@@ -18,7 +18,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   methods: {
     logContent(file) {
diff --git a/docs/examples-dist/waterfall.vue b/docs/examples-dist/waterfall.vue
index c2906c7c0..204e79aa3 100644
--- a/docs/examples-dist/waterfall.vue
+++ b/docs/examples-dist/waterfall.vue
@@ -18,7 +18,7 @@
   }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-docs/actionsheet.md b/docs/examples-docs/actionsheet.md
index ef931e668..2cc93ce17 100644
--- a/docs/examples-docs/actionsheet.md
+++ b/docs/examples-docs/actionsheet.md
@@ -30,7 +30,142 @@ export default {
       actions1: [
         {
           name: '微信安全支付',
-          className: 'actionsheet-wx'
+          className: 'actionsheet-wx',
+          callback: this.handleActionClick
+        },
+        {
+          name: '支付宝支付',
+          loading: true
+        },
+        {
+          name: '有赞E卡',
+          subname: '（剩余260.50元）'
+        },
+        {
+          name: '信用卡支付'
+        },
+        {
+          name: '其他支付方式'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    handleActionClick(item) {
+      console.log(item);
+    }
+  }
+}
+</script>
+
+## ActionSheet 行动按钮
+
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`ActionSheet`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`ActionSheet`组件了：
+
+```js
+import Vue from 'vue';
+import { ActionSheet } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/actionSheet.css';
+
+Vue.component(ActionSheet.name, ActionSheet);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`ActionSheet`组件，这样只能在你注册的组件中使用`ActionSheet`：
+
+```js
+import { ActionSheet } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-actionSheet': ActionSheet
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+需要传入一个`actions`的属性，该属性为一个数组，数组的每一项是一个对象，可以根据下面的[action对象](#actions)设置你想要的信息。
+
+:::demo 基础用法
+```html
+<div class="zan-row">
+  <zan-button @click="show1 = true">弹出actionsheet</zan-button>
+</div>
+<zan-actionsheet v-model="show1" :actions="actions1">
+</zan-actionsheet>
+
+<script>
+export default {
+  data() {
+    return {
+      show1: 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>
+```
+:::
+
+#### 带取消按钮的ActionSheet
+
+如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`ActionSheet`关闭。
+
+:::demo 带取消按钮的ActionSheet
+```html
+<div class="zan-row">
+  <zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
+</div>
+<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
+</zan-actionsheet>
+
+<script>
+export default {
+  data() {
+    return {
+      show2: false,
+      actions1: [
+        {
+          name: '微信安全支付',
+          className: 'actionsheet-wx',
+          callback: this.handleActionClick
         },
         {
           name: '支付宝支付',
@@ -51,34 +186,12 @@ export default {
   }
 }
 </script>
-
-## ActionSheet
-
-### 基础用法
-
-:::demo 基础用法
-```html
-<div class="zan-row">
-  <zan-button @click="show1 = true">弹出actionsheet</zan-button>
-</div>
-<zan-actionsheet v-model="show1" :actions="actions1">
-</zan-actionsheet>
 ```
 :::
 
-### 带取消按钮的ActionSheet
+#### 带标题的ActionSheet
 
-:::demo 带取消按钮的ActionSheet
-```html
-<div class="zan-row">
-  <zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
-</div>
-<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
-</zan-actionsheet>
-```
-:::
-
-### 带标题的ActionSheet
+如果传入了`title`属性，且不为空，则另外一种样式的`ActionSheet`，里面内容需要自定义。
 
 :::demo 带标题的ActionSheet
 ```html
@@ -116,3 +229,4 @@ export default {
 | subname | 二级标题 |
 | className | 为对应列添加特殊的`class` |
 | loading | 是否是`loading`状态 |
+| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |
diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md
index c0a7b34f3..c0035bc63 100644
--- a/docs/examples-docs/badge.md
+++ b/docs/examples-docs/badge.md
@@ -1,7 +1,3 @@
-## Badge
-
-### 基础用法
-
 <script>
   export default {
     data() {
@@ -17,13 +13,68 @@
   };
 </script>
 
+## Badge 徽章
+
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Badge`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Badge`组件了：
+
+```js
+import Vue from 'vue';
+import { Badge, BadgeGroup } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/badge.css';
+
+Vue.component(Badge.name, Badge);
+Vue.component(BadgeGroup.name, BadgeGroup);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Badge`组件，这样只能在你注册的组件中使用`Badge`：
+
+```js
+import { Badge, BadgeGroup } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-badge': Badge,
+    'zan-badge-group': BadgeGroup
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+默认情况下激活第一个`badge`。
+
 :::demo 基础用法
 ```html
-<zan-badge-group :active-key="activeKey">
-  <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
-  <zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
-  <zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
-  <zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
+<zan-badge-group>
+  <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
+  <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
+  <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
+  <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
+</zan-badge-group>
+```
+:::
+
+#### 选中某个badge
+
+如果想默认选中某个`badge`，你可以在`zan-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
+
+:::demo 选中某个badge
+```html
+<zan-badge-group :active-key="2">
+  <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
+  <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
+  <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
+  <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
 </zan-badge-group>
 ```
 :::
@@ -38,7 +89,6 @@
 ### z-badge API
 | 参数       | 说明      | 类型       | 默认值       | 必须       |
 |-----------|-----------|-----------|-------------|-------------|
-| mark | badge的唯一key值 | `string`  | `''`          | `required`         |
 | title | badge的文案标题 | `string`  | `''`          | `required`          |
-| info | 当前badge的提示消息数量 | `string`  | `''`         |           |
-| url | 跳转链接 | `string`  | 全连接直接跳转或者hash          |           |
+| info | 当前badge的提示消息 | `string`  | `''`         |           |
+| url | 跳转链接 | `string`  | 链接直接跳转或者hash          |           |
diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md
index fe482d0cb..513b2acf5 100644
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@@ -7,17 +7,45 @@
     .zan-col {
       margin-bottom: 10px;
     }
-    .button-group {
-      font-size: 0;
-      padding: 0 20px;
-    }
   }
 }
 </style>
 
 ## Button 按钮
 
-### 按钮功能
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Button`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Button`组件了：
+
+```js
+import Vue from 'vue';
+import { Button } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/button.css';
+
+Vue.component(Button.name, Button);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Button`组件，这样只能在你注册的组件中使用`Button`：
+
+```js
+import { Button } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-button': Button
+  }
+};
+```
+
+### 代码演示
+
+#### 按钮功能
 
 只接受`primary`, `default`, `danger`三种类型，默认`default`。
 
@@ -37,7 +65,9 @@
 ```
 :::
 
-### 禁用状态
+#### 禁用状态
+
+在组件上加上`disabled`属性即可，此时按钮不可点击。
 
 :::demo 禁用状态
 ```html
@@ -49,9 +79,9 @@
 ```
 :::
 
-### 按钮尺寸
+#### 按钮尺寸
 
-只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。
+只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。
 
 :::demo 按钮尺寸
 ```html 
@@ -60,21 +90,25 @@
     <zan-button size="large">large</zan-button>
   </zan-col>
 </zan-row>
-<zan-row gutter="10">
-  <zan-col span="8">
-    <zan-button type="primary" block>normal</zan-button>
+<zan-row>
+  <zan-col span="24">
+    <zan-button size="normal">normal</zan-button>
   </zan-col>
-  <zan-col span="8">
-    <zan-button size="small" block>small</zan-button>
+</zan-row>
+<zan-row>
+  <zan-col span="24">
+    <zan-button size="small">small</zan-button>
   </zan-col>
-  <zan-col span="8">
-    <zan-button size="mini" block>mini</zan-button>
+</zan-row>
+<zan-row>
+  <zan-col span="24">
+    <zan-button size="mini">mini</zan-button>
   </zan-col>
 </zan-row>
 ```
 :::
 
-### 自定义按钮标签
+#### 自定义按钮标签
 
 按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。
 
@@ -88,7 +122,9 @@
 ```
 :::
 
-### loading按钮
+#### loading按钮
+
+`loading`状态的按钮。
 
 :::demo loading按钮
 ```html 
@@ -103,15 +139,25 @@
 ```
 :::
 
-### button group
+#### 页面底部操作按钮
 
-:::demo button group
+一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。
+
+:::demo 
 ```html 
-<div class="button-group">
-  <zan-button type="primary" size="small">确认付款</zan-button>
-  <zan-button size="small">确认收货</zan-button>
-  <zan-button size="small">取消订单</zan-button>
-</div>
+<zan-row>
+  <zan-col span="24">
+    <zan-button type="primary" bottom-action>立即购买</zan-button>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="12">
+    <zan-button bottom-action>加入购物车</zan-button>
+  </zan-col>
+  <zan-col span="12">
+    <zan-button type="primary" bottom-action>立即购买</zan-button>
+  </zan-col>
+</zan-row>
 ```
 :::
 
@@ -122,6 +168,7 @@
 | type | 按钮类型 | `string`  | `default`          | `primary`, `danger`   |
 | size | 按钮尺寸 | `string`  | `normal`          | `large`, `small`, `mini`  |
 | tag | 按钮标签 | `string`  | `button`          | `a`, `span`, ...  |
-| diabled | 按钮是否禁用 | `boolean`  |           |      |
-| block | 按钮是否显示为块级元素 | `boolean`  |           |      |
+| diabled | 按钮是否禁用 | `boolean`  |  `false`  |      |
+| block | 按钮是否显示为块级元素 | `boolean`  |   `false`   |      |
+| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean`  |   `false`   |      |
 
diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
index 09cdb975f..624341f95 100644
--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@@ -1,6 +1,38 @@
 ## Card 图文组件
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Card`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Card`组件了：
+
+```js
+import Vue from 'vue';
+import { Card } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/card.css';
+
+Vue.component(Card.name, Card);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Card`组件，这样只能在你注册的组件中使用`Card`：
+
+```js
+import { Card } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-card': Card
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 当没有底部按钮时，右侧内容会居中显示。
 
@@ -14,7 +46,7 @@
 ```
 :::
 
-### 高级用法
+#### 高级用法
 
 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
 
diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md
index 1383950c1..7fd13dc36 100644
--- a/docs/examples-docs/cell.md
+++ b/docs/examples-docs/cell.md
@@ -1,11 +1,3 @@
-<style>
-.official-img {
-  width: 31px;
-  vertical-align: middle;
-  border: 0;
-}
-</style>
-
 <script>
 export default {
   methods: {
@@ -16,32 +8,53 @@ export default {
 };
 </script>
 
-## Cell
+## Cell 单元格
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Cell`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Cell`组件了：
+
+```js
+import Vue from 'vue';
+import { Cell } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/cell.css';
+
+Vue.component(Cell.name, Cell);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Cell`组件，这样只能在你注册的组件中使用`Cell`：
+
+```js
+import { Cell } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-cell': Cell
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo 基础用法
 ```html
 <zan-cell-group>
-  <zan-cell title="单元格1" value="单元格1内容"></zan-cell>
+  <zan-cell title="单元格1" value="单元格1内容">
+  </zan-cell>
   <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
 </zan-cell-group>
 ```
 :::
 
-### 带*号，标明必填
-
-传入`required`属性
-
-:::demo  带*号，标明必填
-```html
-<zan-cell-group>
-  <zan-cell title="单元格1" required></zan-cell>
-</zan-cell-group>
-```
-:::
-
-### 标题带描述信息
+#### 标题带描述信息
 
 传入`label`属性，属性值为描述信息的值。
 
@@ -54,7 +67,7 @@ export default {
 ```
 :::
 
-### 带图标
+#### 带图标
 
 传入`icon`属性。
 
@@ -67,7 +80,7 @@ export default {
 ```
 :::
 
-### 可点击的链接
+#### 可点击的链接
 
 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
 
@@ -80,7 +93,7 @@ export default {
 ```
 :::
 
-### 高级用法
+#### 高级用法
 
 如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
 
@@ -90,7 +103,7 @@ export default {
   <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
     <template slot="title">
       <span class="zan-cell-text">起码运动馆</span>
-      <img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
+      <zan-tag type="danger">官方</zan-tag>
     </template>
   </zan-cell>
   <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
diff --git a/docs/examples-docs/checkbox.md b/docs/examples-docs/checkbox.md
index 21e3e65b2..3bc2fb72c 100644
--- a/docs/examples-docs/checkbox.md
+++ b/docs/examples-docs/checkbox.md
@@ -35,10 +35,44 @@ export default {
 };
 </script>
 
-## Checkbox组件
+## Checkbox 复选框
+
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Checkbox`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Checkbox`组件了：
+
+```js
+import Vue from 'vue';
+import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/checkbox.css';
+
+Vue.component(Checkbox.name, Checkbox);
+Vue.component(CheckboxGroup.name, CheckboxGroup);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Checkbox`组件，这样只能在你注册的组件中使用`Checkbox`：
+
+```js
+import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-checkbox': Checkbox,
+    'zan-checkbox-group': CheckboxGroup
+  }
+};
+```
 
 ### 基础用法
 
+通过`v-model`绑定值即可。当`Checkbox`选中时，绑定的值即为`true`，否则为`false`。当单个`Checkbox`使用时，更建议使用`Switch`组件。
+
 :::demo 基础用法
 ```html
 <div class="zan-checkbox-wrapper">
@@ -59,6 +93,8 @@ export default {
 
 ### 禁用状态
 
+设置`disabled`属性即可，此时`Checkbox`不能点击。
+
 :::demo 禁用状态
 ```html
 <div class="zan-checkbox-wrapper">
@@ -79,6 +115,8 @@ export default {
 
 ### Checkbox组
 
+需要与`zan-checkbox-group`一起使用，值通过`v-model`绑定在`zan-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
+
 :::demo Checkbox组
 ```html
 <div class="zan-checkbox-wrapper">
@@ -112,6 +150,8 @@ export default {
 
 ### 禁用Checkbox组
 
+禁用`zan-checkbox-group`，此时整个组都不可点击。
+
 :::demo 禁用Checkbox组
 ```html
 <div class="zan-checkbox-wrapper">
@@ -139,6 +179,8 @@ export default {
 
 ### 与Cell组件一起使用
 
+此时你需要再引入`Cell`和`CellGroup`组件。
+
 :::demo 与Cell组件一起使用
 ```html
 <zan-checkbox-group v-model="result">
diff --git a/docs/examples-docs/datetime-picker.md b/docs/examples-docs/datetime-picker.md
index f50a2543a..c3fc706bd 100644
--- a/docs/examples-docs/datetime-picker.md
+++ b/docs/examples-docs/datetime-picker.md
@@ -4,7 +4,8 @@ export default {
     return {
       minHour: 10,
       maxHour: 20,
-      minDate: new Date()
+      minDate: new Date(),
+      currentDate: null
     };
   },
 
@@ -23,7 +24,7 @@ export default {
 };
 </script>
 
-## Picker组件
+## Datetime Picker 时间选择
 
 模仿iOS中的`UIPickerView`。
 
@@ -31,8 +32,10 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-datetime-picker 
-  type="time" 
+<zan-datetime-picker
+  v-model="currentDate"
+  type="datetime"
+  format="yyyy.mm.dd hh时 mm分"
   :min-hour="minHour"
   :max-hour="maxHour"
   :min-date="minDate"
diff --git a/docs/examples-docs/dialog.md b/docs/examples-docs/dialog.md
index f1d3c64e9..a899befdd 100644
--- a/docs/examples-docs/dialog.md
+++ b/docs/examples-docs/dialog.md
@@ -39,19 +39,27 @@ export default {
 };
 </script>
 
-## Dialog组件
+## Dialog 弹出框
 
-### 基础用法
+### 使用指南
 
-:::demo 基础用法
+`Dialog`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
+
+```js
+import { Dialog } from '@youzan/zanui-vue';
+```
+
+### 代码演示
+
+#### 消息提示
+
+用于提示一些消息，只包含一个确认按钮。
+
+:::demo 消息提示
 ```html
 <zan-button @click="handleAlertClick">alert</zan-button>
 
-<zan-button @click="handleConfirmClick">confirm</zan-button>
-
 <script>
-import { Dialog } from 'src/index';
-
 export default {
   methods: {
     handleAlertClick() {
@@ -61,8 +69,24 @@ export default {
       }).then((action) => {
         console.log(action);
       });
-    },
+    }
+  }
+};
+</script>
+```
+:::
 
+#### 消息确认
+
+用于确认消息，包含取消和确认按钮。
+
+:::demo 消息确认
+```html
+<zan-button @click="handleConfirmClick">confirm</zan-button>
+
+<script>
+export default {
+  methods: {
     handleConfirmClick() {
       Dialog.confirm({
         title: 'confirm标题',
@@ -84,10 +108,21 @@ export default {
 <zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
 <mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
 
+### 方法
 
-### API
+#### Dialog.alert(options)
+
+消息提示时使用该方法。
+
+#### Dialog.confirm(options)
+
+消息确认时使用该方法。
+
+### Options
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | title | 标题 | `string`  |  |   |
 | message | 内容 | `string`  |  |   |
+| confirmButtonText | 确认按钮的文案 | `string`  |  `确认` |   |
+| cancelButtonText | 取消按钮的文案 | `string`  | `取消` |   |
diff --git a/docs/examples-docs/field.md b/docs/examples-docs/field.md
index 278657a74..0c9a9d32b 100644
--- a/docs/examples-docs/field.md
+++ b/docs/examples-docs/field.md
@@ -18,11 +18,43 @@ export default {
 };
 </script>
 
-## Field组件
+## Field 输入框
 
 表单中`input`或`textarea`的输入框。
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Field`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Field`组件了：
+
+```js
+import Vue from 'vue';
+import { Field } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/field.css';
+
+Vue.component(Field.name, Field);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Field`组件，这样只能在你注册的组件中使用`Field`：
+
+```js
+import { Field } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-field': Field
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 根据`type`属性显示不同的输入框。
 
@@ -36,7 +68,7 @@ export default {
 ```
 :::
 
-### 无label的输入框
+#### 无label的输入框
 
 不传入`label`属性即可。
 
@@ -48,7 +80,7 @@ export default {
 ```
 :::
 
-### 带border的输入框
+#### 带border的输入框
 
 传入一个`border`属性。
 
@@ -60,7 +92,7 @@ export default {
 ```
 :::
 
-### 禁用的输入框
+#### 禁用的输入框
 
 传入`disabled`属性即可。
 
@@ -72,7 +104,7 @@ export default {
 ```
 :::
 
-### 错误的输入框
+#### 错误的输入框
 
 传入`error`属性即可。
 
@@ -85,7 +117,7 @@ export default {
 :::
 
 
-### Autosize的输入框(仅支持textarea)
+#### Autosize的输入框(仅支持textarea)
 
 传入`autosize`属性, 且将`rows`设为1。
 
diff --git a/docs/examples-docs/icon.md b/docs/examples-docs/icon.md
index 4467a021f..d1d6ecc13 100644
--- a/docs/examples-docs/icon.md
+++ b/docs/examples-docs/icon.md
@@ -1,49 +1,185 @@
 <style>
 @component-namespace demo {
   @b icon {
+    .zan-col {
+      text-align: center;
+    }
 
     .zan-icon {
-      margin: 10px;
       font-size: 45px;
-      width: 56px;
-      text-align: center;
+      display: block;
+      margin: 15px 0;
     }
   }
 } 
 </style>
 
-## Icon
+## Icon 图标
 
-### 所有Icon
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Icon`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Icon`组件了：
+
+```js
+import Vue from 'vue';
+import { Icon } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/icon.css';
+
+Vue.component(Icon.name, Icon);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Icon`组件，这样只能在你注册的组件中使用`Icon`：
+
+```js
+import { Icon } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-icon': Icon
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+设置`name`属性为对应的图标名称即可，以下目前有的所有图标：
 
 :::demo 所有Icon
 ```html
-<zan-icon name="qr-invalid"></zan-icon>
-<zan-icon name="qr"></zan-icon>
-<zan-icon name="exchange"></zan-icon>
-<zan-icon name="close"></zan-icon>
-<zan-icon name="location"></zan-icon>
-<zan-icon name="upgrade"></zan-icon>
-<zan-icon name="check"></zan-icon>
-<zan-icon name="checked"></zan-icon>
-<zan-icon name="like-o"></zan-icon>
-<zan-icon name="like"></zan-icon>
-<zan-icon name="chat"></zan-icon>
-<zan-icon name="shop"></zan-icon>
-<zan-icon name="photograph"></zan-icon>
-<zan-icon name="add"></zan-icon>
-<zan-icon name="add2"></zan-icon>
-<zan-icon name="photo"></zan-icon>
-<zan-icon name="logistics"></zan-icon>
-<zan-icon name="edit"></zan-icon>
-<zan-icon name="passed"></zan-icon>
-<zan-icon name="cart"></zan-icon>
-<zan-icon name="arrow"></zan-icon>
-<zan-icon name="gift"></zan-icon>
-<zan-icon name="search"></zan-icon>
-<zan-icon name="clear"></zan-icon>
-<zan-icon name="success"></zan-icon>
-<zan-icon name="fail"></zan-icon>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="qr-invalid"></zan-icon>
+   <span>qr-invalid</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="qr"></zan-icon>
+   <span>qr</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="exchange"></zan-icon>
+   <span>exchange</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="close"></zan-icon>
+   <span>close</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="location"></zan-icon>
+   <span>location</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="upgrade"></zan-icon>
+   <span>upgrade</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="check"></zan-icon>
+   <span>check</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="checked"></zan-icon>
+   <span>checked</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="like-o"></zan-icon>
+   <span>like-o</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="like" style="color: red;"></zan-icon>
+   <span>like</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="chat"></zan-icon>
+   <span>chat</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="shop"></zan-icon>
+   <span>shop</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="photograph"></zan-icon>
+   <span>photograph</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="add"></zan-icon>
+   <span>add</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="add2"></zan-icon>
+   <span>add2</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="photo"></zan-icon>
+   <span>photo</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="logistics"></zan-icon>
+   <span>logistics</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="edit"></zan-icon>
+   <span>edit</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="passed"></zan-icon>
+   <span>passed</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="cart"></zan-icon>
+   <span>cart</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="arrow"></zan-icon>
+   <span>arrow</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="gift"></zan-icon>
+   <span>gift</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="search"></zan-icon>
+   <span>search</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="clear"></zan-icon>
+   <span>clear</span>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="success"></zan-icon>
+   <span>success</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="fail"></zan-icon>
+   <span>fail</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="contact"></zan-icon>
+   <span>contact</span>
+  </zan-col>
+</zan-row>
 ```
 :::
 
diff --git a/docs/examples-docs/image-preview.md b/docs/examples-docs/image-preview.md
index 05ec9729b..49ca32bba 100644
--- a/docs/examples-docs/image-preview.md
+++ b/docs/examples-docs/image-preview.md
@@ -10,13 +10,17 @@
 
 <script>
 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/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
+        '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'
       ]);
     }
   }
@@ -25,7 +29,17 @@ export default {
 
 ## ImagePreview 图片预览
 
-### 基础用法
+### 使用指南
+
+`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
+
+```js
+import { ImagePreview } from '@youzan/zanui-vue';
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo
 ```html
@@ -38,8 +52,8 @@ export default {
   methods: {
     handleImagePreview() {
       ImagePreview([
-        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
       ]);
     }
   }
@@ -48,3 +62,13 @@ export default {
 ```
 :::
 
+点击以下按钮查看手机端效果：
+
+<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
+<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
+
+### 方法参数
+
+| 参数名       | 说明      | 类型 |
+|-----------|-----------|-----------|
+| imageUrls | 需要预览的图片 | `Array` |
diff --git a/docs/examples-docs/layout.md b/docs/examples-docs/layout.md
index e69de29bb..40e3a21eb 100644
--- a/docs/examples-docs/layout.md
+++ b/docs/examples-docs/layout.md
@@ -0,0 +1,134 @@
+<style>
+@component-namespace demo {
+  @b layout {
+    .zan-row {
+      padding: 0 20px;
+    }
+    .zan-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>
+
+## Layout 布局
+
+主要提供了`zan-row`和`zan-col`两个组件来进行行列布局。
+
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Row`和`Col`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Row`和`Col`组件了：
+
+```js
+import Vue from 'vue';
+import { Row, Col } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/col.css';
+import '@youzan/zanui-vue/lib/zanui-css/row.css';
+
+Vue.component(Row.name, Row);
+Vue.component(Col.name, Col);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Row`和`Col`组件，这样只能在你注册的组件中使用`Row`和`Col`：
+
+```js
+import { Row, Col } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-row': Row,
+    'zan-col': Col
+  }
+};
+```
+
+### 代码演示
+
+#### 常规用法
+
+Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
+
+:::demo 常规用法
+```html
+<zan-row>
+  <zan-col span="8">
+    <div class="gray">span: 8</div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="white">span: 8</div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="gray">span: 8</div>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="4">
+    <div class="gray">span: 4</div>
+  </zan-col>
+  <zan-col span="10" offset="4">
+    <div class="gray">offset: 4, span: 10</div>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col offset="12" span="12">
+    <div class="gray">offset: 12, span: 12</div>
+  </zan-col>
+</zan-row>
+```
+:::
+
+#### 在列元素之间增加间距
+
+列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。
+
+:::demo 在列元素之间增加间距
+```html
+<zan-row gutter="10">
+  <zan-col span="8">
+    <div class="gray">span: 8</div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="gray">span: 8</div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="gray">span: 8</div>
+  </zan-col>
+</zan-row>
+```
+:::
+
+### API
+
+#### Row
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| gutter | 列元素之间的间距（单位为px） | `String | Number`  | -  |   |
+
+#### Column
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| span | 列元素宽度 | `String | Number`  | -  |   |
+| offset | 列元素偏移宽度 | `String | Number`  | -  |   |
diff --git a/docs/examples-docs/lazyload.md b/docs/examples-docs/lazyload.md
new file mode 100644
index 000000000..bd5cf0aec
--- /dev/null
+++ b/docs/examples-docs/lazyload.md
@@ -0,0 +1,169 @@
+<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>
+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>
+
+## Lazyload 图片懒加载
+
+### 使用指南
+
+`Lazyload`是`Vue`指令，所以需要使用它必须将它注册到`Vue`的指令中。
+
+```js
+import Vue from 'vue';
+import { Lazyload } from '@youzan/zanui-vue';
+
+Vue.use(Lazyload, options);
+```
+
+### 代码演示
+
+#### 基础用法
+
+比如商品详情页很多图片的情况需要对图片进行懒加载，只需将`v-lazy`指令的值设置为你需要懒加载的图片。
+
+:::demo 基础用法
+```html
+<ul class="image-list" ref="container">
+  <li v-for="img in imageList">
+    <img class="lazy-img" v-lazy="img">
+  </li>
+</ul>
+
+<script>
+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'
+      ]
+    };
+  }
+}
+</script>
+```
+:::
+
+#### 背景图懒加载
+
+和图片懒加载不同的背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址。还有一个需要注意的是你需要设置容器的样式，否则高度不会撑开。
+
+:::demo 背景图懒加载
+```html
+<ul class="image-list" ref="container">
+  <li v-for="img in backgroundImageList">
+    <div class="lazy-background" v-lazy:background-image="img"></div>
+  </li>
+</ul>
+
+<script>
+export default {
+  data() {
+    return {
+      backgroundImageList: [
+        'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
+        'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
+      ]
+    };
+  }
+}
+</script>
+```
+:::
+
+#### 懒加载模块
+
+懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。
+
+:::demo 懒加载模块
+```html
+<lazy-component @show="handleComponentShow">
+  <ul class="image-list">
+    <li v-for="img in componentImageList">
+      <img class="lazy-img" v-lazy="img">
+    </li>
+  </ul>
+</lazy-component>
+
+<script>
+export default {
+  data() {
+    return {
+      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>
+```
+:::
+
+### Options
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| loading | 加载时的图片 | `string`  |  |   |
+| error | 错误时的图片 | `string`  |  |   |
+| preload | 预加载高度的比例 | `string`  |  |   |
+| attempt | 尝试次数 | `number`  | `3` |   |
+| listenEvents | 监听的事件 | `Array`  | `['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']` |   |
+| adapter | 适配器 | `Object`  |  |   |
+| filter | 图片url过滤 | `Object`  |  |   |
+| lazyComponent | 是否能懒加载模块 | `boolean`  | `false` |   |
diff --git a/docs/examples-docs/loading.md b/docs/examples-docs/loading.md
index a57cd0636..f9ee38fff 100644
--- a/docs/examples-docs/loading.md
+++ b/docs/examples-docs/loading.md
@@ -1,49 +1,86 @@
 <style>
-.demo-loading__example{
-  width: 30px;
-  height: 30px;
-  padding: 20px;
-  margin: auto;
-  border-radius: 5px;
-  border: 1px solid transparent;
-}
+@component-namespace demo {
+  @b loading {
+    .zan-loading {
+      margin: 0 auto;
+    }
 
-.demo-loading__example--with-bg {
-  background-color: rgba(0, 0, 0, 0.5);
-}
+    .circle-loading {
+      margin: 20px auto;
+    }
 
-.demo-loading {
-  padding: 0 20px;
+    .demo-loading__example--with-bg {
+      background-color: rgba(0, 0, 0, 0.5);
+      margin: 0 auto;
+      width: 80px;
+      padding: 25px 0;
+      border-radius: 10px;
+    }
+  }
 }
 </style>
 
-## Loading 加载中
+## Loading 加载
 
-### 基础用法
+### 使用指南
 
-:::demo 基础用法
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Loading`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Loading`组件了：
+
+```js
+import Vue from 'vue';
+import { Loading } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/loading.css';
+
+Vue.component(Loading.name, Loading);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Loading`组件，这样只能在你注册的组件中使用`Loading`：
+
+```js
+import { Loading } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-loading': Loading
+  }
+};
+```
+
+### 代码演示
+
+#### 渐变深色spinner
+
+:::demo 渐变深色spinner
 ```html
-<div class="demo-loading">
-  <h2 class="demo-sub-title">渐变深色spinner</h2>
-  <div class="demo-loading__example">
-    <zan-loading class="some-customized-class"></zan-loading>
-  </div>
-  <h2 class="demo-sub-title">渐变浅色spinner</h2>
-  <div class="demo-loading__example demo-loading__example--with-bg">
-    <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
-  </div>
-  <h2 class="demo-sub-title">单色spinner</h2>
-  <div class="demo-loading__example">
-    <zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
-  </div>
-  <h2 class="demo-sub-title">单色spinner</h2>
-  <div class="demo-loading__example">
-    <zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
-  </div>
+<zan-loading class="some-customized-class"></zan-loading>
+```
+:::
+
+#### 渐变浅色spinner
+
+:::demo
+```html
+<div class="demo-loading__example demo-loading__example--with-bg">
+  <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
 </div>
 ```
 :::
 
+#### 单色spinner
+
+:::demo
+```html
+<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
+<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
+```
+:::
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
diff --git a/docs/examples-docs/panel.md b/docs/examples-docs/panel.md
index e551e43e8..850fc28b7 100644
--- a/docs/examples-docs/panel.md
+++ b/docs/examples-docs/panel.md
@@ -31,9 +31,41 @@
 
 ## Panel 面板
 
-面板只是一个容器，里面可以放入自定义的内容。
+### 使用指南
 
-### 基础用法
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Panel`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Panel`组件了：
+
+```js
+import Vue from 'vue';
+import { Panel } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/panel.css';
+
+Vue.component(Panel.name, Panel);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Panel`组件，这样只能在你注册的组件中使用`Panel`：
+
+```js
+import { Panel } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-panel': Panel
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+面板只是一个容器，里面可以放入自定义的内容。
 
 :::demo 基础用法
 ```html
@@ -45,9 +77,9 @@
 ```
 :::
 
-### 高级用法
+#### 高级用法
 
-使用具名`slot`自定义内容。
+使用`slot`自定义内容。比如在自定义内容中放入一个`zan-card`。
 
 :::demo 高级用法
 ```html
diff --git a/docs/examples-docs/picker.md b/docs/examples-docs/picker.md
index 6da630fc5..f766755e3 100644
--- a/docs/examples-docs/picker.md
+++ b/docs/examples-docs/picker.md
@@ -35,11 +35,41 @@ export default {
 };
 </script>
 
-## Picker组件
+## Picker 选择器
 
-模仿iOS中的`UIPickerView`。
+### 使用指南
 
-### 基础用法
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Picker`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Picker`组件了：
+
+```js
+import Vue from 'vue';
+import { Picker } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/picker.css';
+
+Vue.component(Picker.name, Picker);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Picker`组件，这样只能在你注册的组件中使用`Picker`：
+
+```js
+import { Picker } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-picker': Picker
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo 基础用法
 ```html
@@ -78,7 +108,7 @@ export default {
 ```
 :::
 
-### 带toolbar的Picker
+#### 带toolbar的Picker
 
 :::demo 带toolbar的Picker
 ```html
diff --git a/docs/examples-docs/popup.md b/docs/examples-docs/popup.md
index ea5ed0cef..85ae0135a 100644
--- a/docs/examples-docs/popup.md
+++ b/docs/examples-docs/popup.md
@@ -1,26 +1,12 @@
 <style>
 @component-namespace demo {
   @b popup {
+    .examples,
+    .example-block {
+      padding: 0 15px;
+    }
+
     .zan-popup-1 {
-      width: 100%;
-      height: 200px;
-      box-sizing: border-box;
-      padding: 20px;
-    }
-
-    .zan-popup-2 {
-      line-height: 50px;
-      text-align: center;
-      background-color: rgba(0, 0, 0, 0.701961);
-      color: #fff;
-    }
-
-    .zan-popup-3 {
-      width: 100%;
-      height: 100%;
-    }
-
-    .zan-popup-4 {
       width: 60%;
       box-sizing: border-box;
       padding: 20px;
@@ -28,8 +14,28 @@
       text-align: center;
     }
 
+    .zan-popup-2 {
+      width: 100%;
+      height: 200px;
+      box-sizing: border-box;
+      padding: 20px;
+    }
+
+    .zan-popup-3 {
+      line-height: 50px;
+      text-align: center;
+      background-color: rgba(0, 0, 0, 0.701961);
+      color: #fff;
+    }
+
+    .zan-popup-4,
+    .zan-popup-5 {
+      width: 100%;
+      height: 100%;
+    }
+
     .zan-button {
-      margin: 15px;
+      margin: 10px 0;
     }
   }
 }
@@ -47,15 +53,16 @@ export default {
       popupShow1: false,
       popupShow2: false,
       popupShow3: false,
-      popupShow4: false
+      popupShow4: false,
+      popupShow5: false
     }
   },
 
   watch: {
-    popupShow2(val) {
+    popupShow3(val) {
       if (val) {
         setTimeout(() => {
-          this.popupShow2 = false;
+          this.popupShow3 = false;
         }, 2000);
       }
     }
@@ -76,38 +83,87 @@ export default {
 };
 </script>
 
-## Popup组件
+## Popup 弹出菜单
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Popup`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Popup`组件了：
+
+```js
+import Vue from 'vue';
+import { Popup } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/popup.css';
+
+Vue.component(Popup.name, Popup);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Popup`组件，这样只能在你注册的组件中使用`Popup`：
+
+```js
+import { Popup } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-popup': Popup
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+`popup`默认情况下是从中间弹出。
 
 :::demo 基础用法
 ```html
-<div class="zan-row">
-  <zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button>
-</div>
-<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
+<zan-button block @click="popupShow1 = true">从中间弹出popup</zan-button>
+<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
+  从中间弹出popup
+</zan-popup>
+
+<script>
+export default {
+  data() {
+    return {
+      popupShow1: false
+    }
+  }
+};
+</script>
+```
+:::
+
+#### 从不同位置弹出菜单
+
+可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。
+
+:::demo 从不同位置弹出菜单
+```html
+<zan-button block @click="popupShow2 = true;">从下方弹出popup</zan-button>
+<zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
   <zan-button @click="showDialog">弹出dialog</zan-button>
 </zan-popup>
 
-<div class="zan-row">
-  <zan-button @click="popupShow2 = true">从上方弹出popup</zan-button>
-</div>
-<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
+<zan-button block @click="popupShow3 = true">从上方弹出popup</zan-button>
+<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
   更新成功
 </zan-popup>
 
-<div class="zan-row">
-  <zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
-</div>
-<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
-  <zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
+<zan-button block @click="popupShow4 = true">从右方弹出popup</zan-button>
+<zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
+  <zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
 </zan-popup>
 
-<div class="zan-row">
-  <zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
-</div>
-<zan-popup v-model="popupShow4" class="zan-popup-4">
-  从中间弹出popup
+<zan-button block @click="popupShow5 = true">从左方弹出popup</zan-button>
+<zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
+  <zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
 </zan-popup>
 
 <script>
@@ -132,7 +188,6 @@ export default {
   }
 };
 </script>
-
 ```
 :::
 
@@ -145,4 +200,9 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| value | 利用`v-model`绑定当前组件是否显示 | `boolean`  | |   |
+| value | 利用`v-model`绑定当前组件是否显示 | `boolean`  | `false` | `true`, `false`  |
+| overlay | 是否显示背景遮罩层 | `boolean`  | `true` | `true`, `false`  |
+| lockOnScroll | 背景是否跟随滚动 | `boolean`  | `false` | `true`, `false`  |
+| position | 弹出菜单位置 | `string`  |  | `top`, `bottom`, `right`, `left`  |
+| closeOnClickOverlay | 点击遮罩层是否关闭弹出菜单 | `boolean`  | `true` | `true`, `false`  |
+| transition | 弹出菜单的`transition` | `string`  | `popup-slide` |   |
diff --git a/docs/examples-docs/progress.md b/docs/examples-docs/progress.md
index 7261278ed..6dbd829e8 100644
--- a/docs/examples-docs/progress.md
+++ b/docs/examples-docs/progress.md
@@ -10,9 +10,43 @@
 </style>
 
 
-## Progress
+## Progress 进度条
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Progress`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Progress`组件了：
+
+```js
+import Vue from 'vue';
+import { Progress } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/progress.css';
+
+Vue.component(Progress.name, Progress);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Progress`组件，这样只能在你注册的组件中使用`Progress`：
+
+```js
+import { Progress } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-progress': Progress
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
 
 :::demo 基础用法
 ```html
@@ -29,7 +63,10 @@
 :::
 
 
-### Inactive
+#### Inactive
+
+是否置灰进度条，一般用于进度条被取消时。
+
 :::demo Inactive
 ```html
 <div class="demo-progress__wrapper">
@@ -40,14 +77,17 @@
 </div>
 <div class="demo-progress__wrapper">
   <zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
+</div>
 ```
 :::
 
 
-### 自定义颜色和文字
-:::demo 自定义颜色
+#### 自定义颜色和文字
+
+可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
+
+:::demo 自定义颜色和文字
 ```html
-</div>
 <div class="demo-progress__wrapper">
   <zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
 </div>
@@ -64,7 +104,7 @@
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| inactive | 是否只会 | `boolean`  | `false`          | `true`, `false`    |
+| inactive | 是否置灰 | `boolean`  | `false`          | `true`, `false`    |
 | percentage | 进度百分比 | `number`  | `false`          | `0-100`    |
 | pivotText | 文字显示 | `string`  | 百分比文字          | -   |
 | color | 进度条颜色 | `string`  | `#38f`    | hexvalue   |
diff --git a/docs/examples-docs/quantity.md b/docs/examples-docs/quantity.md
index 1368f62cd..a496d9b7d 100644
--- a/docs/examples-docs/quantity.md
+++ b/docs/examples-docs/quantity.md
@@ -23,9 +23,41 @@ export default {
 };
 </script>
 
-## Quantity
+## Quantity 数量选择
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Quantity`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Quantity`组件了：
+
+```js
+import Vue from 'vue';
+import { Quantity } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/quantity.css';
+
+Vue.component(Quantity.name, Quantity);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Quantity`组件，这样只能在你注册的组件中使用`Quantity`：
+
+```js
+import { Quantity } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-quantity': Quantity
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo 基础用法
 ```html
@@ -34,7 +66,9 @@ export default {
 ```
 :::
 
-### 禁用Quantity
+#### 禁用Quantity
+
+设置`disabled`属性，此时`quantity`不可改变。
 
 :::demo 禁用Quantity
 ```html
@@ -42,7 +76,7 @@ export default {
 ```
 :::
 
-### 高级用法
+#### 高级用法
 
 默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性。
 
diff --git a/docs/examples-docs/radio.md b/docs/examples-docs/radio.md
index ca2b84f98..8fbf28a18 100644
--- a/docs/examples-docs/radio.md
+++ b/docs/examples-docs/radio.md
@@ -25,10 +25,44 @@ export default {
 };
 </script>
 
-## Radio组件
+## Radio 单选框
+
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
+
+```js
+import Vue from 'vue';
+import { Radio, RadioGroup } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/radio.css';
+
+Vue.component(Radio.name, Radio);
+Vue.component(RadioGroup.name, RadioGroup);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Radio`组件，这样只能在你注册的组件中使用`Radio`：
+
+```js
+import { Radio, RadioGroup } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-radio': Radio,
+    'zan-radio-group': RadioGroup
+  }
+};
+```
 
 ### 基础用法
 
+通过`v-model`绑定值即可。当`Radio`选中时，绑定的值即为`Radio`中`name`属性设置的值。
+
 :::demo 基础用法
 ```html
 <div class="zan-radios">
@@ -50,6 +84,8 @@ export default {
 
 ### 禁用状态
 
+设置`disabled`属性即可，此时`Radio`不能点击。
+
 :::demo 禁用状态
 ```html
 <div class="zan-radios">
@@ -71,6 +107,8 @@ export default {
 
 ### radio组
 
+需要与`zan-radio-group`一起使用，在`zan-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
+
 :::demo radio组
 ```html
 <div class="zan-radios">
@@ -94,6 +132,8 @@ export default {
 
 ### 与Cell组件一起使用
 
+此时你需要再引入`Cell`和`CellGroup`组件。
+
 :::demo 与Cell组件一起使用
 ```html
 <zan-radio-group v-model="radio4">
diff --git a/docs/examples-docs/search.md b/docs/examples-docs/search.md
index cf9f051df..63adeb5f6 100644
--- a/docs/examples-docs/search.md
+++ b/docs/examples-docs/search.md
@@ -3,18 +3,59 @@ export default {
   methods: {
     goSearch(value) {
       alert(value)
+    },
+    handleChange(value) {
+      console.log(value);
+    },
+    handleCancel() {
+      alert('cancel');
     }
   }
 };
 </script>
 
-## Search 组件
+## Search 搜索
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Search`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Search`组件了：
+
+```js
+import Vue from 'vue';
+import { Search } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/search.css';
+
+Vue.component(Search.name, Search);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Search`组件，这样只能在你注册的组件中使用`Search`：
+
+```js
+import { Search } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-search': Search
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+如果你只需要在搜索时有个回调，只要监听一个`search`事件。
 
 :::demo 基础用法
 ```html
 <zan-search placeholder="商品名称" @search="goSearch"></zan-search>
+
 <script>
 export default {
   methods: {
@@ -27,8 +68,42 @@ export default {
 ```
 :::
 
+#### 监听对应事件
+
+除了`search`事件，还有`change`和`cancel`事件，`change`事件在`input`输入框每次`change`时触发，适用于实时搜索等，`cancel`在取消按钮点击时触发。
+
+:::demo 监听对应事件
+```html
+<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></zan-search>
+
+<script>
+export default {
+  methods: {
+    goSearch(value) {
+      alert(value)
+    },
+    handleChange(value) {
+      console.log(value);
+    },
+    handleCancel() {
+      alert('cancel');
+    }
+  }
+};
+</script>
+```
+:::
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 必须       |
 |-----------|-----------|-----------|-------------|-------------|
-| placeholder | `input`的`placeholder`文案 | `string`  |           |     |
\ No newline at end of file
+| placeholder | `input`的`placeholder`文案 | `string`  |           |     |
+
+### Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| change | `input`输入框每次`change`时触发，适用于实时搜索等 | value：当前`input`输入框的值  |
+| cancel | 取消搜索 |   |
+| search | 确定搜索 | value：当前`input`输入框的值  |
diff --git a/docs/examples-docs/steps.md b/docs/examples-docs/steps.md
index b5beffa8e..de9eb5699 100644
--- a/docs/examples-docs/steps.md
+++ b/docs/examples-docs/steps.md
@@ -30,11 +30,45 @@ export default {
 
 ## Steps 步骤条
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Steps`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Steps`组件了：
+
+```js
+import Vue from 'vue';
+import { Steps, Step } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/steps.css';
+
+Vue.component(Steps.name, Steps);
+Vue.component(Step.name, Step);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Steps`组件，这样只能在你注册的组件中使用`Steps`：
+
+```js
+import { Steps, Step } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-steps': Steps,
+    'zan-step': Step
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo 基础用法
 ```html
-<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
+<zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
   <zan-step>买家下单</zan-step>
   <zan-step>商家接单</zan-step>
   <zan-step>买家提货</zan-step>
@@ -61,7 +95,9 @@ export default {
 ```
 :::
 
-### 只显示步骤条
+#### 只显示步骤条
+
+当你不设置`title`或`description`属性时，就会🈯️显示步骤条，而没有步骤的详细信息。
 
 :::demo 只显示步骤条
 ```html
@@ -89,5 +125,6 @@ export default {
 
 | 名称       | 说明      |
 |-----------|-----------|
+| icon | 自定义icon区域 |
 | message-extra | 状态栏添加额外的元素 |
 
diff --git a/docs/examples-docs/swipe.md b/docs/examples-docs/swipe.md
index 8449eb4e7..adb413b6a 100644
--- a/docs/examples-docs/swipe.md
+++ b/docs/examples-docs/swipe.md
@@ -12,34 +12,132 @@
 }
 </style>
 
-## Swipe
+<script>
+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>
+
+## Swipe 轮播
+
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Swipe`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Swipe`组件了：
+
+```js
+import Vue from 'vue';
+import { Swipe, SwipeItem } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/swipe.css';
+
+Vue.component(Swipe.name, Swipe);
+Vue.component(SwipeItem.name, SwipeItem);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Swipe`组件，这样只能在你注册的组件中使用`Swipe`：
+
+```js
+import { Swipe, SwipeItem } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-swipe': Swipe,
+    'zan-swipe-item': SwipeItem
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo 基础用法
 ```html
 <zan-swipe>
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
-  </zan-swipe-item>
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+  <zan-swipe-item v-for="img in images">
+    <img v-lazy="img" alt="">
   </zan-swipe-item>
 </zan-swipe>
+
+<script>
+export default {
+  data() {
+    return {
+      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'
+      ]
+    };
+  }
+};
+</script>
 ```
 :::
 
-### 自动轮播
+#### 自动轮播
+
+需要设置`auto-play`属性为`true`，即会自动轮播。
 
 :::demo 自动轮播
 ```html
-<zan-swipe :auto-play="true">
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
-  </zan-swipe-item>
-  <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+<zan-swipe auto-play @pagechange:end="handlePageEnd">
+  <zan-swipe-item v-for="img in autoImages">
+    <img v-lazy="img" alt="">
   </zan-swipe-item>
 </zan-swipe>
+
+<script>
+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'
+      ]
+    };
+  },
+
+  methods: {
+    handlePageEnd(page, index) {
+      console.log(page, index);
+    }
+  }
+};
+</script>
 ```
 :::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| autoPlay | 是否自动轮播 | `boolean`  |    `false`     |    `true`, `false`      |
+| showIndicators | 是否显示指示器 | `boolean`  |   `true`       |   `true`, `false`       |
+
+### 事件
+
+| 事件名       | 说明      | 参数 |
+|-----------|-----------|-----------|
+| `pagechange:end` | 每一页轮播结束后触发 | `(elem, currIndex)`：`elem`为触发页当前的DOM节点 |
diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md
index b9a0e332d..4ebdd4949 100644
--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@@ -1,83 +1,122 @@
 <style>
   @component-namespace demo {
     @b switch {
-      padding: 0 15px 15px;
-
-      @e wrapper {
-        width: 33.33%;
-        float: left;
+      .examples {
         text-align: center;
       }
 
       @e text {
-        margin: 20px 0;
+        margin: 20px auto;
       }
     }
   }
 </style>
 
 <script>
+import Dialog from 'packages/dialog';
+
 export default {
   data() {
     return {
-      switchState: true
+      switchState1: true,
+      switchState2: true,
+      switchStateTrue: true,
+      switchStateFalse: false
     };
   },
-  computed: {
-    switchStateText() {
-      return this.switchState ? ' ON' : 'OFF';
-    }
-  },
   methods: {
     updateState(newState) {
-      this.switchState = newState;
+      const state = newState ? '打开' : '关闭';
+      Dialog.confirm({
+        title: '提醒',
+        message: '是否' + state + '开关？'
+      }).then((action) => {
+        this.switchState2 = newState;
+      }, (error) => {});
     }
   }
 };  
 </script>
 
-## Switch组件
+## Switch 开关
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Switch`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Switch`组件了：
+
+```js
+import Vue from 'vue';
+import { Switch } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/switch.css';
+
+Vue.component(Switch.name, Switch);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Switch`组件，这样只能在你注册的组件中使用`Switch`：
+
+```js
+import { Switch } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-switch': Switch
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo 基础用法
 ```html
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
-  <div class="demo-switch__text">{{switchStateText}}</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
-  <div class="demo-switch__text">ON, DISABLED</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
-  <div class="demo-switch__text">OFF, DISABLED</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
-  <div class="demo-switch__text">ON, LOADING</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
-  <div class="demo-switch__text">OFF, LOADING</div>
-</div>
+<zan-switch class="some-customized-class" v-model="switchState1"></zan-switch>
+<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
+
 
 <script>
 export default {
   data() {
     return {
-      switchState: true
+      switchState1: true
+    };
+  }
+};  
+</script>
+```
+:::
+
+:::demo 基础用法
+```html
+<zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
+<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
+
+
+<script>
+import Dialog from 'packages/dialog';
+
+export default {
+  data() {
+    return {
+      switchState2: true
     };
-  },
-  computed: {
-    switchStateText() {
-      return this.switchState ? ' ON' : 'OFF';
-    }
   },
   methods: {
     updateState(newState) {
-      this.switchState = newState;
+      const state = newState ? '打开' : '关闭';
+      Dialog.confirm({
+        title: '提醒',
+        message: '是否' + state + '开关？'
+      }).then((action) => {
+        this.switchState2 = newState;
+      }, (error) => {
+      });
     }
   }
 };  
@@ -85,10 +124,62 @@ export default {
 ```
 :::
 
+
+#### 禁用状态
+
+设置`disabled`属性为`true`，此时开关不可点击。
+
+:::demo
+```html
+<zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
+<div class="demo-switch__text">ON, DISABLED</div>
+
+<zan-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></zan-switch>
+<div class="demo-switch__text">OFF, DISABLED</div>
+
+<script>
+export default {
+  data() {
+    return {
+      switchStateTrue: true,
+      switchStateFalse: false
+    };
+  }
+};  
+</script>
+```
+:::
+
+#### loading状态
+
+设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。
+
+:::demo
+```html
+<zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
+<div class="demo-switch__text">ON, LOADING</div>
+
+<zan-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></zan-switch>
+<div class="demo-switch__text">OFF, LOADING</div>
+
+<script>
+export default {
+  data() {
+    return {
+      switchStateTrue: true,
+      switchStateFalse: false
+    };
+  }
+};  
+</script>
+```
+:::
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| checked | 开关状态 | `boolean`  | `false`          | `true`, `false`    |
+| v-model | 开关状态 | `boolean`  | `false`          | `true`, `false`    |
 | loading | loading状态 | `boolean`  | `false`          | `true`, `false`    |
 | disabled | 禁用状态 | `boolean`  | `false`          | `true`, `false`    |
+| onChange | 开关状态切换回调(默认则改变开关状态) | `function`  | -          | - |
diff --git a/docs/examples-docs/tab.md b/docs/examples-docs/tab.md
index 9aad91c35..5b9c2a7c5 100644
--- a/docs/examples-docs/tab.md
+++ b/docs/examples-docs/tab.md
@@ -5,6 +5,22 @@
       background-color: #fff;
       padding: 20px;
     }
+
+    .zan-tabs--card .zan-tab__pane {
+      background-color: transparent;
+    }
+
+    .custom-tabwrap .zan-tab-active {
+      color: #20a0ff;
+    }
+    .custom-tabwrap .zan-tabs-nav-bar {
+      background: #20a0ff;
+    }
+    .custom-pane {
+      text-align: center;
+      height: 50px;
+      line-height: 50px;
+    }
   }
 }
 </style>
@@ -24,14 +40,54 @@ export default {
   methods: {
     popalert() {
       alert('haha')
+    },
+
+    handleTabClick(index) {
+      alert(index);
     }
   }
 };
 </script>
 
-## Tab 组件
+## Tab 标签
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Tab`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tab`组件了：
+
+```js
+import Vue from 'vue';
+import { Tab, Tabs } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/tab.css';
+
+Vue.component(Tab.name, Tab);
+Vue.component(Tabs.name, Tabs);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Tab`组件，这样只能在你注册的组件中使用`Tab`：
+
+```js
+import { Tab, Tabs } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-tab': Tab,
+    'zan-tabs': Tabs
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+默认情况下是启用第一个`tab`。
 
 :::demo 基础用法
 ```html
@@ -43,18 +99,38 @@ export default {
   <zan-tab title="选项五">内容五</zan-tab>
 </zan-tabs>
 ```
-
 :::
-### 禁用用法
-:::demo 禁用用法
+
+#### active特定tab
+
+可以在`zan-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
+
+:::demo 基础用法
 ```html
 <zan-tabs :active="active">
   <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab disable title="选项二" @disable="popalert">内容二</zan-tab>
+  <zan-tab title="选项二">内容二</zan-tab>
   <zan-tab title="选项三">内容三</zan-tab>
   <zan-tab title="选项四">内容四</zan-tab>
   <zan-tab title="选项五">内容五</zan-tab>
 </zan-tabs>
+```
+:::
+
+#### 禁用tab
+
+在对应的`zan-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
+
+:::demo 禁用tab
+```html
+<zan-tabs>
+  <zan-tab title="选项一">内容一</zan-tab>
+  <zan-tab title="选项二" disabled @disabled="popalert">内容二</zan-tab>
+  <zan-tab title="选项三">内容三</zan-tab>
+  <zan-tab title="选项四">内容四</zan-tab>
+  <zan-tab title="选项五">内容五</zan-tab>
+</zan-tabs>
+
 <script>
 export default {
   methods: {
@@ -67,8 +143,11 @@ export default {
 ```
 :::
 
-### card样式用法
-:::demo card样式用法
+#### card样式
+
+`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`zan-tabs`上设置`type`为`card`改为card样式。
+
+:::demo card样式
 ```html
 <zan-tabs type="card">
   <zan-tab title="选项一">内容一</zan-tab>
@@ -80,18 +159,12 @@ export default {
 ```
 :::
 <style>
-  .page-tab {
-    padding: 0 15px;
-  }
-  .custom-tabwrap .zan-tab-active{
+  .custom-tabwrap .zan-tab-active {
     color: #20a0ff;
   }
-  .custom-tabwrap .zan-tabs-nav-bar{
+  .custom-tabwrap .zan-tabs-nav-bar {
     background: #20a0ff;
   }
-  .custom-tab {
-    font-weight: bold;
-  }
   .custom-pane {
     text-align: center;
     height: 50px;
@@ -99,29 +172,27 @@ export default {
   }
 </style>
 
-### 自定义样式用法
-:::demo 自定义样式用法
+#### 自定义样式
+
+可以在`zan-tabs`上设置对应的`class`，从而自定义某些样式。
+
+:::demo 自定义样式
 ```html
-<zan-tabs active="2" navclass="custom-tabwrap">
+<zan-tabs active="2" class="custom-tabwrap">
     <zan-tab title="选项一" class="custom-pane">内容一</zan-tab>
     <zan-tab title="选项二" class="custom-pane">内容二</zan-tab>
     <zan-tab title="选项三" class="custom-pane">内容三</zan-tab>
     <zan-tab title="选项四" class="custom-pane">内容四</zan-tab>
     <zan-tab title="选项五" class="custom-pane">内容五</zan-tab>
 </zan-tabs>
+
 <style>
-  .page-tab {
-    padding: 0 15px;
-  }
-  .custom-tabwrap .zan-tab-active{
+  .custom-tabwrap .zan-tab-active {
     color: #20a0ff;
   }
-  .custom-tabwrap .zan-tabs-nav-bar{
+  .custom-tabwrap .zan-tabs-nav-bar {
     background: #20a0ff;
   }
-  .custom-tab {
-    font-weight: bold;
-  }
   .custom-pane {
     text-align: center;
     height: 50px;
@@ -131,6 +202,32 @@ export default {
 ```
 :::
 
+#### click事件
+
+可以在`zan-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
+
+:::demo click事件
+```html
+<zan-tabs @click="handleTabClick">
+  <zan-tab title="选项一">内容一</zan-tab>
+  <zan-tab title="选项二">内容二</zan-tab>
+  <zan-tab title="选项三">内容三</zan-tab>
+  <zan-tab title="选项四">内容四</zan-tab>
+  <zan-tab title="选项五">内容五</zan-tab>
+</zan-tabs>
+
+<script>
+export default {
+  methods: {
+    handleTabClick(index) {
+      alert(index);
+    }
+  }
+};
+</script>
+```
+:::
+
 ### zan-tabs API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选      |
@@ -141,8 +238,16 @@ export default {
 
 
 ### zan-tab API
+
 | 参数       | 说明      | 类型       | 默认值       | 可选       |
 |-----------|-----------|-----------|-------------|-------------|
 | title | tab的标题 | `string`  |         |          |
-| disable | 是否禁用这个tab | `boolean`  | `false`      |           |
+| disabled | 是否禁用这个tab | `boolean`  | `false`      |           |
+
+### zan-tabs Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| click | 某个tab点击事件 | index：点击的`tab`的索引 |
+| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
 
diff --git a/docs/examples-docs/tag.md b/docs/examples-docs/tag.md
index 126ba5c38..d7f1af015 100644
--- a/docs/examples-docs/tag.md
+++ b/docs/examples-docs/tag.md
@@ -8,15 +8,49 @@
 }
 </style>
 
-## Tag 组件
+## Tag 标记
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Tag`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tag`组件了：
+
+```js
+import Vue from 'vue';
+import { Tag } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/tag.css';
+
+Vue.component(Tag.name, Tag);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Tag`组件，这样只能在你注册的组件中使用`Tag`：
+
+```js
+import { Tag } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-tag': Tag
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+`Tag`目前有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
 
 :::demo 基础用法
 ```html
 <div class="tags-container">
   <zan-tag>返现</zan-tag>
-  <zan-tag :plain="true">返现</zan-tag>
+  <zan-tag plain>返现</zan-tag>
 </div>
 <div class="tags-container">
   <zan-tag type="danger">返现</zan-tag>
@@ -26,24 +60,26 @@
 ```
 :::
 
-### 高级用法
+#### 高级用法
+
+设置`plain`为`true`时表示空心的`tag`，还可以设置`mark`为`true`，表示是否为标记。
 
 :::demo 高级用法
 ```html
 <div class="tags-container">
   <zan-tag type="danger">返现</zan-tag>
-  <zan-tag :plain="true" type="danger">返现</zan-tag>
+  <zan-tag plain type="danger">返现</zan-tag>
 </div>
 <div class="tags-container">
   <zan-tag type="primary">返现</zan-tag>
-  <zan-tag :plain="true" type="primary">返现</zan-tag>
+  <zan-tag plain type="primary">返现</zan-tag>
 </div>
 <div class="tags-container">
   <zan-tag type="success">返现</zan-tag>
-  <zan-tag :plain="true" type="success">返现</zan-tag>
+  <zan-tag plain type="success">返现</zan-tag>
 </div>
 <div class="tags-container">
-  <zan-tag type="danger" :mark="true">返现</zan-tag>
+  <zan-tag type="danger" mark>返现</zan-tag>
 </div>
 ```
 :::
diff --git a/docs/examples-docs/toast.md b/docs/examples-docs/toast.md
index a828742e4..53197e154 100644
--- a/docs/examples-docs/toast.md
+++ b/docs/examples-docs/toast.md
@@ -38,9 +38,9 @@ export default {
         type: 'success',
         message: leftSec.toString()
       });
-      window.setInterval(() => {
+      const id = window.setInterval(() => {
         if (leftSec <= 1) {
-          window.clearInterval();
+          window.clearInterval(id);
           toast.message = '跳转中...'
           return;
         }
@@ -63,9 +63,19 @@ export default {
 };
 </script>
 
-## Toast
+## Toast 轻提示
 
-### 基础用法
+### 使用指南
+
+`Toast`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
+
+```js
+import { Toast } from '@youzan/zanui-vue';
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo 基础用法
 ```html
@@ -106,9 +116,9 @@ export default {
         type: 'success',
         message: leftSec.toString()
       });
-      window.setInterval(() => {
+      const id = window.setInterval(() => {
         if (leftSec <= 1) {
-          window.clearInterval();
+          window.clearInterval(id);
           toast.message = '跳转中...'
           return;
         }
@@ -121,7 +131,7 @@ export default {
 ```
 :::
 
-### 手动关闭
+#### 手动关闭
 
 :::demo 手动关闭
 ```html
@@ -134,10 +144,10 @@ import { Toast } from 'src/index';
 export default {
   methods: {
     showToast() {
-      this.toast = Toast('我是提示文案，建议不超过十五字~');
+      Toast('我是提示文案，建议不超过十五字~');
     },
     closeToast() {
-      this.toast.clear();
+      Toast.clear();
     }
   }
 };
@@ -146,7 +156,7 @@ export default {
 :::
 
 
-### 传入html
+#### 传入html
 
 :::demo 手动关闭
 ```html
@@ -171,7 +181,8 @@ export default {
 
 
 ### 基础用法
-### Toast(options)
+
+#### Toast(options)
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
@@ -181,7 +192,8 @@ export default {
 | duration | 时长(ms) | Number  | 3000ms | -|
 
 ### 快速用法
-### Toast(message) || Toast(message, options)
+
+#### Toast(message) || Toast(message, options)
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
@@ -189,14 +201,14 @@ export default {
 | forbidClick | 不允许背景点击 | Boolean  | false | true, false|
 | duration | 时长(ms) | Number  | 3000ms | -|
 
-### Toast.loading() || Toast.loading(message, options)
+#### Toast.loading() || Toast.loading(message, options)
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | forbidClick | 不允许背景点击 | Boolean  | false | true, false|
 | duration | 时长(ms) | Number  | 3000ms | -|
 
-### Toast.success(message) || Toast.success(message, options)
+#### Toast.success(message) || Toast.success(message, options)
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
@@ -204,7 +216,7 @@ export default {
 | forbidClick | 不允许背景点击 | Boolean  | false | true, false|
 | duration | 时长(ms) | Number  | 3000ms | -|
 
-### Toast.fail(message) || Toast.fail(message, options)
+#### Toast.fail(message) || Toast.fail(message, options)
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
@@ -212,5 +224,6 @@ export default {
 | forbidClick | 不允许背景点击 | Boolean  | false | true, false|
 | duration | 时长(ms) | Number  | 3000ms | -|
 
-### instanceOfToast.clear()
+#### Toast.clear()
+
 关闭toast。
diff --git a/docs/examples-docs/uploader.md b/docs/examples-docs/uploader.md
index c65780f6c..36466c171 100644
--- a/docs/examples-docs/uploader.md
+++ b/docs/examples-docs/uploader.md
@@ -12,9 +12,42 @@ export default {
   }
 };  
 </script>
-## Uploader 组件
 
-### 基础用法
+## Uploader 图片上传
+
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Uploader`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Uploader`组件了：
+
+```js
+import Vue from 'vue';
+import { Uploader } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/uploader.css';
+
+Vue.component(Uploader.name, Uploader);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Uploader`组件，这样只能在你注册的组件中使用`Uploader`：
+
+```js
+import { Uploader } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-uploader': Uploader
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo 基础用法
 ```html
@@ -26,7 +59,9 @@ export default {
 </div>
 ```
 :::
-### 自定义上传图标
+
+#### 自定义上传图标
+
 :::demo 自定义上传图标
 ```html
 <div class="uploader-container">
diff --git a/docs/examples-docs/waterfall.md b/docs/examples-docs/waterfall.md
index 7ba9035da..2155b2689 100644
--- a/docs/examples-docs/waterfall.md
+++ b/docs/examples-docs/waterfall.md
@@ -1,6 +1,34 @@
 ## Waterfall 瀑布流
 
-### 基础用法
+### 使用指南
+
+#### 全局注册
+
+`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装：
+
+```js
+import Vue from 'vue';
+import { Waterfall } from '@youzan/zanui-vue';
+
+Waterfall.install(Vue);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用`Waterfall`，你可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
+
+```js
+import { Waterfall } from '@youzan/zanui-vue';
+
+export default {
+  directives: {
+    WaterfallLower: Waterfall('lower'),
+    WaterfallUpper: Waterfall('upper')
+  }
+};
+```
+
+### 代码演示
 
 <script>
 export default {
@@ -48,6 +76,8 @@ export default {
   }
 </style>
 
+#### 基础用法
+
 :::demo 基础用法
 ```html
 <div class="waterfall">
@@ -76,6 +106,8 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
+| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `function`  | - |  |
+| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `function`  | - |  |
 | waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | `string`  | - |  |
 | waterfall-offset | 触发瀑布流加载的阈值 | `number`  | `300` |   |
 
diff --git a/docs/ExamplesApp.vue b/docs/src/ExamplesApp.vue
similarity index 100%
rename from docs/ExamplesApp.vue
rename to docs/src/ExamplesApp.vue
diff --git a/docs/src/ExamplesDocsApp.vue b/docs/src/ExamplesDocsApp.vue
new file mode 100644
index 000000000..19ad99e08
--- /dev/null
+++ b/docs/src/ExamplesDocsApp.vue
@@ -0,0 +1,40 @@
+<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>
+  </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);
+
+export default {
+  data() {
+    return {
+      navConfig: navConfig
+    };
+  }
+};
+</script>
diff --git a/docs/components/demo-block.vue b/docs/src/components/demo-block.vue
similarity index 89%
rename from docs/components/demo-block.vue
rename to docs/src/components/demo-block.vue
index f0291eebf..50dfb211e 100644
--- a/docs/components/demo-block.vue
+++ b/docs/src/components/demo-block.vue
@@ -23,25 +23,27 @@ export default {
 
     code {
       font-family: Menlo, Monaco, Consolas, Courier, monospace;
+      overflow: auto;
+      white-space: pre-wrap;
     }
 
     .examples {
       width: 320px;
-      float: right;
       box-sizing: border-box;
-      padding: 10px 0 0;
-      min-height: 200px;
-      max-height: 600px;
+      padding: 10px 0;
+      min-height: 60px;
+      max-height: 500px;
       overflow: auto;
       background-color: #F8F8F8;
       border: 1px solid #E5E5E5;
+      float: right;
     }
 
     .highlight {
-      margin-right: 345px;
       box-sizing: border-box;
       border: 1px solid #E5E5E5;
       border-radius: 4px;
+      margin-right: 345px;
 
       pre {
         margin: 0;
diff --git a/docs/components/demo-list.vue b/docs/src/components/demo-list.vue
similarity index 96%
rename from docs/components/demo-list.vue
rename to docs/src/components/demo-list.vue
index 46b148166..3369229e4 100644
--- a/docs/components/demo-list.vue
+++ b/docs/src/components/demo-list.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import navConfig from '../nav.config.json';
+import navConfig from '../nav.config.js';
 import MobileNav from './mobile-nav';
 
 export default {
diff --git a/docs/components/example-block.vue b/docs/src/components/example-block.vue
similarity index 100%
rename from docs/components/example-block.vue
rename to docs/src/components/example-block.vue
diff --git a/docs/components/footer-nav.vue b/docs/src/components/footer-nav.vue
similarity index 86%
rename from docs/components/footer-nav.vue
rename to docs/src/components/footer-nav.vue
index dc57da7f7..cdfcbdad7 100644
--- a/docs/components/footer-nav.vue
+++ b/docs/src/components/footer-nav.vue
@@ -6,7 +6,7 @@
       class="footer-nav__link footer-nav__left"
       @click="handleNavClick('prev')">
       <zan-icon name="arrow"></zan-icon>
-      {{ leftNav.title }}
+      <span>{{ leftNav.title }}</span>
     </a>
     <a
       href="javascript:void(0)"
@@ -14,13 +14,13 @@
       class="footer-nav__link footer-nav__right"
       @click="handleNavClick('next')">
       <zan-icon name="arrow"></zan-icon>
-      {{ rightNav.title }}
+      <span>{{ rightNav.title }}</span>
     </a>
   </div>
 </template>
 
 <script>
-import navConfig from '../nav.config.json';
+import navConfig from '../nav.config.js';
 
 export default {
   data() {
@@ -85,27 +85,25 @@ export default {
 <style>
 @component-namespace footer {
   @b nav {
-    padding: 24px 0;
-    font-size: 30px;
+    padding: 24px 40px;
     overflow: hidden;
+    border-top: 1px solid #e5e5e5;
 
     @e link {
       color: #3388FF;
       overflow: hidden;
-      padding-top: 35px;
       position: relative;
+      font-size: 20px;
+      line-height: 1.5;
 
       .zan-icon {
         width: 20px;
-        display: block;
         font-size: 12px;
         line-height: 20px;
         border: 2px solid #3388FF;
         border-radius: 50%;
         text-align: center;
-        margin-bottom: 10px;
-        position: absolute;
-        top: 0;
+        margin-top: 3px;
       }
     }
 
@@ -113,8 +111,9 @@ export default {
       float: left;
 
       .zan-icon {
+        float: left;
         transform: rotate(180deg);
-        left: 0;
+        margin-right: 10px;
       }
     }
 
@@ -122,7 +121,8 @@ export default {
       float: right;
 
       .zan-icon {
-        right: 0;
+        float: right;
+        margin-left: 10px;
       }
     }
   }
diff --git a/docs/src/components/mobile-computed.js b/docs/src/components/mobile-computed.js
new file mode 100644
index 000000000..fa478aa69
--- /dev/null
+++ b/docs/src/components/mobile-computed.js
@@ -0,0 +1,23 @@
+import MobilePopup from './mobile-popup.vue';
+
+export default {
+  components: {
+    MobilePopup
+  },
+
+  computed: {
+    mobileUrl() {
+      if (process.env.NODE_ENV === 'production') {
+        return '/vue/examples#' + location.pathname.slice(4);
+      } else {
+        return '/examples.html#' + location.pathname.slice(4);
+      }
+    }
+  },
+
+  data() {
+    return {
+      mobileShow: false
+    };
+  }
+};
diff --git a/docs/components/mobile-nav.vue b/docs/src/components/mobile-nav.vue
similarity index 100%
rename from docs/components/mobile-nav.vue
rename to docs/src/components/mobile-nav.vue
diff --git a/docs/components/mobile-popup.vue b/docs/src/components/mobile-popup.vue
similarity index 93%
rename from docs/components/mobile-popup.vue
rename to docs/src/components/mobile-popup.vue
index 160872d5b..b767556f5 100644
--- a/docs/components/mobile-popup.vue
+++ b/docs/src/components/mobile-popup.vue
@@ -1,5 +1,5 @@
 <template>
-  <zan-popup v-model="currentValue">
+  <zan-popup v-model="currentValue" :lock-on-scroll="true">
     <div class="mobile-popup">
       <iframe :src="url" class="mobile-popup-iframe"></iframe>
     </div>
diff --git a/docs/src/components/page-footer.vue b/docs/src/components/page-footer.vue
new file mode 100644
index 000000000..7a79ba67e
--- /dev/null
+++ b/docs/src/components/page-footer.vue
@@ -0,0 +1,59 @@
+<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="#" 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
new file mode 100644
index 000000000..4d333391d
--- /dev/null
+++ b/docs/src/components/page-header.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="page-header">
+    <h1 class="page-header__logo">
+      <a href="#"></a>
+    </h1>
+    <ul class="page-header__navs">
+      <li class="page-header__item">
+        <a href="/" class="page-header__link">首页</a>
+      </li>
+      <li class="page-header__item">
+        <a href="http://react.fe.qima-inc.com/" class="page-header__link">PC端</a>
+      </li>
+      <li class="page-header__item">
+        <a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">移动端</a>
+      </li>
+      <li class="page-header__item">
+        <a href="https://github.com/youzan/zanui-weapp" class="page-header__link">微信小程序</a>
+      </li>
+    </ul>
+    <ul class="page-header__subnavs">
+      <li class="page-header__item">
+        <a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">基础组件</a>
+      </li>
+      <li class="page-header__item">
+        <a href="http://zanui.qima-inc.com/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="#" class="page-header__github" target="_blank"></a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      version: window._global.version
+    };
+  }
+};
+</script>
+
+<style>
+@component-namespace page {
+  @b header {
+    position: fixed;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 60px;
+    background-color: #fbfbfb;
+
+    @e logo {
+      float: left;
+
+      > a {
+        display: block;
+        width: 78px;
+        height: 20px;
+        background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fjm3aSwID8ROIV_5TO6dZdJ_IEgz.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        margin: 20px 0 0 20px;
+      }
+    }
+
+    @e navs {
+      float: right;
+    }
+
+    @e item {
+      float: left;
+      height: 50px;
+    }
+
+    @e subnavs {
+      position: absolute;
+      line-height: 50px;
+      top: 60px;
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      background-color: #f2f2f2;
+
+      a,
+      span {
+        line-height: 50px;
+      }
+    }
+
+    @e link {
+      display: block;
+      line-height: 60px;
+      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/components/side-nav.vue b/docs/src/components/side-nav.vue
similarity index 86%
rename from docs/components/side-nav.vue
rename to docs/src/components/side-nav.vue
index fe786fbbf..dd15b876c 100644
--- a/docs/components/side-nav.vue
+++ b/docs/src/components/side-nav.vue
@@ -2,7 +2,7 @@
   <div class="side-nav">
     <ul>
       <li class="nav-item" v-for="item in data">
-        <a v-if="!item.path">{{item.name}}</a>
+        <a href="javascript:void(0)" v-if="!item.path" @click="handleTitleClick(item)">{{item.name}}</a>
         <router-link
           v-else
           active-class="active"
@@ -50,16 +50,24 @@ export default {
       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 {
-    width: 220px;
+    width: 250px;
     box-sizing: border-box;
     padding: 40px 0;
-    display: table-cell;
     border-right: 1px solid #e5e5e5;
 
     li {
diff --git a/docs/examples.js b/docs/src/examples.js
similarity index 88%
rename from docs/examples.js
rename to docs/src/examples.js
index 4272848cf..235095133 100644
--- a/docs/examples.js
+++ b/docs/src/examples.js
@@ -1,15 +1,18 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './ExamplesApp';
-import navConfig from './nav.config.json';
+import navConfig from './nav.config.js';
 import routes from './router.config';
-import ZanUI from '../src/index';
+import ZanUI from 'src/index';
 
 import 'packages/zanui-css/src/index.css';
 
 import DemoList from './components/demo-list.vue';
 
 Vue.use(ZanUI);
+Vue.use(ZanUI.Lazyload, {
+  lazyComponent: true
+});
 Vue.use(VueRouter);
 
 let routesConfig = routes(navConfig, true);
diff --git a/docs/index.js b/docs/src/index.js
similarity index 87%
rename from docs/index.js
rename to docs/src/index.js
index cdbb3a4cb..c51f8e662 100644
--- a/docs/index.js
+++ b/docs/src/index.js
@@ -1,13 +1,17 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './ExamplesDocsApp';
-import navConfig from './nav.config.json';
+import navConfig from './nav.config.js';
 import routes from './router.config';
-import SideNav from './components/side-nav';
-import DemoBlock from './components/demo-block';
-import FooterNav from './components/footer-nav';
 import ZanUI from 'src/index.js';
+import packageJson from '../../package.json';
 
+const global = {
+  version: packageJson.version
+};
+window._global = global;
+
+import '../assets/docs.css';
 import 'packages/zanui-css/src/index.css';
 
 function isMobile() {
@@ -18,14 +22,14 @@ function isMobile() {
 
 Vue.use(VueRouter);
 Vue.use(ZanUI);
-Vue.component('side-nav', SideNav);
-Vue.component('demo-block', DemoBlock);
-Vue.component('footer-nav', FooterNav);
+Vue.use(ZanUI.Lazyload, {
+  lazyComponent: true
+});
 
 let routesConfig = routes(navConfig);
 routesConfig.push({
   path: '/',
-  redirect: '/component/button'
+  redirect: '/component/install'
 });
 
 const router = new VueRouter({
@@ -38,8 +42,10 @@ router.beforeEach((route, redirect, next) => {
   if (route.path !== '/') {
     window.scrollTo(0, 0);
   }
+
+  const pathname = process.env.NODE_ENV === 'production' ? '/vue/examples' : '/examples.html';
   if (isMobile()) {
-    window.location.replace(location.pathname + 'examples.html#' + route.path);
+    window.location.replace(pathname);
     return;
   }
   document.title = route.meta.title || document.title;
diff --git a/docs/index.tpl b/docs/src/index.tpl
similarity index 100%
rename from docs/index.tpl
rename to docs/src/index.tpl
diff --git a/docs/nav.config.json b/docs/src/nav.config.js
similarity index 63%
rename from docs/nav.config.json
rename to docs/src/nav.config.js
index ddeb1800b..133eddd40 100644
--- a/docs/nav.config.json
+++ b/docs/src/nav.config.js
@@ -1,4 +1,4 @@
-{
+module.exports = {
   "zh-CN": [
     {
       "name": "开发指南",
@@ -26,71 +26,79 @@
           "list": [
             {
               "path": "/button",
-              "title": "Button"
+              "title": "Button 按钮"
             },
             {
               "path": "/icon",
-              "title": "Icon"
+              "title": "Icon 图标"
             },
             {
               "path": "/cell",
-              "title": "Cell"
+              "title": "Cell 单元格"
             },
             {
               "path": "/progress",
-              "title": "Progress"
+              "title": "Progress 进度条"
             },
             {
               "path": "/panel",
-              "title": "Panel"
+              "title": "Panel 面板"
             },
             {
               "path": "/card",
-              "title": "Card"
+              "title": "Card 图文组件"
             },
             {
               "path": "/loading",
-              "title": "Loading"
+              "title": "Loading 加载"
+            },
+            {
+              "path": "/layout",
+              "title": "Layout 布局"
             },
             {
               "path": "/steps",
-              "title": "Steps"
+              "title": "Steps 步骤条"
             },
             {
               "path": "/tag",
-              "title": "Tag"
+              "title": "Tag 标记"
             },
             {
               "path": "/badge",
-              "title": "Badge"
+              "title": "Badge 徽章"
             },
             {
               "path": "/tab",
-              "title": "Tab"
+              "title": "Tab 标签"
             },
             {
               "path": "/popup",
-              "title": "Popup"
+              "title": "Popup 弹出菜单"
             },
             {
               "path": "/swipe",
-              "title": "Swipe"
+              "title": "Swipe 轮播"
             },
             {
               "path": "/search",
-              "title": "Search"
+              "title": "Search 搜索"
             },
             {
               "path": "/quantity",
-              "title": "Quantity"
+              "title": "Quantity 数量选择"
             },
             {
               "path": "/waterfall",
-              "title": "Waterfall"
+              "title": "Waterfall 瀑布流"
             },
             {
               "path": "/image-preview",
-              "title": "ImagePreview"
+              "title": "ImagePreview 图片预览"
+            },
+            {
+              "path": "/lazyload",
+              "title": "Lazyload 图片懒加载"
             }
           ]
         },
@@ -99,23 +107,23 @@
           "list": [
             {
               "path": "/switch",
-              "title": "Switch"
+              "title": "Switch 开关"
             },
             {
               "path": "/field",
-              "title": "Field"
+              "title": "Field 输入框"
             },
             {
               "path": "/radio",
-              "title": "Radio"
+              "title": "Radio 单选框"
             },
             {
               "path": "/checkbox",
-              "title": "Checkbox"
+              "title": "Checkbox 复选框"
             },
             {
               "path": "/uploader",
-              "title": "Uploader"
+              "title": "Uploader 图片上传"
             }
           ]
         },
@@ -124,23 +132,23 @@
           "list": [
             {
               "path": "/actionsheet",
-              "title": "ActionSheet"
+              "title": "ActionSheet 行动按钮"
             },
             {
               "path": "/toast",
-              "title": "Toast"
+              "title": "Toast 轻提示"
             },
             {
               "path": "/picker",
-              "title": "Picker"
+              "title": "Picker 选择器"
             },
             {
               "path": "/datetime-picker",
-              "title": "Datetime Picker"
+              "title": "Datetime Picker 时间选择"
             },
             {
               "path": "/dialog",
-              "title": "Dialog"
+              "title": "Dialog 弹出框"
             }
           ]
         }
diff --git a/docs/router.config.js b/docs/src/router.config.js
similarity index 79%
rename from docs/router.config.js
rename to docs/src/router.config.js
index 4ac66d40c..77c2502e9 100644
--- a/docs/router.config.js
+++ b/docs/src/router.config.js
@@ -2,6 +2,10 @@ const registerRoute = (navConfig, isExample) => {
   let route = [];
   let navs = navConfig['zh-CN'];
   navs.forEach(nav => {
+    if (isExample && !nav.showInMobile) {
+      return;
+    }
+
     if (nav.groups) {
       nav.groups.forEach(group => {
         group.list.forEach(nav => {
@@ -19,8 +23,8 @@ const registerRoute = (navConfig, isExample) => {
 
   function addRoute(page) {
     const component = isExample
-      ? require(`./examples-dist${page.path}.vue`)
-      : require(`./examples-docs${page.path}.md`);
+      ? require(`../examples-dist${page.path}.vue`)
+      : require(`../examples-docs${page.path}.md`);
     route.push({
       path: '/component' + page.path,
       component: component.default || component
diff --git a/package.json b/package.json
index 8559ded01..b244eba72 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-vue",
-  "version": "0.0.42",
+  "version": "0.1.0",
   "description": "有赞vue wap组件库",
   "main": "lib/zanui.js",
   "style": "lib/zanui-css/index.css",
@@ -22,7 +22,7 @@
     "deploy:docs": "rimraf docs/dist && npm run build:example && cross-env NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.js",
     "dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:components && npm run build:utils && npm run build:zanui-css",
     "clean": "rimraf lib && rimraf packages/*/lib",
-    "lint": "eslint src/**/*.js packages/**/*.{js,vue} --quiet",
+    "lint": "eslint src/**/*.js packages/**/*.{js,vue} build/**/*.js --quiet",
     "test": "karma start test/unit/karma.conf.js --single-run; npm run coverage",
     "test:watch": "karma start test/unit/karma.conf.js",
     "coverage": "find test/unit/coverage/lcov-report -name 'index.html' | sed -n 1,1p  | xargs -I {} open {}  ",
@@ -40,7 +40,8 @@
   "author": "youzanfe",
   "license": "ISC",
   "dependencies": {
-    "raf.js": "0.0.4"
+    "raf.js": "0.0.4",
+    "vue-lazyload": "^1.0.3"
   },
   "peerDependencies": {
     "vue": "2.1.8"
@@ -62,6 +63,7 @@
     "babel-preset-es2015": "^6.16.0",
     "babel-runtime": "^6.11.0",
     "chai": "^3.5.0",
+    "chalk": "^1.1.3",
     "cheerio": "^0.22.0",
     "copy-webpack-plugin": "^4.0.1",
     "cp-cli": "^1.0.2",
@@ -102,6 +104,7 @@
     "markdown-it-anchor": "^2.5.0",
     "markdown-it-container": "^2.0.0",
     "mocha": "^3.2.0",
+    "optimize-css-assets-webpack-plugin": "^1.3.0",
     "postcss": "^5.1.2",
     "postcss-easy-import": "^2.0.0",
     "postcss-loader": "^1.3.3",
diff --git a/packages/actionsheet/src/actionsheet.vue b/packages/actionsheet/src/actionsheet.vue
index 1039d00b4..ea99cd0f1 100644
--- a/packages/actionsheet/src/actionsheet.vue
+++ b/packages/actionsheet/src/actionsheet.vue
@@ -56,6 +56,7 @@ export default {
     title: String,
     cancelText: String,
     overlay: {
+      type: Boolean,
       default: true
     },
     closeOnClickOverlay: {
@@ -89,7 +90,9 @@ export default {
 
   methods: {
     handleItemClick(item) {
-
+      if (item.callback && typeof item.callback === 'function') {
+        item.callback(item);
+      }
     }
   }
 };
diff --git a/packages/badge/src/badge-group.vue b/packages/badge/src/badge-group.vue
index 7e98f52fb..c9f5695b0 100644
--- a/packages/badge/src/badge-group.vue
+++ b/packages/badge/src/badge-group.vue
@@ -14,6 +14,12 @@
         type: [Number, String],
         default: 0
       }
+    },
+
+    data() {
+      return {
+        badges: []
+      };
     }
   };
 </script>
diff --git a/packages/badge/src/badge.vue b/packages/badge/src/badge.vue
index 43f827f21..749f48819 100644
--- a/packages/badge/src/badge.vue
+++ b/packages/badge/src/badge.vue
@@ -1,5 +1,7 @@
 <template>
-    <a class="zan-badge" :class="classNames" :href="url" @click="handleClick">
+    <a class="zan-badge" :href="url" @click="handleClick" :class="{
+      'zan-badge--select': isSelect
+    }">
       <div class="zan-badge__active"></div>
       <div v-if="info" class="zan-badge__info">{{info}}</div>
       {{title}}
@@ -9,11 +11,8 @@
 <script>
 export default {
   name: 'zan-badge',
+
   props: {
-    mark: {
-      type: [Number, String],
-      required: true
-    },
     title: {
       type: String,
       required: true
@@ -26,22 +25,26 @@ export default {
       type: String
     }
   },
+
+  beforeCreate() {
+    this.$parent.badges.push(this);
+  },
+
+  computed: {
+    isSelect() {
+      const parent = this.$parent;
+      return parent.badges.indexOf(this) === parent.activeKey;
+    }
+  },
+
   methods: {
     handleClick(e) {
       this.$emit('click', e, {
-        mark: this.mark,
         title: this.title,
         url: this.url,
         info: this.info
       });
     }
-  },
-  computed: {
-    classNames() {
-      return {
-        'is-select': this.mark === this.$parent.activeKey
-      };
-    }
   }
 };
 </script>
diff --git a/packages/button/src/button.js b/packages/button/src/button.js
index 8798cc5ad..60a64d540 100644
--- a/packages/button/src/button.js
+++ b/packages/button/src/button.js
@@ -11,16 +11,23 @@
  * <zan-button size="large" type="primary">按钮</zan-button>
  */
 
-const allowedSize = ['mini', 'small', 'normal', 'large'];
-const allowedType = ['default', 'danger', 'primary'];
+import ZanLoading from 'packages/loading';
+
+const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
+const ALLOWED_TYPE = ['default', 'danger', 'primary'];
 
 export default {
   name: 'zan-button',
 
+  components: {
+    'zan-loading': ZanLoading
+  },
+
   props: {
     disabled: Boolean,
     loading: Boolean,
     block: Boolean,
+    bottomAction: Boolean,
     tag: {
       type: String,
       default: 'button'
@@ -30,27 +37,28 @@ export default {
       type: String,
       default: 'default',
       validator(value) {
-        return allowedType.indexOf(value) > -1;
+        return ALLOWED_TYPE.indexOf(value) > -1;
       }
     },
     size: {
       type: String,
       default: 'normal',
       validator(value) {
-        return allowedSize.indexOf(value) > -1;
+        return ALLOWED_SIZE.indexOf(value) > -1;
       }
     }
   },
 
   methods: {
     handleClick(e) {
+      if (this.loading || this.disabled) return;
       this.$emit('click', e);
     }
   },
 
   render(h) {
-    let { type, nativeType, size, disabled, loading, block } = this;
-    let Tag = this.tag;
+    const { type, nativeType, size, disabled, loading, block, bottomAction } = this;
+    const Tag = this.tag;
 
     return (
       <Tag
@@ -63,19 +71,20 @@ export default {
           {
             'zan-button--disabled': disabled,
             'zan-button--loading': loading,
-            'zan-button--block': block
+            'zan-button--block': block,
+            'zan-button--bottom-action': bottomAction
           }
         ]}
         onClick={this.handleClick}
       >
         {
-          loading ?
-            <zan-loading
-              class="zan-button__icon-loading"
-              type="circle"
-              color={type === 'default' ? 'black' : 'white'}>
-            </zan-loading> :
-            null
+          loading
+            ? <zan-loading
+                class="zan-button__icon-loading"
+                type="circle"
+                color={type === 'default' ? 'black' : 'white'}>
+              </zan-loading>
+            : null
         }
         <span class="zan-button__text">{this.$slots.default}</span>
       </Tag>
diff --git a/packages/card/src/card.vue b/packages/card/src/card.vue
index 4725242e1..d42f10a6a 100644
--- a/packages/card/src/card.vue
+++ b/packages/card/src/card.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="zan-card">
     <img :src="thumb" alt="" class="zan-card__img">
-    <div class="zan-card__content" :class="{'is-center': !this.$slots.footer}">
+    <div class="zan-card__content" :class="{'zan-card__content--center': !this.$slots.footer}">
       <div class="zan-card__info">
         <slot name="title">
           <h4 v-text="title" class="zan-card__title"></h4>
diff --git a/packages/cell/src/cell.vue b/packages/cell/src/cell.vue
index 22df2622e..e35e7404f 100644
--- a/packages/cell/src/cell.vue
+++ b/packages/cell/src/cell.vue
@@ -1,6 +1,9 @@
 <template>
-  <a class="zan-cell" :href="url" @click="handleClick">
-    <div :class="{ 'zan-cell__title': true, 'zan-cell__required': required }" v-if="this.$slots.title || title || label">
+  <a :class="['zan-cell', { 'zan-cell--required': required }]" :href="url" @click="handleClick">
+    <div
+      class="zan-cell__title"
+      v-if="this.$slots.title || title"
+    >
       <slot name="icon">
         <i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
       </slot>
@@ -9,10 +12,14 @@
         <span class="zan-cell__label" v-if="label" v-text="label"></span>
       </slot>
     </div>
-    <div class="zan-cell__value" :class="{
-      'is-link': isLink,
-      'is-alone': !this.$slots.title && !title && !label
-    }">
+    <div
+      class="zan-cell__value"
+      v-if="value || this.$slots.default"
+      :class="{
+        'zan-cell__value--link': isLink,
+        'zan-cell__value--alone': !this.$slots.title && !title && !label
+      }"
+    >
       <slot>
         <span v-text="value"></span>
       </slot>
diff --git a/packages/datetime-picker/src/datetime-picker.vue b/packages/datetime-picker/src/datetime-picker.vue
index 253888704..973d4f2c6 100644
--- a/packages/datetime-picker/src/datetime-picker.vue
+++ b/packages/datetime-picker/src/datetime-picker.vue
@@ -1,5 +1,6 @@
 <template>
   <zan-picker
+    ref="picker"
     :columns="columns"
     :visible-item-count="visibleItemCount"
     @change="handlePickerChange"
@@ -28,6 +29,10 @@ export default {
         return allowedType.indexOf(value) > -1;
       }
     },
+    format: {
+      type: String,
+      default: 'yyyy.mm.dd hh时 mm分'
+    },
     visibleItemCount: {
       type: Number,
       default: 5
@@ -56,31 +61,45 @@ export default {
   },
 
   data() {
+    let value = this.value;
+    if (!value) {
+      if (this.type.indexOf('date') > -1) {
+        value = this.minDate;
+      } else {
+        const minHour = this.minHour;
+        value = `${minHour > 10 ? minHour : '0' + minHour}:00`;
+      }
+    } else {
+      value = this.correctValue(value);
+    }
+
     return {
-      innerValue: this.val
+      innerValue: value
     };
   },
 
   watch: {
     value(val) {
-      this.innerValue = val;
+      val = this.correctValue(val);
+      const isEqual = this.type === 'time' ? val === this.innerValue : val.valueOf() === this.innerValue.valueOf();
+      if (!isEqual) this.innerValue = val;
     },
     innerValue(val) {
       console.log(val + '!!!');
+      this.updateColumnValue(val);
       this.$emit('input', val);
     }
   },
 
   computed: {
     ranges() {
-      console.log(this.innerValue + '!!');
-      // return this.innerValue + '!!';
       if (this.type === 'time') {
         return [
           [this.minHour, this.maxHour],
           [0, 59]
         ];
       }
+
       const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', this.innerValue);
       const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', this.innerValue);
 
@@ -96,7 +115,7 @@ export default {
       return result;
     },
     columns() {
-      return this.ranges.map(range => {
+      const results = this.ranges.map(range => {
         const values = this.times(range[1] - range[0] + 1, index => {
           const value = range[0] + index;
           return value < 10 ? `0${value}` : `${value}`;
@@ -106,10 +125,31 @@ export default {
           values
         };
       });
+      return results;
     }
   },
 
   methods: {
+    correctValue(value) {
+      // 仅时间
+      if (this.type === 'time') {
+        const [hour, minute] = value.split(':');
+        let correctedHour = Math.max(hour, this.minHour);
+        correctedHour = Math.min(correctedHour, this.maxHour);
+
+        return `${correctedHour}:${minute}`;
+      }
+
+      // 含有日期的情况
+      const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', value);
+      const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', value);
+      const minDay = new Date(minYear, minMonth - 1, minDate, minHour, minMinute);
+      const maxDay = new Date(maxYear, maxMonth - 1, maxDate, maxHour, maxMinute);
+      value = Math.max(value, minDay);
+      value = Math.min(value, maxDay);
+
+      return new Date(value);
+    },
     times(n, iteratee) {
       let index = -1;
       const result = Array(n);
@@ -137,11 +177,11 @@ export default {
       if (value.getFullYear() === year) {
         month = boundary.getMonth() + 1;
         if (value.getMonth() + 1 === month) {
-          date = value.getDate();
+          date = boundary.getDate();
           if (value.getDate() === date) {
-            hour = value.getHours();
+            hour = boundary.getHours();
             if (value.getHours() === hour) {
-              minute = value.getMinutes();
+              minute = boundary.getMinutes();
             }
           }
         }
@@ -180,8 +220,9 @@ export default {
     handlePickerConfirm(values) {
       this.$emit('confirm', this.innerValue);
     },
-    handlePickerChange(picker, values, index) {
-      console.log(this.innerValue);
+    handlePickerChange(picker) {
+      const values = picker.$children.filter(child => child.currentValue !== undefined).map(child => child.currentValue);
+      console.log(values);
       let value;
 
       if (this.type === 'time') {
@@ -200,21 +241,50 @@ export default {
         }
         value = new Date(year, month - 1, date, hour, minute);
       }
+      value = this.correctValue(value);
       this.innerValue = value;
       console.log(value, this.innerValue);
-      // this.$emit('input', value);
-    }
-  },
-
-  created() {
-    this.innerValue = this.value;
-    if (!this.innerValue) {
-      if (this.type.indexOf('date') > -1) {
-        this.innerValue = this.minDate;
+    },
+    updateColumnValue(value) {
+      let values = [];
+      if (this.type === 'time') {
+        const currentValue = value.split(':');
+        values = [
+          currentValue[0],
+          currentValue[1]
+        ];
       } else {
-        const minHour = this.minHour;
-        this.innerValue = `${minHour > 10 ? minHour : '0' + minHour}:00`;
+        values = [
+          `${value.getFullYear()}`,
+          `0${value.getMonth() + 1}`.slice(-2),
+          `0${value.getDate()}`.slice(-2)
+        ];
+        if (this.type === 'datetime') {
+          values.push(
+            `0${value.getHours()}`.slice(-2),
+            `0${value.getMinutes()}`.slice(-2)
+          );
+        }
       }
+      this.$nextTick(() => {
+        this.setColumnByValues(values);
+      });
+    },
+    setColumnByValues(values) {
+      const setColumnValue = this.$refs.picker.setColumnValue;
+      if (this.type === 'time') {
+        setColumnValue(0, values[0]);
+        setColumnValue(1, values[1]);
+      } else {
+        setColumnValue(0, values[0]);
+        setColumnValue(1, values[1]);
+        setColumnValue(2, values[2]);
+        if (this.type === 'datetime') {
+          setColumnValue(3, values[3]);
+          setColumnValue(4, values[4]);
+        }
+      }
+      [].forEach.call(this.$refs.picker.$children, child => child.doOnValueChange());
     }
   }
 };
diff --git a/packages/dialog/src/dialog.js b/packages/dialog/src/dialog.js
index fa295ac15..5c13346cd 100644
--- a/packages/dialog/src/dialog.js
+++ b/packages/dialog/src/dialog.js
@@ -10,7 +10,7 @@ let dialogQueue = [];
 
 const defaultCallback = action => {
   if (currentDialog) {
-    let callback = currentDialog.callback;
+    const callback = currentDialog.callback;
 
     if (typeof callback === 'function') {
       callback(action);
@@ -40,9 +40,9 @@ const showNextDialog = () => {
   if (!instance.value && dialogQueue.length > 0) {
     currentDialog = dialogQueue.shift();
 
-    let options = currentDialog.options;
+    const options = currentDialog.options;
 
-    for (let prop in options) {
+    for (const prop in options) {
       if (options.hasOwnProperty(prop)) {
         instance[prop] = options[prop];
       }
diff --git a/packages/dialog/src/dialog.vue b/packages/dialog/src/dialog.vue
index b91ea033c..47b8f1cbb 100644
--- a/packages/dialog/src/dialog.vue
+++ b/packages/dialog/src/dialog.vue
@@ -68,7 +68,7 @@ export default {
 
       if (this.lockOnScroll) {
         setTimeout(() => {
-          if (this.modal && this.bodyOverflow !== 'hidden') {
+          if (this.overlay && this.bodyOverflow !== 'hidden') {
             document.body.style.overflow = this.bodyOverflow;
           }
           this.bodyOverflow = null;
diff --git a/packages/field/src/field.vue b/packages/field/src/field.vue
index 81636ba5d..df4748a8b 100644
--- a/packages/field/src/field.vue
+++ b/packages/field/src/field.vue
@@ -53,7 +53,7 @@ export default {
     type: {
       type: String,
       default: 'text',
-      validate(value) {
+      validator(value) {
         return VALID_TYPES.indexOf(value) > -1;
       }
     },
@@ -71,7 +71,7 @@ export default {
     autosize: {
       type: Boolean,
       default: false,
-      validate(value) {
+      validator(value) {
         if (value && this.type !== 'textarea') return false;
       }
     }
diff --git a/packages/icon/src/icon.vue b/packages/icon/src/icon.vue
index 29b7caa8a..cb4cc92e3 100644
--- a/packages/icon/src/icon.vue
+++ b/packages/icon/src/icon.vue
@@ -7,7 +7,10 @@
     name: 'zan-icon',
 
     props: {
-      name: String
+      name: {
+        type: String,
+        required: true
+      }
     },
 
     methods: {
diff --git a/packages/image-preview/src/image-preview.js b/packages/image-preview/src/image-preview.js
index 93c62f354..5840d8d5e 100644
--- a/packages/image-preview/src/image-preview.js
+++ b/packages/image-preview/src/image-preview.js
@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import ImagePreview from './image-preview.vue';
-import merge from 'src/utils/merge';
 
 let instance;
 
diff --git a/packages/image-preview/src/image-preview.vue b/packages/image-preview/src/image-preview.vue
index 21679c8e4..79b4c9107 100644
--- a/packages/image-preview/src/image-preview.vue
+++ b/packages/image-preview/src/image-preview.vue
@@ -3,9 +3,7 @@
     <div class="zan-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
       <zan-swipe>
         <zan-swipe-item v-for="item in images">
-          <img class="zan-image-preview__image" :src="item" alt="" :class="{
-            'zan-image-preview__image--center': true
-          }">
+          <img class="zan-image-preview__image" @load="handleLoad" :src="item" alt="">
         </zan-swipe-item>
       </zan-swipe>
     </div>
@@ -53,6 +51,22 @@ export default {
       this.value = false;
     },
 
+    handleLoad(event) {
+      const containerSize = this.$refs.previewContainer.getBoundingClientRect();
+      const ratio = containerSize.width / containerSize.height;
+      const target = event.currentTarget;
+      const targetRatio = target.width / target.height;
+
+      const centerClass = 'zan-image-preview__image--center';
+      const bigClass = 'zan-image-preview__image--big';
+
+      if (targetRatio > ratio) {
+        target.className += (' ' + centerClass);
+      } else {
+        target.className += (' ' + bigClass);
+      }
+    },
+
     close() {
       if (this.closing) return;
 
diff --git a/packages/lazyload/index.js b/packages/lazyload/index.js
index 6f6f48f56..3ce88f05a 100644
--- a/packages/lazyload/index.js
+++ b/packages/lazyload/index.js
@@ -1,79 +1,3 @@
-export default {
-  install: function(Vue, options) {
-    options = options || { fade: false, nohori: false };
-    // scroll结束的时候触发scrollend事件
-    var timer = null;
-    var topValue = 0;
-    var bodyEle = document.body;
-    var scrollEnd = document.createEvent('HTMLEvents');
-    scrollEnd.initEvent('scrollEnd', true, false);
-    function enterFrame() {
-      if (bodyEle.scrollTop === topValue) {
-        window.cancelAnimationFrame(timer);
-        window.dispatchEvent(scrollEnd);
-      } else {
-        topValue = bodyEle.scrollTop;
-      }
-      window.requestAnimationFrame(enterFrame);
-    }
-    document.addEventListener('scroll', function() {
-      if (!timer) {
-        timer = window.requestAnimationFrame(enterFrame);
-      }
-    }, true);
-    // vue指令
-    function update(value) {
-      if (!value) {
-        return;
-      }
-      var isFadeIn = this.modifiers.fade || options.fade;
-      var isNoHori = this.modifiers.nohori || options.nohori;
-        // 用css3来控制过渡效果
-      if (isFadeIn) {
-        this.el.style.opacity = 0;
-        this.el.style.transition = 'opacity .3s';
-        this.el.style.webkitTransition = 'opacity .3s';
-      }
-      var compute = function() {
-        if (this.el === null) {
-          return;
-        }
-        var rect = this.el.getBoundingClientRect();
-        var vpWidth = document.head.parentNode.clientWidth;
-        var vpHeight = document.head.parentNode.clientHeight;
-        var loadImg = function() {
-          this.el.src = value;
-          this.el.addEventListener('load', onloadEnd);
-          window.removeEventListener('scrollEnd', compute, true);
-          window.removeEventListener('resize', compute, true);
-        }.bind(this);
-        if (this.el.src === value) return;
-        if (isNoHori) {
-          if (rect.bottom >= 0 && rect.top <= vpHeight) {
-            loadImg();
-          }
-        } else if (rect.bottom >= 0 && rect.top <= vpHeight && rect.right >= 0 && rect.left <= vpWidth) {
-          loadImg();
-        }
-      }.bind(this);
-      var onload = function() {
-        compute();
-        this.el && this.el.removeEventListener('load', onload);
-        window.addEventListener('scrollEnd', compute, true);
-        window.addEventListener('resize', compute, true);
-      }.bind(this);
-      var onloadEnd = function() {
-        if (this.el === null) {
-          return;
-        }
-        if (isFadeIn) {
-          this.el.style.opacity = 1;
-        }
-        this.el.removeEventListener('load', onloadEnd);
-      }.bind(this);
-        // 元素load触发事件
-      this.el.addEventListener('load', onload);
-    }
-    Vue.directive('lazyload', update);
-  }
-};
+import Lazyload from 'vue-lazyload';
+
+export default Lazyload;
diff --git a/packages/loading/src/loading.vue b/packages/loading/src/loading.vue
index 83ecba436..b9a755f13 100644
--- a/packages/loading/src/loading.vue
+++ b/packages/loading/src/loading.vue
@@ -14,14 +14,14 @@ export default {
     type: {
       type: String,
       default: 'gradient-circle',
-      validate(value) {
+      validator(value) {
         return VALID_TYPES.indexOf(value) > -1;
       }
     },
     color: {
       type: String,
       default: 'black',
-      validate(value) {
+      validator(value) {
         return VALID_COLORS.indexOf(value) > -1;
       }
     }
diff --git a/packages/picker/src/picker-column.vue b/packages/picker/src/picker-column.vue
index 636ca96c2..fcaf64290 100644
--- a/packages/picker/src/picker-column.vue
+++ b/packages/picker/src/picker-column.vue
@@ -65,23 +65,19 @@ export default {
   },
 
   watch: {
-    value(val) {
-      this.currentValue = val;
-    },
     values(val) {
       this.currentValues = val;
     },
-
     currentValues(val) {
       if (this.valueIndex === -1) {
         this.currentValue = (val || [])[0];
       }
     },
-
     currentValue(val) {
       this.doOnValueChange();
 
-      this.$emit('change', this);
+      this.$emit('input', val);
+      this.$emit('columnChange', this);
     }
   },
 
@@ -236,8 +232,6 @@ export default {
       const value = this.currentValue;
       const wrapper = this.$refs.wrapper;
 
-      this.$emit('input', this.currentValue);
-
       translateUtil.translateElement(wrapper, null, this.value2Translate(value));
     }
   }
diff --git a/packages/picker/src/picker.vue b/packages/picker/src/picker.vue
index 2ea6e487f..c4e475380 100644
--- a/packages/picker/src/picker.vue
+++ b/packages/picker/src/picker.vue
@@ -15,7 +15,7 @@
         :itemHeight="itemHeight"
         :visible-item-count="visibleItemCount"
         :value-key="valueKey"
-        @change="columnValueChange(index)">
+        @columnChange="columnValueChange(index)">
       </picker-column>
       <div class="zan-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
     </div>
diff --git a/packages/progress/src/progress.vue b/packages/progress/src/progress.vue
index 7ad45059b..a98ceabfe 100644
--- a/packages/progress/src/progress.vue
+++ b/packages/progress/src/progress.vue
@@ -2,7 +2,7 @@
   <div class="zan-progress">
     <div class="zan-progress__bar">
       <span class="zan-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
-      <span class="zan-progress__bar__pivot" :style="pivotStyle">{{currentPivotText}}</span>
+      <span class="zan-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
     </div>
   </div>
 </template>
@@ -21,6 +21,11 @@
  * @example
  * <zan-switch checked="true" disabled="false"></zan-switch>
  */
+
+const DEFAULT_COLOR = '#38f';
+const DEFAULT_TEXT_COLOR = '#fff';
+const INACTIVE_COLOR = '#cacaca';
+
 export default {
   name: 'zan-progress',
 
@@ -28,36 +33,30 @@ export default {
     percentage: {
       type: Number,
       required: true,
-      validate(value) {
+      validator(value) {
         return value <= 100 && value >= 0;
       }
     },
-    inactive: {
-      type: Boolean,
-      default: false
-    },
+    inactive: Boolean,
     pivotText: {
       type: String,
       default: function() {
-        return this.percentage.toString() + '%';
+        return this.percentage + '%';
       }
     },
     color: {
       type: String,
-      default: '#38f'
+      default: DEFAULT_COLOR
     },
     textColor: {
       type: String,
-      default: '#fff'
+      default: DEFAULT_TEXT_COLOR
     }
   },
 
   computed: {
-    currentPivotText() {
-      return this.pivotText ? this.pivotText : this.this.percentage.toString() + '%';
-    },
     componentColor() {
-      return this.inactive ? '#cacaca' : this.color;
+      return this.inactive ? INACTIVE_COLOR : this.color;
     },
     pivotStyle() {
       const pivotStyle = {
diff --git a/packages/quantity/src/quantity.vue b/packages/quantity/src/quantity.vue
index 469f75ed1..1e64b74d0 100644
--- a/packages/quantity/src/quantity.vue
+++ b/packages/quantity/src/quantity.vue
@@ -7,7 +7,12 @@
         'zan-quantity__minus--disabled': isMinusDisabled
       }">
     </button>
-    <input type="text" class="zan-quantity__input" :value="currentValue" @input="handleInputChange" :disabled="disabled">
+    <input
+      type="text"
+      class="zan-quantity__input"
+      :value="currentValue"
+      @input="handleInputChange"
+      :disabled="disabled">
     <button
       @click="handleChange('plus')"
       class="zan-quantity__stepper zan-quantity__plus"
@@ -44,8 +49,14 @@ export default {
   },
 
   data() {
+    let value = this.value ? +this.value : +this.defaultValue;
+    const correctedValue = this.correctValue(value);
+    if (value !== correctedValue) {
+      value = correctedValue;
+      this.$emit('input', value);
+    }
     return {
-      currentValue: this.value ? +this.value : +this.defaultValue
+      currentValue: value
     };
   },
 
@@ -66,38 +77,38 @@ export default {
 
   watch: {
     currentValue(val) {
-      this.$emit('input', +val);
+      this.$emit('input', val);
+      this.$emit('change', val);
     },
     value(val) {
-      if (val) {
-        this.currentValue = +val;
+      val = this.correctValue(+val);
+      if (val !== this.currentValue) {
+        this.currentValue = val;
       }
     }
   },
 
   methods: {
+    // 纠正value值
+    correctValue(value) {
+      value = Math.max(this.min, value);
+      value = Math.min(this.max, value);
+      return value;
+    },
     handleInputChange(event) {
-      let val = +event.target.value;
-      const max = +this.max;
-      const min = +this.min;
+      const val = +event.target.value;
 
-      if (val > max) {
-        val = max;
-      } else if (val < min) {
-        val = min;
-      }
-
-      this.currentValue = val;
+      this.currentValue = this.correctValue(val);
     },
     handleChange(type) {
       if ((this.isMinusDisabled && type === 'minus') || (this.isPlusDisabled && type === 'plus')) {
+        this.$emit('overlimit', type);
         return;
       }
 
       const step = +this.step;
       const currentValue = +this.currentValue;
       this.currentValue = type === 'minus' ? (currentValue - step) : (currentValue + step);
-      this.$emit('change', this.currentValue);
     }
   }
 };
diff --git a/packages/search/src/search.vue b/packages/search/src/search.vue
index 1e3f4d233..b5696b096 100644
--- a/packages/search/src/search.vue
+++ b/packages/search/src/search.vue
@@ -2,10 +2,17 @@
   <div class="zan-search" :class="{ 'zan-search--focus' : isFocus }">
     <div class="zan-search__input-wrap">
       <zan-icon name="search"></zan-icon>
-      <input type="text" :placeholder="placeholder" v-model="value" v-refocus="focusStatus"  @focus="handleFocus" @keyup.enter="handleSearch">
-      <zan-icon name="clear" @click="handleClean"></zan-icon>
+      <input
+        type="text"
+        :placeholder="placeholder"
+        class="zan-search__input"
+        v-model="value"
+        v-refocus="focusStatus"
+        @focus="handleFocus"
+        @keyup.enter="handleSearch">
+      <zan-icon name="clear" @click="handleClean" v-show="isFocus"></zan-icon>
     </div>
-    <div class="zan-search__cancel" :class="{ 'zan-search__cancel--focus' : isFocus }" @click="handleBack">取消</div>
+    <div class="zan-search__cancel" v-show="isFocus" @click="handleBack">取消</div>
   </div>
 </template>
 
@@ -14,14 +21,21 @@
 
   export default {
     name: 'zan-search',
+
     components: {
       ZanIcon
     },
+
     props: {
-      placeholder: {
-        type: String
+      placeholder: String
+    },
+
+    watch: {
+      value(val) {
+        this.$emit('change', val);
       }
     },
+
     data() {
       return {
         value: '',
@@ -29,31 +43,47 @@
         isFocus: false
       };
     },
+
     directives: {
       refocus: {
         update: function(el, state) {
-          if (state.value) { el.focus(); }
+          if (state.value) {
+            el.focus();
+          }
         }
       }
     },
+
     methods: {
+      /**
+       * 进入input焦点，出现close和取消
+       */
       handleFocus() {
-        // 进入input焦点，出现close和取消
         this.isFocus = true;
       },
+
+      /**
+       * 点击close后清空vlaue后，再聚焦input框
+       */
       handleClean() {
-        // 点击close后清空vlaue后，再聚焦input框
         this.value = '';
         this.focusStatus = true;
       },
+
+      /**
+       * 点击取消后，清空所有回复最初状态
+       */
       handleBack() {
-        // 点击取消后，清空所有回复最初状态
         this.value = '';
         this.focusStatus = false;
         this.isFocus = false;
+        this.$emit('cancel');
       },
+
+      /**
+       * input输入回车后，发送回调
+       */
       handleSearch() {
-        // input输入回车后，发送回调
         this.$emit('search', this.value);
       }
     }
diff --git a/packages/steps/src/steps.vue b/packages/steps/src/steps.vue
index 336f91c9f..50607528a 100644
--- a/packages/steps/src/steps.vue
+++ b/packages/steps/src/steps.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="zan-steps" :class="`zan-steps--${steps.length}`">
-    <div class="zan-steps__status" v-if="icon">
-      <i class="zan-icon zan-steps__icon" :class="computedIconClass"></i>
+    <div class="zan-steps__status" v-if="title || description">
+      <div class="zan-steps__icon" v-if="icon || $slot.icon">
+        <slot name="icon">
+          <zan-icon :name="icon" :class="iconClass"></zan-icon>
+        </slot>
+      </div>
       <div class="zan-steps__message">
         <div class="zan-steps__message-wrapper">
           <h4 class="zan-steps__title" v-text="title"></h4>
@@ -11,16 +15,24 @@
       <slot name="message-extra">
       </slot>
     </div>
-    <div class="zan-steps__items">
+    <div class="zan-steps__items" :class="{
+      'zan-steps__items--alone': !title && !description
+    }">
       <slot></slot>
     </div>
   </div>
 </template>
 
 <script>
+import Icon from 'packages/icon';
+
 export default {
   name: 'zan-steps',
 
+  components: {
+    'zan-icon': Icon
+  },
+
   props: {
     active: Number,
     icon: String,
@@ -32,16 +44,6 @@ export default {
     description: String
   },
 
-  computed: {
-    computedIconClass() {
-      const iconName = `zan-icon-${this.icon}`;
-      const result = this.iconClass.split(' ');
-      result.push(iconName);
-
-      return result;
-    }
-  },
-
   data() {
     return {
       steps: []
diff --git a/packages/swipe/src/input.js b/packages/swipe/src/input.js
index 065ea6dd2..5fac0da18 100755
--- a/packages/swipe/src/input.js
+++ b/packages/swipe/src/input.js
@@ -24,7 +24,6 @@ Input.prototype = Object.create(new EventEmitter());
 
 extend(Input.prototype, {
   bind: function(host) {
-
     bindEvents(host, 'touchstart mousedown', this.onTouchStart);
     if (this.options.listenMoving) {
       bindEvents(window, 'touchmove mousemove', this.onTouchMove);
@@ -74,11 +73,11 @@ extend(Input.prototype, {
       this.orgDirection = Math.abs(distX) > Math.abs(distY);
     }
 
-    this.emit('move', {x: distX, y: distY}, isEnd, e, {orgDirection: this.orgDirection});
+    this.emit('move', { x: distX, y: distY }, isEnd, e, { orgDirection: this.orgDirection });
   },
 
   pointerEventToXY: function(e) {
-    var out = {x: 0, y: 0};
+    var out = { x: 0, y: 0 };
     var type = e.type;
     if (e.originalEvent) {
       e = e.originalEvent;
diff --git a/packages/swipe/src/scroll.js b/packages/swipe/src/scroll.js
index 94b325178..b42e60398 100755
--- a/packages/swipe/src/scroll.js
+++ b/packages/swipe/src/scroll.js
@@ -1,10 +1,10 @@
-import { EventEmitter, extend } from './utils'
+import { EventEmitter, extend } from './utils';
 
 const setElementsStyles = (elems, styles) => {
   Array.prototype.forEach.call(elems, item => {
-    extend(item.style, styles)
-  })
-}
+    extend(item.style, styles);
+  });
+};
 
 function Scroll(wrapElem, options) {
   EventEmitter.apply(this, arguments);
@@ -33,14 +33,14 @@ extend(Scroll.prototype, {
   },
 
   update: function() {
-    const oldPages = this.pages
+    const oldPages = this.pages;
     this.pages = this.wrapElem.querySelectorAll('.zan-swipe-item');
     if (oldPages && oldPages.length === this.pages.length) {
       const isSame = Array.prototype.every.call(this.pages, (elem, index) => {
-        return this.pages[index] === oldPages[index]
-      })
+        return this.pages[index] === oldPages[index];
+      });
       if (isSame) {
-        return
+        return;
       }
     }
     var defaultStyle = {
diff --git a/packages/swipe/src/spring_dummy.js b/packages/swipe/src/spring_dummy.js
index 9d68751d6..c9d2ff9d2 100755
--- a/packages/swipe/src/spring_dummy.js
+++ b/packages/swipe/src/spring_dummy.js
@@ -1,4 +1,4 @@
-import { requestAnimationFrame, cancelAnimationFrame, EventEmitter, extend } from './utils'
+import { requestAnimationFrame, cancelAnimationFrame, EventEmitter, extend } from './utils';
 
 function SpringDummy(scroll, input, options) {
   var wrapElem = scroll.wrapElem;
@@ -31,7 +31,6 @@ function SpringDummy(scroll, input, options) {
   }).on('bounceStart', function() {
     self.input.deaf();
   });
-
 }
 
 SpringDummy.prototype = Object.create(new EventEmitter());
@@ -85,7 +84,6 @@ extend(SpringDummy.prototype, {
           addition = w * (tempOffsetPage - offsetPage + this.scroll.pages.length - 1);
         }
       }
-
     }
 
     this.initTween(addition - dist, 150, 'bounce');
@@ -105,12 +103,12 @@ extend(SpringDummy.prototype, {
     function round() {
       elapse = new Date() - startTime;
       if (elapse > duration) {
-        self.emit(eventName, {x: dist}, true);
+        self.emit(eventName, { x: dist }, true);
         self.emit(eventName + 'End');
         return;
       }
 
-      self.emit(eventName, {x: dist / duration * elapse}, false);
+      self.emit(eventName, { x: dist / duration * elapse }, false);
       self.tweenRid = requestAnimationFrame(round);
     }
     round();
diff --git a/packages/swipe/src/swipe-item.vue b/packages/swipe/src/swipe-item.vue
index 0a7ea92b5..be2dd955a 100644
--- a/packages/swipe/src/swipe-item.vue
+++ b/packages/swipe/src/swipe-item.vue
@@ -6,6 +6,10 @@
 
 <script>
 export default {
-  name: 'zan-swipe-item'
+  name: 'zan-swipe-item',
+
+  beforeCreate() {
+    this.$parent.swipes.push(this);
+  }
 };
 </script>
diff --git a/packages/swipe/src/swipe.vue b/packages/swipe/src/swipe.vue
index 83e641a6a..0c335da0e 100644
--- a/packages/swipe/src/swipe.vue
+++ b/packages/swipe/src/swipe.vue
@@ -1,6 +1,14 @@
 <template>
   <div class="zan-swipe">
-    <slot></slot>
+    <div class="zan-swipe__items">
+      <slot></slot>
+    </div>
+    <div class="zan-swipe__indicators" v-if="showIndicators">
+      <span class="zan-swipe__indicator" v-for="i in swipes.length" :class="{
+        'zan-swipe__indicator--active': currIndex === i -1
+      }">
+      </span>
+    </div>
   </div>
 </template>
 
@@ -13,16 +21,20 @@ export default {
   name: 'zan-swipe',
 
   props: {
-    autoPlay: {
+    autoPlay: Boolean,
+    showIndicators: {
       type: Boolean,
-      default: false
-    },
-    onPageChangeEnd: {
-      type: Function,
-      default: () => {}
+      default: true
     }
   },
 
+  data() {
+    return {
+      currIndex: 0,
+      swipes: []
+    };
+  },
+
   mounted() {
     this.input = new Input(this.$el, {
       listenMoving: true
@@ -53,6 +65,13 @@ export default {
 
   updated() {
     this.scroll.update();
+  },
+
+  methods: {
+    onPageChangeEnd(page, currIndex) {
+      this.currIndex = +currIndex;
+      this.$emit('pagechange:end', page, currIndex);
+    }
   }
 };
 </script>
diff --git a/packages/swipe/src/utils.js b/packages/swipe/src/utils.js
index 1bcbebaf2..7ff020a59 100755
--- a/packages/swipe/src/utils.js
+++ b/packages/swipe/src/utils.js
@@ -18,11 +18,11 @@ EventEmitter.prototype = {
     if (arr) {
       arr.forEach(function(cb) {
         cb.apply(self, argus);
-      })
+      });
     }
   },
   removeListener: function(name, fn) {
-    if (this.__events[name] == undefined) {
+    if (!this.__events[name]) {
       return;
     }
     let index;
@@ -50,14 +50,14 @@ const cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnim
               };
 
 const bindEvents = (elem, eventNames, fn) => {
-  eventNames = eventNames.split(/\s+/)
-  eventNames.forEach(eventName => elem.addEventListener(eventName, fn))
-}
+  eventNames = eventNames.split(/\s+/);
+  eventNames.forEach(eventName => elem.addEventListener(eventName, fn));
+};
 
 const removeEvents = (elem, eventNames, fn) => {
-  eventNames = eventNames.split(/\s+/)
-  eventNames.forEach(eventName => elem.removeEventListener(eventName, fn))
-}
+  eventNames = eventNames.split(/\s+/);
+  eventNames.forEach(eventName => elem.removeEventListener(eventName, fn));
+};
 
 export {
   extend,
diff --git a/packages/switch/src/switch.vue b/packages/switch/src/switch.vue
index 97e39727a..f935e1fda 100644
--- a/packages/switch/src/switch.vue
+++ b/packages/switch/src/switch.vue
@@ -13,12 +13,12 @@ import ZanLoading from 'packages/loading';
  * zan-switch
  * @module components/switch
  * @desc 开关
- * @param {boolean} [checked=false] - 开关状态
+ * @param {boolean} [value=false] - 开关状态
  * @param {boolean} [disabled=false] - 禁用
  * @param {boolean} [loading=false] - loading状态
  *
  * @example
- * <zan-switch checked="true" disabled="false"></zan-switch>
+ * <zan-switch :checked="true" :disabled="false"></zan-switch>
  */
 export default {
   name: 'zan-switch',
@@ -26,23 +26,32 @@ export default {
     'zan-loading': ZanLoading
   },
   props: {
-    checked: {
-      type: Boolean,
-      default: false
+    value: Boolean,
+    disabled: Boolean,
+    loading: Boolean,
+    onChange: Function
+  },
+  data() {
+    return {
+      checked: this.value
+    };
+  },
+  watch: {
+    checked(val) {
+      this.$emit('input', val);
     },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
+
+    value(val) {
+      this.checked = val;
     }
   },
   computed: {
     switchStates: function() {
-      const switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off'),
-        'zan-switch--' + (this.disabled ? 'disabled' : '')];
+      const switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off')];
+
+      if (this.disabled) {
+        switchStates.push('zan-switch--disabled');
+      }
 
       return switchStates;
     }
@@ -53,7 +62,11 @@ export default {
      */
     toggleState: function() {
       if (this.disabled || this.loading) return;
-      this.$emit('change', !this.checked);
+      if (this.onChange) {
+        this.onChange(!this.checked);
+      } else {
+        this.checked = !this.checked;
+      }
     }
   }
 };
diff --git a/packages/tab/src/tab.vue b/packages/tab/src/tab.vue
index 1e43b8c55..3ad6ec7c5 100644
--- a/packages/tab/src/tab.vue
+++ b/packages/tab/src/tab.vue
@@ -13,15 +13,15 @@
         type: String,
         required: true
       },
-      disable: Boolean
+      disabled: Boolean
+    },
+    beforeCreate() {
+      this.$parent.tabs.push(this);
     },
     computed: {
       classNames() {
-        return { 'zan-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
+        return { 'zan-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.curActive };
       }
-    },
-    created() {
-      this.$parent.tabs.push(this);
     }
   };
 </script>
diff --git a/packages/tab/src/tabs.vue b/packages/tab/src/tabs.vue
index b78264e4f..f22481d6a 100644
--- a/packages/tab/src/tabs.vue
+++ b/packages/tab/src/tabs.vue
@@ -1,18 +1,23 @@
 <template>
-  <div class="zan-tabs">
-    <div class="zan-tabs__nav" :class="classNames">
-      <div class="zan-tabs__nav-bar" :style="navBarStyle"></div>
+  <div class="zan-tabs" :class="[`zan-tabs--${type}`]">
+    <div
+      class="zan-tabs__nav"
+      :class="[`zan-tabs__nav--${this.type}`, `zan-tabs--col-${this.tabs.length}`]"
+    >
+      <div class="zan-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
       <div
         v-for="(tab, index) in tabs"
         class="zan-tab"
-        :class="{'zan-tab--active': index == switchActiveTabKey}"
+        :class="{'zan-tab--active': index === curActive}"
         ref="tabkey"
-        @click="handleTabClick(index,tab)"
+        @click="handleTabClick(index, tab)"
       >
         {{ tab.title }}
       </div>
     </div>
-    <div class="zan-tabs__content"><slot></slot></div>
+    <div class="zan-tabs__content">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
@@ -30,11 +35,6 @@
       type: {
         type: String,
         default: 'line'
-      },
-      // nav的wrap的样式
-      navclass: {
-        type: String,
-        default: ''
       }
     },
 
@@ -42,27 +42,28 @@
       return {
         tabs: [],
         isReady: false,
-        switchActiveTabKey: +this.active
+        curActive: +this.active
       };
     },
 
     watch: {
       active(val) {
-        this.switchActiveTabKey = +val;
+        this.curActive = +val;
       }
     },
 
     computed: {
-      classNames() {
-        return [`zan-tabs__nav--${this.type}`, `zan-tabs--col-${this.tabs.length}`, this.navclass];
-      },
-
+      /**
+       * `type`为`line`时，tab下方的横线的样式
+       */
       navBarStyle() {
-        if (!this.isReady) return;
-        const tabKey = this.switchActiveTabKey;
+        if (!this.isReady || this.type !== 'line') return;
+
+        const tabKey = this.curActive;
         const elem = this.$refs.tabkey[tabKey];
         const offsetWidth = `${elem.offsetWidth || 0}px`;
         const offsetLeft = `${elem.offsetLeft || 0}px`;
+
         return {
           width: offsetWidth,
           transform: `translate3d(${offsetLeft}, 0px, 0px)`
@@ -71,12 +72,20 @@
     },
 
     methods: {
+      /**
+       * tab点击事件
+       *
+       * @param {number} index tab在tabs中的索引
+       * @param {Object} el tab的vue实例
+       */
       handleTabClick(index, el) {
-        if (el.disable) {
-          el.$emit('disable');
+        if (el.disabled) {
+          el.$emit('disabled', index);
           return;
         }
-        this.switchActiveTabKey = index;
+
+        this.$emit('click', index);
+        this.curActive = index;
       }
     },
 
diff --git a/packages/toast/src/toast.js b/packages/toast/src/toast.js
index 8e6674b9b..d5e1d39d8 100644
--- a/packages/toast/src/toast.js
+++ b/packages/toast/src/toast.js
@@ -2,23 +2,15 @@ import Vue from 'vue';
 import merge from 'src/utils/merge';
 
 const ToastConstructor = Vue.extend(require('./toast.vue'));
-let toastQueue = [];
+let instance;
 
 const getInstance = () => {
-  if (toastQueue.length > 0) {
-    const instance = toastQueue[0];
-    toastQueue.splice(0, 1);
-    return instance;
-  }
-  return new ToastConstructor({
+  if (instance) instance.clear();
+
+  instance = new ToastConstructor({
     el: document.createElement('div')
   });
-};
-
-const returnInstance = instance => {
-  if (instance) {
-    toastQueue.push(instance);
-  }
+  return instance;
 };
 
 const removeDom = event => {
@@ -30,8 +22,7 @@ const removeDom = event => {
 var Toast = (options = {}) => {
   const duration = options.duration || 3000;
 
-  let instance = getInstance();
-  returnInstance(instance);
+  const instance = getInstance();
   instance.closed = false;
   clearTimeout(instance.timer);
   instance.type = options.type ? options.type : 'text';
@@ -77,4 +68,8 @@ Toast.fail = (options) => {
   }, options));
 };
 
+Toast.clear = () => {
+  if (instance) instance.clear();
+};
+
 export default Toast;
diff --git a/packages/toast/src/toast.vue b/packages/toast/src/toast.vue
index 0e9c89035..3ffe32bea 100644
--- a/packages/toast/src/toast.vue
+++ b/packages/toast/src/toast.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="zan-toast">
+  <transition name="zan-toast-fade">
     <div class="zan-toast-wrapper" v-show="visible">
       <div class="zan-toast" :class="['zan-toast--' + displayStyle]">
         <!-- 只显示文字 -->
@@ -50,14 +50,14 @@ export default {
     type: {
       type: String,
       default: 'text',
-      validate(value) {
+      validator(value) {
         return TOAST_TYPES.indexOf(value) > -1;
       }
     },
     message: {
       type: String,
       default: '',
-      validate(value) {
+      validator(value) {
         if (this.type === 'success' || this.type === 'fail') {
           return value.length <= 16;
         }
diff --git a/packages/waterfall/src/directive.js b/packages/waterfall/src/directive.js
index d2065ff2f..5edae9d5c 100644
--- a/packages/waterfall/src/directive.js
+++ b/packages/waterfall/src/directive.js
@@ -104,12 +104,13 @@ export default function(type) {
     },
 
     update(el) {
-      el[CONTEXT].scrollEventListener();
+      const context = el[CONTEXT];
+      context.scrollEventListener && context.scrollEventListener();
     },
 
     unbind(el) {
       const context = el[CONTEXT];
-      context.scrollEventTarget.removeEventListener('scroll', context.scrollEventListener);
+      context.scrollEventTarget && context.scrollEventTarget.removeEventListener('scroll', context.scrollEventListener);
     }
   };
 };
diff --git a/packages/zanui-css/assets/icons.sketch b/packages/zanui-css/assets/icons.sketch
index 77a1b3e2b..6040a80f9 100644
Binary files a/packages/zanui-css/assets/icons.sketch and b/packages/zanui-css/assets/icons.sketch differ
diff --git a/packages/zanui-css/package.json b/packages/zanui-css/package.json
index c4d565b6e..ae9b735ef 100644
--- a/packages/zanui-css/package.json
+++ b/packages/zanui-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-css",
-  "version": "0.0.42",
+  "version": "0.1.0",
   "description": "zanui css.",
   "main": "lib/index.css",
   "style": "lib/index.css",
diff --git a/packages/zanui-css/scripts/build.sh b/packages/zanui-css/scripts/build.sh
index d2aa91528..5d3ca5d89 100644
--- a/packages/zanui-css/scripts/build.sh
+++ b/packages/zanui-css/scripts/build.sh
@@ -14,7 +14,7 @@ command_exists () {
 
 fontname() {
   if command_exists superman ; then
-    echo "//b.yzcdn.cn$server_prefix/$(basename $basepath/../build/font/zanui-icon-*.$1)"
+    echo "https://b.yzcdn.cn$server_prefix/$(basename $basepath/../build/font/zanui-icon-*.$1)"
   else
     echo "$(abspath $basepath/../build/font/zanui-icon-*.$1)"
   fi
diff --git a/packages/zanui-css/scripts/fount-config.js b/packages/zanui-css/scripts/fount-config.js
index a472a4ad2..f0bf9e89c 100644
--- a/packages/zanui-css/scripts/fount-config.js
+++ b/packages/zanui-css/scripts/fount-config.js
@@ -66,7 +66,8 @@ module.exports = {
     {
       keywords: ['chat'],
       src: '客服.svg',
-      css: 'chat'
+      css: 'chat',
+      'correct_contour_direction': true
     },
     {
       keywords: ['shop'],
@@ -142,6 +143,12 @@ module.exports = {
       keywords: ['fail'],
       src: '失败.svg',
       css: 'fail'
+    },
+    {
+      keywords: ['contact'],
+      src: '联系人.svg',
+      css: 'contact',
+      'correct_contour_direction': true
     }
   ]
 };
diff --git a/packages/zanui-css/src/badge.css b/packages/zanui-css/src/badge.css
index 6c88ba3e3..e31774330 100644
--- a/packages/zanui-css/src/badge.css
+++ b/packages/zanui-css/src/badge.css
@@ -2,70 +2,76 @@
 @import './mixins/border_retina.css';
 
 @component-namespace zan {
-    @b badge-group {
-        position: relative;
-        width: 85px;
-        &::after {
-          @mixin border-retina (top);
-        }
+  @b badge-group {
+    position: relative;
+    width: 85px;
+    &::after {
+      @mixin border-retina (top);
     }
-    @b badge {
+  }
+
+  @b badge {
+    display: block;
+    overflow: hidden;
+    position: relative;
+    padding: 20px 12px;
+    box-sizing: border-box;
+    line-height: 1.4;
+    background-color: $c-background;
+    color: $c-gray-darker;
+    font-size: 14px;
+    text-decoration: none;
+    word-break: break-all;
+
+    @m select {
+      font-weight: bold;
+      color: $c-black;
+      background-color: $c-white;
+      .zan-badge__active {
         display: block;
-        overflow: hidden;
-        position: relative;
-        padding: 20px 12px;
-        box-sizing: border-box;
-        line-height: 1.4;
-        background-color: $c-background;
-        color: $c-gray-darker;
-        font-size: 14px;
-        text-decoration: none;
-        word-break: break-all;
-        @e active {
-            display: none;
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 3px;
-            height: 100%;
-            background-color: #FF4444;
-        }
-        @e info {
-            position: absolute;
-            top: 2px;
-            right: 2px;
-            font-size: 10px;
-            transform:scale(0.8);
-            text-align: center;
-            box-sizing: border-box;
-            padding: 0 6px;
-            min-width: 18px;
-            height: 18px;
-            line-height: 18px;
-            border-radius: 9px;
-            background-color: #FF4444;
-            color: $c-white;
-        }
-        @when select {
-            font-weight: bold;
-            color: $c-black;
-            background-color: $c-white;
-            .zan-badge__active {
-                display: block;
-            }
-            &::after {
-                @mixin border-retina (top);
-                @mixin border-retina (right);
-                @mixin border-retina (left);
-            }
-        }
-        &::after {
-          @mixin border-retina (bottom);
-        }
-        &:last-child {
-          &::after {
-            border-bottom: 0;
-          }
-        }
+      }
+      &::after {
+        @mixin border-retina (top);
+        @mixin border-retina (right);
+        @mixin border-retina (left);
+      }
     }
+
+    @e active {
+      display: none;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 3px;
+      height: 100%;
+      background-color: #FF4444;
+    }
+
+    @e info {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      font-size: 10px;
+      transform:scale(0.8);
+      text-align: center;
+      box-sizing: border-box;
+      padding: 0 6px;
+      min-width: 18px;
+      height: 18px;
+      line-height: 18px;
+      border-radius: 9px;
+      background-color: #FF4444;
+      color: $c-white;
+    }
+
+    &::after {
+      @mixin border-retina (bottom);
+    }
+
+    &:last-child {
+      &::after {
+        border-bottom: 0;
+      }
+    }
+  }
 }
diff --git a/packages/zanui-css/src/button.css b/packages/zanui-css/src/button.css
index 0dc62e8f7..29f86dc04 100644
--- a/packages/zanui-css/src/button.css
+++ b/packages/zanui-css/src/button.css
@@ -9,7 +9,6 @@
     height: 45px;
     line-height: 43px;
     border-radius: 4px;
-    border: 0;
     box-sizing: border-box;
     font-size: 16px;
     text-align: center;
@@ -28,12 +27,11 @@
       opacity: .3;
     }
 
-    & + .zan-button {
-      margin-left: 10px;
-    }
-
-    & + .zan-button--block {
-      margin-left: 0;
+    @e icon-loading {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      vertical-align: middle;
     }
 
     @m default {
@@ -62,7 +60,7 @@
     }
 
     @m normal {
-      padding: 0 10px;
+      padding: 0 15px;
       font-size: 14px;
     }
 
@@ -105,11 +103,20 @@
       }
     }
 
-    @e icon-loading {
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      vertical-align: middle;
+    @m bottom-action {
+      width: 100%;
+      height: 50px;
+      line-height: 50px;
+      border: 0;
+      border-radius: 0;
+      background-color: $bottom-action-button-default-background-color;
+      color: $bottom-action-button-default-color;
+      font-size: 16px;
+
+      &.zan-button--primary {
+        background-color: $bottom-action-button-primary-background-color;
+        color: $bottom-action-button-primary-color;
+      }
     }
   }
 }
diff --git a/packages/zanui-css/src/button_group.css b/packages/zanui-css/src/button_group.css
deleted file mode 100644
index 5321eb204..000000000
--- a/packages/zanui-css/src/button_group.css
+++ /dev/null
@@ -1,33 +0,0 @@
-@define-mixin button-wrap {
-  display: inline-block;
-  box-sizing: border-box;
-  padding-right: 10px;
-  vertical-align: middle;
-  &:last-child {
-    padding-right: 0;
-  }
-  .zan-button {
-    width: 100%;
-  }
-}
-
-@component-namespace zan {
-  @b button-group {
-    font-size: 0;
-
-
-  }
-  @b button-1 {
-    @mixin button-wrap;
-    padding-right: 0;
-    width: 100%;
-  }
-  @b button-2 {
-    @mixin button-wrap;
-    width: 50%;
-  }
-  @b button-3 {
-    @mixin button-wrap;
-    width: 33.33%;
-  }
-}
diff --git a/packages/zanui-css/src/card.css b/packages/zanui-css/src/card.css
index 95d722c9d..9939d734a 100644
--- a/packages/zanui-css/src/card.css
+++ b/packages/zanui-css/src/card.css
@@ -15,7 +15,7 @@
 
     @e img {
       width: 90px;
-      height: 90px;
+      height: auto;
       border: 0;
       position: absolute;
       top: 5px;
@@ -26,7 +26,7 @@
       display: table;
       width: 100%;
 
-      @when center {
+      @m center {
         display: table;
         height: 90px;
 
diff --git a/packages/zanui-css/src/cell.css b/packages/zanui-css/src/cell.css
index 66b45b17d..b29e716c4 100644
--- a/packages/zanui-css/src/cell.css
+++ b/packages/zanui-css/src/cell.css
@@ -1,5 +1,6 @@
 @import './common/var.css';
 @import './mixins/border_retina.css';
+@import './icon.css';
 
 @component-namespace zan {
   @b cell-group {
@@ -36,16 +37,6 @@
 
     @e title {
       float: left;
-
-      &.zan-cell__required {
-        &::before {
-          content: '*';
-          position: absolute;
-          left: -7px;
-          font-size: 14px;
-          color: #f44;
-        }
-      }
     }
 
     @e label {
@@ -59,15 +50,32 @@
       float: right;
       overflow: hidden;
 
-      @when link {
+      @m link {
         margin-right: 20px;
       }
 
-      @when alone {
+      @m alone {
         float: none;
       }
     }
 
+    @m required {
+      overflow: visible;
+
+      &::before {
+        content: '*';
+        position: absolute;
+        left: -7px;
+        font-size: 14px;
+        color: #f44;
+      }
+
+      .zan-cell__title {
+        float: none;
+        display: inline-block;
+      }
+    }
+
     .zan-icon-arrow {
       position: absolute;
       top: 50%;
diff --git a/packages/zanui-css/src/common/var.css b/packages/zanui-css/src/common/var.css
index 7f79e0414..4e89219f5 100644
--- a/packages/zanui-css/src/common/var.css
+++ b/packages/zanui-css/src/common/var.css
@@ -32,3 +32,9 @@ $button-danger-border-color: #e33;
 $button-disabled-color: $c-gray-dark;
 $button-disabled-background-color: $c-gray-light;
 $button-disabled-border-color: #cacaca;
+
+$bottom-action-button-default-color: $c-white;
+$bottom-action-button-default-background-color: #f85;
+
+$bottom-action-button-primary-color: $c-white;
+$bottom-action-button-primary-background-color: #f44;
diff --git a/packages/zanui-css/src/icon.css b/packages/zanui-css/src/icon.css
index 1c0816e45..ebfb073bd 100644
--- a/packages/zanui-css/src/icon.css
+++ b/packages/zanui-css/src/icon.css
@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: 'zan-icon';
-  src: url('//b.yzcdn.cn/zanui/icon/zanui-icon-d64cb2f719.eot');
-  src: url('//b.yzcdn.cn/zanui/icon/zanui-icon-d64cb2f719.eot?#iefix') format('embedded-opentype'),
-       url('//b.yzcdn.cn/zanui/icon/zanui-icon-d64cb2f719.woff2') format('woff2'),
-       url('//b.yzcdn.cn/zanui/icon/zanui-icon-d64cb2f719.woff') format('woff'),
-       url('//b.yzcdn.cn/zanui/icon/zanui-icon-d64cb2f719.ttf') format('truetype')
+  src: url('https://b.yzcdn.cn/zanui/icon/zanui-icon-55de83a2f0.eot');
+  src: url('https://b.yzcdn.cn/zanui/icon/zanui-icon-55de83a2f0.eot?#iefix') format('embedded-opentype'),
+       url('https://b.yzcdn.cn/zanui/icon/zanui-icon-55de83a2f0.woff2') format('woff2'),
+       url('https://b.yzcdn.cn/zanui/icon/zanui-icon-55de83a2f0.woff') format('woff'),
+       url('https://b.yzcdn.cn/zanui/icon/zanui-icon-55de83a2f0.ttf') format('truetype')
 }
 
 .zan-icon {
@@ -72,4 +72,5 @@
 .zan-icon-search:before { content: '\e816'; } /* '' */
 .zan-icon-clear:before { content: '\e817'; } /* '' */
 .zan-icon-success:before { content: '\e818'; } /* '' */
-.zan-icon-fail:before { content: '\e819'; } /* '' */
\ No newline at end of file
+.zan-icon-fail:before { content: '\e819'; } /* '' */
+.zan-icon-contact:before { content: '\e81a'; } /* '' */
\ No newline at end of file
diff --git a/packages/zanui-css/src/image_preview.css b/packages/zanui-css/src/image_preview.css
index eb47d8b12..9d78c4384 100644
--- a/packages/zanui-css/src/image_preview.css
+++ b/packages/zanui-css/src/image_preview.css
@@ -1,3 +1,5 @@
+@import './swipe.css';
+
 @component-namespace zan {
   @b image-preview {
     position: fixed;
@@ -9,18 +11,24 @@
 
     @e image {
       display: block;
-      width: 100%;
-      height: auto;
-      transition: .2s ease-out;
       position: absolute;
       left: 0;
 
       @m center {
+        width: 100%;
+        height: auto;
         top: 50%;
         transform: translate3d(0, -50%, 0);
       }
     }
 
+    .zan-image-preview__image--big {
+      height: 100%;
+      width: auto;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
+    }
+
     .zan-swipe {
       height: 100%;
     }
diff --git a/packages/zanui-css/src/search.css b/packages/zanui-css/src/search.css
index f97abffba..e2a2c2860 100644
--- a/packages/zanui-css/src/search.css
+++ b/packages/zanui-css/src/search.css
@@ -1,69 +1,61 @@
 @import './common/var.css';
+@import './icon.css';
 
 @component-namespace zan {
-    @b search {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-        align-items: center;
-        position: relative;
-        box-sizing: border-box;
-        padding: 4px 15px;
-        background-color: #F2F2F2;
+  @b search {
+    position: relative;
+    box-sizing: border-box;
+    padding: 4px 15px;
+    background-color: #F2F2F2;
 
-        @m focus {
-            .zan-search__input-wrap {
-                width: 82%;   
-            }
-            .zan-icon-clear {
-                display: inline-block;
-            }
-        }
-
-        @e input-wrap {
-            position: relative;
-            width: 90%;
-            padding: 8px 24px 8px 35px;
-            border: 1px solid $c-gray-light;
-            border-radius: 4px;
-            background-color: $c-white;
-
-            input {
-                width: 100%;
-                height: 14px;
-                font-size: 14px;
-                color: $c-gray-dark;
-                border: none;
-                outline: none;
-            }
-        }
-
-        @e cancel {
-            display: none;
-            color: #44BB00;
-            font-size: 14px;
-            white-space: nowrap;
-            margin-left: 5px;
-
-            @m focus {
-               display: block;
-            }
-        }
-
-        .zan-icon-search {
-            color: $c-gray-darker;
-            position: absolute;
-            top: 9px;
-            left: 10px;
-            font-size: 16px;
-        }
-
-        .zan-icon-clear {
-            display: none;
-            position: absolute;
-            right: 5px;
-            top: 8px;
-            color: #888;
-        }
+    @m focus {
+      padding-right: 50px;
     }
+
+    @e input-wrap {
+      position: relative;
+      padding: 8px 24px 8px 35px;
+      border: 1px solid $c-gray-light;
+      border-radius: 4px;
+      background-color: $c-white;
+    }
+
+    @e input {
+      display: block;
+      width: 100%;
+      height: 14px;
+      font-size: 14px;
+      color: $c-gray-dark;
+      border: none;
+      outline: none;
+    }
+
+    @e cancel {
+      position: absolute;
+      line-height: 34px;
+      padding: 4px 0;
+      top: 0;
+      right: 10px;
+      font-size: 14px;
+      color: $c-green;
+    }
+
+    .zan-icon-search {
+      color: $c-gray-darker;
+      position: absolute;
+      top: 8px;
+      left: 10px;
+      font-size: 16px;
+      line-height: 1;
+    }
+
+    .zan-icon-clear {
+      font-size: 14px;
+      line-height: 1;
+      position: absolute;
+      right: 5px;
+      top: 9px;
+      color: #888;
+    }
+  }
 }
\ No newline at end of file
diff --git a/packages/zanui-css/src/steps.css b/packages/zanui-css/src/steps.css
index 684a1a25d..87e2cb72a 100644
--- a/packages/zanui-css/src/steps.css
+++ b/packages/zanui-css/src/steps.css
@@ -1,5 +1,6 @@
 @import './common/var.css';
 @import './mixins/ellipsis.css';
+@import './icon.css';
 
 @component-namespace zan {
   @b steps {
@@ -20,12 +21,15 @@
     }
 
     @e icon {
-      font-size: 40px;
-      line-height: 1;
       float: left;
       margin-right: 10px;
     }
 
+    .zan-icon {
+      font-size: 40px;
+      line-height: 1;
+    }
+
     @e message {
       display: table;
       height: 40px;
@@ -53,8 +57,12 @@
     @e items {
       margin: 0 0 10px;
       overflow: hidden;
-      padding-bottom: 20px;
       position: relative;
+      padding-bottom: 20px;
+
+      @m alone {
+        padding-top: 10px;
+      }
     }
   }
 
diff --git a/packages/zanui-css/src/swipe.css b/packages/zanui-css/src/swipe.css
index e5af9411f..518ded439 100644
--- a/packages/zanui-css/src/swipe.css
+++ b/packages/zanui-css/src/swipe.css
@@ -1,24 +1,56 @@
+@import './common/var.css';
+
 @component-namespace zan {
-    @b swipe {
-        position: relative;
-        overflow: hidden;
-        width: 100%;
+  @b swipe {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+
+    @e indicators {
+      position: absolute;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
     }
 
-    @b swipe-item {
-        display: none;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        text-align: center;
+    @e indicator {
+      width: 5px;
+      height: 5px;
+      display: inline-block;
+      border-radius: 100%;
+      background: #999;
+      opacity: .8;
+      margin: 0 3px;
+      z-index: 1;
 
-        img {
-            width: 100%;
-            height: auto;
-        }
-
-        &:first-child {
-            display: block;
-        }
+      @m active {
+        background: $c-orange;
+        opacity: 1;
+      }
     }
+
+    @e items {
+      position: relative;
+      overflow: hidden;
+      position: relative;
+      height: 100%;
+    }
+  }
+
+  @b swipe-item {
+    display: none;
+    height: 100%;
+    width: 100%;
+    text-align: center;
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+
+    &:first-child {
+      display: block;
+    }
+  }
 }
diff --git a/packages/zanui-css/src/tab.css b/packages/zanui-css/src/tab.css
index bc552a6be..b3fe3896a 100644
--- a/packages/zanui-css/src/tab.css
+++ b/packages/zanui-css/src/tab.css
@@ -53,9 +53,7 @@
         border-radius: 2px;
         border: 1px solid #666666;
         overflow: hidden;
-        .zan-tabs__nav-bar {
-          display: none;
-        }
+
         .zan-tab {
           color: #666666;
           line-height: 28px;
diff --git a/packages/zanui-css/src/tag.css b/packages/zanui-css/src/tag.css
index e3d656ebc..45ad0277f 100644
--- a/packages/zanui-css/src/tag.css
+++ b/packages/zanui-css/src/tag.css
@@ -23,6 +23,7 @@
       &::after {
         border-color: $c-green;
       }
+
       @when plain {
         color: $c-green;
       }
@@ -34,6 +35,7 @@
       &::after {
         border-color: $button-danger-background-color;
       }
+
       @when plain {
         color: $button-danger-background-color;
       }
@@ -45,6 +47,7 @@
       &::after {
         border-color: $c-blue;
       }
+
       @when plain {
         color: $c-blue;
       }
diff --git a/packages/zanui-css/src/toast.css b/packages/zanui-css/src/toast.css
index d59361425..0ee5f2477 100644
--- a/packages/zanui-css/src/toast.css
+++ b/packages/zanui-css/src/toast.css
@@ -44,9 +44,13 @@
       }
 
       .zan-toast__text {
-        padding-bottom: 20px;
+        padding: 15px 0 20px;
         font-size: 14px;
       }
     }
   }
 }
+
+.zan-toast-fade-enter, .zan-toast-fade-leave-active {
+  opacity: 0;
+}
diff --git a/src/index.js b/src/index.js
index 2f63cdc13..cd06312db 100644
--- a/src/index.js
+++ b/src/index.js
@@ -80,7 +80,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 module.exports = {
   install,
-  version: '0.0.42',
+  version: '0.1.0',
   Button,
   Switch,
   Field,
diff --git a/src/mixins/popup/index.js b/src/mixins/popup/index.js
index acb441b97..4ecc1e418 100644
--- a/src/mixins/popup/index.js
+++ b/src/mixins/popup/index.js
@@ -1,27 +1,6 @@
-import Vue from 'vue';
 import merge from 'src/utils/merge';
 import PopupManager from './popup-manager';
-
-let popupContext;
-if (!window.popupContext) {
-  popupContext = window.popupContext = {
-    idSeed: 1,
-    zIndex: 2000,
-    hasModal: false,
-    instances: {},
-    modalStack: []
-  };
-} else {
-  popupContext = window.popupContext;
-}
-
-const getDOM = function(dom) {
-  if (dom.nodeType === 3) {
-    dom = dom.nextElementSibling || dom.nextSibling;
-    getDOM(dom);
-  }
-  return dom;
-};
+import PopupContext from './popup-context';
 
 export default {
   props: {
@@ -70,8 +49,8 @@ export default {
   },
 
   beforeMount() {
-    this._popupId = 'popup-' + popupContext.idSeed++;
-    PopupManager.register(this._popupId, this, popupContext);
+    this._popupId = 'popup-' + PopupContext.plusKeyByOne('idSeed');
+    PopupManager.register(this._popupId, this);
   },
 
   data() {
@@ -94,13 +73,12 @@ export default {
 
       this.$emit('input', true);
 
-      const dom = getDOM(this.$el);
       const props = merge({}, this, options);
       const zIndex = props.zIndex;
 
       // 如果属性中传入了`zIndex`，则覆盖`popupContext`中对应的`zIndex`
       if (zIndex) {
-        popupContext.zIndex = zIndex;
+        PopupContext.setContext('zIndex', zIndex);
       }
 
       // 如果显示遮罩层
@@ -109,7 +87,7 @@ export default {
           PopupManager.closeModal(this._popupId);
           this.closing = false;
         }
-        PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), dom);
+        PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.$el);
 
         // 如果滚动时需要锁定
         if (this.lockOnScroll) {
@@ -118,11 +96,11 @@ export default {
             this.bodyOverflow = document.body.style.overflow;
           }
 
-          document.body.style.overlay = 'hidden';
+          document.body.style.overflow = 'hidden';
         }
       }
 
-      dom.style.zIndex = PopupManager.nextZIndex();
+      this.$el.style.zIndex = PopupManager.nextZIndex();
       this.opened = true;
       this.opening = false;
     },
@@ -139,7 +117,7 @@ export default {
 
       if (this.lockOnScroll) {
         setTimeout(() => {
-          if (this.modal && this.bodyOverflow !== 'hidden') {
+          if (this.overlay && this.bodyOverflow !== 'hidden') {
             document.body.style.overflow = this.bodyOverflow;
           }
           this.bodyOverflow = null;
@@ -160,7 +138,7 @@ export default {
     PopupManager.deregister(this._popupId);
     PopupManager.closeModal(this._popupId);
 
-    if (this.modal && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
+    if (this.overlay && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
       document.body.style.overflow = this.bodyOverflow;
     }
     this.bodyOverflow = null;
diff --git a/src/mixins/popup/popup-context.js b/src/mixins/popup/popup-context.js
new file mode 100644
index 000000000..a4cccf692
--- /dev/null
+++ b/src/mixins/popup/popup-context.js
@@ -0,0 +1,35 @@
+import merge from 'src/utils/merge';
+
+let context;
+if (window && window.popupContext) {
+  context = window.popupContext;
+}
+
+const DEFAULT_CONTEXT = {
+  idSeed: 1,
+  zIndex: 2000,
+  hasModal: false,
+  instances: {},
+  modalStack: []
+};
+
+context = window.popupContext = merge({}, DEFAULT_CONTEXT, context);
+
+const PopupContext = {
+  getContext(key) {
+    return context[key];
+  },
+
+  setContext(key, value) {
+    context[key] = value;
+  },
+
+  plusKeyByOne(key) {
+    const oldVal = context[key];
+    context[key] = oldVal + 1;
+
+    return oldVal;
+  }
+};
+
+export default PopupContext;
diff --git a/src/mixins/popup/popup-manager.js b/src/mixins/popup/popup-manager.js
index 69b02de00..eb33ecab9 100644
--- a/src/mixins/popup/popup-manager.js
+++ b/src/mixins/popup/popup-manager.js
@@ -1,16 +1,16 @@
-import Vue from 'vue';
 import { addClass } from 'src/utils/dom';
+import PopupContext from './popup-context';
 
 const getModal = function() {
-  let modalDom = window.popupContext && window.popupContext.modalDom;
+  let modalDom = PopupContext.getContext('modalDom');
 
   if (modalDom) {
-    window.popupContext.hasModal = true;
+    PopupContext.setContext('hasModal', true);
   } else {
-    window.popupContext.hasModal = false;
+    PopupContext.setContext('hasModal', false);
 
     modalDom = document.createElement('div');
-    window.popupContext.modalDom = modalDom;
+    PopupContext.setContext('modalDom', modalDom);
 
     modalDom.addEventListener('touchmove', function(event) {
       event.preventDefault();
@@ -27,24 +27,25 @@ const getModal = function() {
 
 const PopupManager = {
   nextZIndex() {
-    return this.popupContext.zIndex++;
+    return PopupContext.plusKeyByOne('zIndex');
   },
 
   getInstance(id) {
-    return this.popupContext.instances[id];
+    return PopupContext.getContext('instances')[id];
   },
 
-  register(id, instance, context) {
+  register(id, instance) {
     if (id && instance) {
-      this.popupContext = context;
-      this.popupContext.instances[id] = instance;
+      const instances = PopupContext.getContext('instances');
+      instances[id] = instance;
     }
   },
 
   deregister(id) {
     if (id) {
-      this.popupContext.instances[id] = null;
-      delete this.popupContext.instances[id];
+      const instances = PopupContext.getContext('instances');
+      instances[id] = null;
+      delete instances[id];
     }
   },
 
@@ -52,7 +53,8 @@ const PopupManager = {
    * 遮罩层点击回调，`closeOnClickOverlay`为`true`时会关闭当前`popup`
    */
   handleOverlayClick() {
-    const topModal = this.popupContext.modalStack[this.popupContext.modalStack.length - 1];
+    const modalStack = PopupContext.getContext('modalStack');
+    const topModal = modalStack[modalStack.length - 1];
     if (!topModal) return;
 
     const instance = PopupManager.getInstance(topModal.id);
@@ -64,7 +66,7 @@ const PopupManager = {
   openModal(id, zIndex, dom) {
     if (!id || zIndex === undefined) return;
 
-    const modalStack = this.popupContext.modalStack;
+    const modalStack = PopupContext.getContext('modalStack');
 
     for (let i = 0, len = modalStack.length; i < len; i++) {
       const item = modalStack[i];
@@ -88,11 +90,11 @@ const PopupManager = {
     }
     modalDom.style.display = '';
 
-    this.popupContext.modalStack.push({ id: id, zIndex: zIndex });
+    modalStack.push({ id: id, zIndex: zIndex });
   },
 
   closeModal(id) {
-    const modalStack = this.popupContext.modalStack;
+    const modalStack = PopupContext.getContext('modalStack');
     const modalDom = getModal();
 
     if (modalStack.length > 0) {
diff --git a/test/unit/specs/actionsheet.spec.js b/test/unit/specs/actionsheet.spec.js
index dcf387fb8..ca4e28ae1 100644
--- a/test/unit/specs/actionsheet.spec.js
+++ b/test/unit/specs/actionsheet.spec.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import ActionSheet from 'packages/actionsheet';
 import { mount } from 'avoriaz';
 
@@ -13,5 +14,103 @@ describe('ActionSheet', () => {
     });
 
     expect(wrapper.hasClass('zan-actionsheet')).to.be.true;
+    expect(wrapper.contains('.zan-actionsheet__list')).to.be.true;
+    expect(wrapper.instance().actions.length).to.equal(0);
+    expect(wrapper.instance().overlay).to.be.true;
+    expect(wrapper.instance().closeOnClickOverlay).to.be.true;
+  });
+
+  it('create displayed actionsheet', () => {
+    wrapper = mount(ActionSheet, {
+      propsData: {
+        value: true
+      }
+    });
+
+    expect(wrapper.instance().currentValue).to.be.true;
+  });
+
+  it('create title type actionsheet', () => {
+    wrapper = mount(ActionSheet, {
+      propsData: {
+        title: 'test'
+      }
+    });
+
+    expect(wrapper.hasClass('zan-actionsheet--withtitle')).to.be.true;
+    expect(wrapper.contains('.zan-actionsheet__header')).to.be.true;
+    expect(wrapper.contains('.zan-actionsheet__content')).to.be.true;
+  });
+
+  it('create actions actionsheet', () => {
+    wrapper = mount(ActionSheet, {
+      propsData: {
+        actions: [
+          {
+            name: '有赞E卡',
+            subname: '（剩余260.50元）'
+          },
+          {
+            name: '信用卡支付',
+            loading: true
+          }
+        ]
+      }
+    });
+
+    const actionItems = wrapper.find('.zan-actionsheet__item');
+
+    expect(actionItems.length).to.equal(2);
+    expect(actionItems[0].contains('.zan-actionsheet__name')).to.be.true;
+    expect(actionItems[0].contains('.zan-actionsheet__subname')).to.be.true;
+    expect(actionItems[1].contains('.zan-actionsheet__loading')).to.be.true;
+  });
+
+  it('handle actionsheet item click with callback', () => {
+    let called = false;
+    wrapper = mount(ActionSheet, {
+      propsData: {
+        actions: [
+          {
+            name: '有赞E卡',
+            callback: () => {
+              called = true;
+            }
+          }
+        ]
+      }
+    });
+
+    const actionItem = wrapper.find('.zan-actionsheet__item')[0];
+    actionItem.simulate('click');
+    expect(called).to.be.true;
+  });
+
+  it('create actionsheet with cancel button', () => {
+    wrapper = mount(ActionSheet, {
+      propsData: {
+        cancelText: 'cancel'
+      }
+    });
+
+    const cancelButton = wrapper.find('.zan-actionsheet__button')[0];
+    expect(wrapper.contains('.zan-actionsheet__button')).to.be.true;
+    expect(cancelButton.text()).to.equal('cancel');
+  });
+
+  it('toggle actionsheet value', () => {
+    wrapper = mount(ActionSheet, {
+      propsData: {
+        value: false
+      }
+    });
+
+    expect(wrapper.data().currentValue).to.be.false;
+    wrapper.vm.value = true;
+    wrapper.update();
+    Vue.nextTick(() => {
+      expect(wrapper.data().currentValue).to.be.true;
+      done();
+    });
   });
 });
diff --git a/test/unit/specs/badge.spec.js b/test/unit/specs/badge.spec.js
new file mode 100644
index 000000000..956cec2a5
--- /dev/null
+++ b/test/unit/specs/badge.spec.js
@@ -0,0 +1,25 @@
+import Badge from 'packages/badge';
+import BadgeGroup from 'packages/badge-group';
+import { mount } from 'avoriaz';
+
+describe('Badge', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+});
+
+describe('BadgeGroup', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a badge-group', () => {
+    wrapper = mount(BadgeGroup);
+
+    expect(wrapper.hasClass('zan-badge-group')).to.be.true;
+    expect(wrapper.instance().activeKey).to.equal(0);
+    expect(wrapper.data().badges.length).to.equal(0);
+  });
+});
diff --git a/test/unit/specs/button.spec.js b/test/unit/specs/button.spec.js
new file mode 100644
index 000000000..22c12521c
--- /dev/null
+++ b/test/unit/specs/button.spec.js
@@ -0,0 +1,135 @@
+import Button from 'packages/button';
+import ZanLoading from 'packages/loading';
+import { mount } from 'avoriaz';
+
+describe('Button', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a simple button', () => {
+    wrapper = mount(Button);
+
+    expect(wrapper.hasClass('zan-button')).to.be.true;
+    expect(wrapper.hasClass('zan-button--default')).to.be.true;
+    expect(wrapper.hasClass('zan-button--normal')).to.be.true;
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    wrapper.simulate('click');
+
+    expect(eventStub.calledOnce).to.be.true;
+    expect(eventStub.calledWith('click')).to.be.true;
+  });
+
+  it('create a primary button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        type: 'primary'
+      }
+    });
+
+    expect(wrapper.hasClass('zan-button')).to.be.true;
+    expect(wrapper.hasClass('zan-button--primary')).to.be.true;
+  });
+
+  it('create a danger button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        type: 'danger'
+      }
+    });
+
+    expect(wrapper.hasClass('zan-button')).to.be.true;
+    expect(wrapper.hasClass('zan-button--danger')).to.be.true;
+  });
+
+  it('create a large button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        size: 'large'
+      }
+    });
+
+    expect(wrapper.hasClass('zan-button')).to.be.true;
+    expect(wrapper.hasClass('zan-button--large')).to.be.true;
+  });
+
+  it('create a small button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        size: 'small'
+      }
+    });
+
+    expect(wrapper.hasClass('zan-button')).to.be.true;
+    expect(wrapper.hasClass('zan-button--small')).to.be.true;
+  });
+
+  it('create a mini button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        size: 'mini'
+      }
+    });
+
+    expect(wrapper.hasClass('zan-button')).to.be.true;
+    expect(wrapper.hasClass('zan-button--mini')).to.be.true;
+  });
+
+  it('create a block button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        block: true
+      }
+    });
+
+    expect(wrapper.hasClass('zan-button')).to.be.true;
+    expect(wrapper.hasClass('zan-button--block')).to.be.true;
+  });
+
+  it('create a bottom action button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        bottomAction: true
+      }
+    });
+
+    expect(wrapper.hasClass('zan-button')).to.be.true;
+    expect(wrapper.hasClass('zan-button--bottom-action')).to.be.true;
+  });
+
+  it('create a disabled button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        disabled: true
+      }
+    });
+
+    expect(wrapper.hasClass('zan-button')).to.be.true;
+    expect(wrapper.hasClass('zan-button--disabled')).to.be.true;
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    wrapper.simulate('click');
+
+    expect(eventStub.called).to.be.false;
+  });
+
+  it('create a loading button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        loading: true
+      }
+    });
+    const loading = wrapper.find(ZanLoading)[0];
+
+    expect(wrapper.hasClass('zan-button')).to.be.true;
+    expect(loading.isVueComponent).to.be.true;
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    wrapper.simulate('click');
+
+    expect(eventStub.called).to.be.false;
+  });
+});
diff --git a/test/unit/specs/cell.spec.js b/test/unit/specs/cell.spec.js
index 5699c3910..2324f806c 100644
--- a/test/unit/specs/cell.spec.js
+++ b/test/unit/specs/cell.spec.js
@@ -1,4 +1,5 @@
 import CellGroup from 'packages/cell-group';
+import Cell from 'packages/cell';
 import { mount } from 'avoriaz';
 
 describe('CellGroup', () => {
@@ -7,7 +8,7 @@ describe('CellGroup', () => {
     wrapper && wrapper.destroy();
   });
 
-  it('create', () => {
+  it('create a cell-group', () => {
     wrapper = mount(CellGroup, {
       propsData: {}
     });
@@ -15,3 +16,37 @@ describe('CellGroup', () => {
     expect(wrapper.hasClass('zan-cell-group')).to.be.true;
   });
 });
+
+describe('Cell', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create', () => {
+    wrapper = mount(Cell);
+
+    expect(wrapper.hasClass('zan-cell')).to.be.true;
+  });
+
+  it('create a required cell', () => {
+    wrapper = mount(Cell, {
+      propsData: {
+        required: true
+      }
+    });
+
+    expect(wrapper.hasClass('zan-cell')).to.be.true;
+    expect(wrapper.hasClass('zan-cell--required')).to.be.true;
+  });
+
+  it('emit a click event', () => {
+    wrapper = mount(Cell);
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    wrapper.simulate('click');
+
+    expect(eventStub.calledOnce).to.be.true;
+    expect(eventStub.calledWith('click')).to.be.true;
+  });
+});
diff --git a/test/unit/specs/icon.spec.js b/test/unit/specs/icon.spec.js
new file mode 100644
index 000000000..e479e3614
--- /dev/null
+++ b/test/unit/specs/icon.spec.js
@@ -0,0 +1,35 @@
+import Icon from 'packages/icon';
+import { mount } from 'avoriaz';
+
+describe('Icon', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a icon', () => {
+    wrapper = mount(Icon, {
+      propsData: {
+        name: 'arrow'
+      }
+    });
+
+    expect(wrapper.hasClass('zan-icon')).to.be.true;
+    expect(wrapper.hasClass('zan-icon-arrow')).to.be.true;
+  });
+
+  it('emit a click event', () => {
+    wrapper = mount(Icon, {
+      propsData: {
+        name: 'arrow'
+      }
+    });
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    wrapper.simulate('click');
+
+    expect(eventStub.calledOnce).to.be.true;
+    expect(eventStub.calledWith('click')).to.be.true;
+  });
+});
diff --git a/test/unit/specs/switch.spec.js b/test/unit/specs/switch.spec.js
index 4ebe06410..8477da46b 100644
--- a/test/unit/specs/switch.spec.js
+++ b/test/unit/specs/switch.spec.js
@@ -1,4 +1,5 @@
 import Switch from 'packages/switch';
+import Vue from 'vue';
 import ZanLoading from 'packages/loading';
 import { mount } from 'avoriaz';
 
@@ -12,7 +13,7 @@ describe('Switch', () => {
   it('create on switch', () => {
     wrapper = mount(Switch, {
       propsData: {
-        checked: true
+        value: true
       }
     });
 
@@ -23,7 +24,7 @@ describe('Switch', () => {
   it('create off switch', () => {
     wrapper = mount(Switch, {
       propsData: {
-        checked: false
+        value: false
       }
     });
 
@@ -47,7 +48,7 @@ describe('Switch', () => {
     wrapper = mount(Switch, {
       propsData: {
         loading: true,
-        checked: true
+        value: true
       }
     });
 
@@ -71,7 +72,7 @@ describe('Switch', () => {
     wrapper = mount(Switch, {
       propsData: {
         disabled: true,
-        checked: false
+        value: false
       }
     });
 
@@ -80,20 +81,50 @@ describe('Switch', () => {
     expect(wrapper.hasClass('zan-switch--off')).to.be.true;
   });
 
-  it('click event should fire change event', () => {
+  it('click should toggle the switch', () => {
     wrapper = mount(Switch, {
       propsData: {
-        checked: false
-      },
-      methods: {
+        value: false
+      }
+    });
 
+    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+    wrapper.simulate('click');
+    expect(wrapper.hasClass('zan-switch--on')).to.be.true;
+  });
+
+  it('click should call callback function', () => {
+    const stub = sinon.stub();
+    wrapper = mount(Switch, {
+      propsData: {
+        value: false,
+        onChange: stub
+      }
+    });
+
+    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+    wrapper.simulate('click');
+    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+    expect(stub.calledOnce).to.be.true;
+    expect(stub.calledWith(true));
+  });
+
+  it('toggle switch value from v-model', function(done) {
+    wrapper = mount(Switch, {
+      propsData: {
+        value: false
       }
     });
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
     expect(wrapper.hasClass('zan-switch--off')).to.be.true;
-    wrapper.simulate('click');
-    expect(eventStub.calledOnce).to.be.true;
-    expect(eventStub.calledWith('change')).to.be.true;
+    wrapper.vm.value = true;
+    wrapper.update();
+    Vue.nextTick(() => {
+      expect(wrapper.hasClass('zan-switch--on')).to.be.true;
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
   });
 });
diff --git a/test/unit/specs/toast.spec.js b/test/unit/specs/toast.spec.js
index dc06e9cf4..c4cd035c6 100644
--- a/test/unit/specs/toast.spec.js
+++ b/test/unit/specs/toast.spec.js
@@ -2,35 +2,35 @@ import Toast from 'packages/toast';
 import { mount } from 'avoriaz';
 
 describe('Toast', () => {
-  it('create simple toast', () => {
-    Toast('a message');
-    var toast = document.querySelector('.zan-toast');
+  // it('create simple toast', () => {
+  //   Toast('a message');
+  //   var toast = document.querySelector('.zan-toast');
 
-    expect(toast).not.to.be.underfined;
+  //   expect(toast).not.to.be.underfined;
 
-    setTimeout(() => {
-      expect(toast.hidden).to.be.true;
-    }, 301);
-  });
+  //   setTimeout(() => {
+  //     expect(toast.hidden).to.be.true;
+  //   }, 301);
+  // });
 
-  it('create loading toast', () => {
-    Toast.loading('');
-    var toast = document.querySelector('.zan-toast');
+  // it('create loading toast', () => {
+  //   Toast.loading('');
+  //   var toast = document.querySelector('.zan-toast');
 
-    expect(toast).not.to.be.underfined;
+  //   expect(toast).not.to.be.underfined;
 
-    setTimeout(() => {
-      expect(toast.hidden).to.be.true;
-    }, 301);
-  });
-  it('create loading toast', () => {
-    Toast.success('');
-    var toast = document.querySelector('.zan-toast');
+  //   setTimeout(() => {
+  //     expect(toast.hidden).to.be.true;
+  //   }, 301);
+  // });
+  // it('create loading toast', () => {
+  //   Toast.success('');
+  //   var toast = document.querySelector('.zan-toast');
 
-    expect(toast).not.to.be.underfined;
+  //   expect(toast).not.to.be.underfined;
 
-    setTimeout(() => {
-      expect(toast.hidden).to.be.true;
-    }, 301);
-  });
+  //   setTimeout(() => {
+  //     expect(toast.hidden).to.be.true;
+  //   }, 301);
+  // });
 });
diff --git a/yarn.lock b/yarn.lock
index 769af8a5e..b7d8f7414 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -237,6 +237,12 @@ async@1.x, async@^1.4.0, async@^1.5.0:
   version "1.5.2"
   resolved "http://registry.npm.qima-inc.com/async/download/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
+async@2.1.2:
+  version "2.1.2"
+  resolved "http://registry.npm.qima-inc.com/async/download/async-2.1.2.tgz#612a4ab45ef42a70cde806bad86ee6db047e8385"
+  dependencies:
+    lodash "^4.14.0"
+
 async@^2.1.2:
   version "2.1.5"
   resolved "http://registry.npm.qima-inc.com/async/download/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc"
@@ -1234,6 +1240,12 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "http://registry.npm.qima-inc.com/code-point-at/download/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+collections@^0.2.0:
+  version "0.2.2"
+  resolved "http://registry.npm.qima-inc.com/collections/download/collections-0.2.2.tgz#1f23026b2ef36f927eecc901e99c5f0d48fa334e"
+  dependencies:
+    weak-map "1.0.0"
+
 color-convert@^1.3.0:
   version "1.9.0"
   resolved "http://registry.npm.qima-inc.com/color-convert/download/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
@@ -2696,6 +2708,18 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+gh-pages@^0.12.0:
+  version "0.12.0"
+  resolved "http://registry.npm.qima-inc.com/gh-pages/download/gh-pages-0.12.0.tgz#d951e3ed98b85699d4b0418eb1a15b1a04988dc1"
+  dependencies:
+    async "2.1.2"
+    commander "2.9.0"
+    globby "^6.1.0"
+    graceful-fs "4.1.10"
+    q "1.4.1"
+    q-io "1.13.2"
+    rimraf "^2.5.4"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "http://registry.npm.qima-inc.com/glob-base/download/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -2863,16 +2887,16 @@ good-listener@^1.2.0:
   dependencies:
     delegate "^3.1.2"
 
+graceful-fs@4.1.10, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+  version "4.1.10"
+  resolved "http://registry.npm.qima-inc.com/graceful-fs/download/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131"
+
 graceful-fs@^3.0.0:
   version "3.0.11"
   resolved "http://registry.npm.qima-inc.com/graceful-fs/download/graceful-fs-3.0.11.tgz#7613c778a1afea62f25c630a086d7f3acbbdd818"
   dependencies:
     natives "^1.1.0"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
-  version "4.1.11"
-  resolved "http://registry.npm.qima-inc.com/graceful-fs/download/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
-
 graceful-fs@~1.2.0:
   version "1.2.3"
   resolved "http://registry.npm.qima-inc.com/graceful-fs/download/graceful-fs-1.2.3.tgz#15a4806a57547cb2d2dbf27f42e89a8c3451b364"
@@ -4310,10 +4334,14 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.13, mime-types@~2.1.7:
   dependencies:
     mime-db "~1.26.0"
 
-mime@1.3.4, mime@1.3.x, mime@^1.3.4:
+mime@1.3.4, mime@1.3.x, mime@^1.2.11, mime@^1.3.4:
   version "1.3.4"
   resolved "http://registry.npm.qima-inc.com/mime/download/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
 
+mimeparse@^0.1.4:
+  version "0.1.4"
+  resolved "http://registry.npm.qima-inc.com/mimeparse/download/mimeparse-0.1.4.tgz#dafb02752370fd226093ae3152c271af01ac254a"
+
 minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "http://registry.npm.qima-inc.com/minimalistic-assert/download/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
@@ -5409,9 +5437,20 @@ punycode@^1.2.4, punycode@^1.4.1:
   version "1.4.1"
   resolved "http://registry.npm.qima-inc.com/punycode/download/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
-q@^1.1.2:
-  version "1.5.0"
-  resolved "http://registry.npm.qima-inc.com/q/download/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
+q-io@1.13.2:
+  version "1.13.2"
+  resolved "http://registry.npm.qima-inc.com/q-io/download/q-io-1.13.2.tgz#eea130d481ddb5e1aa1bc5a66855f7391d06f003"
+  dependencies:
+    collections "^0.2.0"
+    mime "^1.2.11"
+    mimeparse "^0.1.4"
+    q "^1.0.1"
+    qs "^1.2.1"
+    url2 "^0.0.0"
+
+q@1.4.1, q@^1.0.1, q@^1.1.2:
+  version "1.4.1"
+  resolved "http://registry.npm.qima-inc.com/q/download/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
 
 qjobs@^1.1.4:
   version "1.1.5"
@@ -5421,6 +5460,10 @@ qs@6.4.0, qs@~6.4.0:
   version "6.4.0"
   resolved "http://registry.npm.qima-inc.com/qs/download/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
 
+qs@^1.2.1:
+  version "1.2.2"
+  resolved "http://registry.npm.qima-inc.com/qs/download/qs-1.2.2.tgz#19b57ff24dc2a99ce1f8bdf6afcda59f8ef61f88"
+
 query-string@^4.1.0:
   version "4.3.2"
   resolved "http://registry.npm.qima-inc.com/query-string/download/query-string-4.3.2.tgz#ec0fd765f58a50031a3968c2431386f8947a5cdd"
@@ -6551,6 +6594,10 @@ url-parse@^1.1.1:
     querystringify "0.0.x"
     requires-port "1.0.x"
 
+url2@^0.0.0:
+  version "0.0.0"
+  resolved "http://registry.npm.qima-inc.com/url2/download/url2-0.0.0.tgz#4eaabd1d5c3ac90d62ab4485c998422865a04b1a"
+
 url@^0.11.0:
   version "0.11.0"
   resolved "http://registry.npm.qima-inc.com/url/download/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
@@ -6688,6 +6735,10 @@ vue-html-loader@^1.2.3:
     loader-utils "^1.0.2"
     object-assign "^4.1.0"
 
+vue-lazyload@^1.0.3:
+  version "1.0.3"
+  resolved "http://registry.npm.qima-inc.com/vue-lazyload/download/vue-lazyload-1.0.3.tgz#6bd881a5bf3c681e74e86190094cad104bc403fa"
+
 vue-loader@^10.3.0:
   version "10.3.0"
   resolved "http://registry.npm.qima-inc.com/vue-loader/download/vue-loader-10.3.0.tgz#436421736e9ad0f1c481330327c376963db86a19"
@@ -6758,6 +6809,10 @@ watchpack@^1.3.1:
     chokidar "^1.4.3"
     graceful-fs "^4.1.2"
 
+weak-map@1.0.0:
+  version "1.0.0"
+  resolved "http://registry.npm.qima-inc.com/weak-map/download/weak-map-1.0.0.tgz#b66e56a9df0bd25a76bbf1b514db129080614a37"
+
 webidl-conversions@^2.0.0:
   version "2.0.1"
   resolved "http://registry.npm.qima-inc.com/webidl-conversions/download/webidl-conversions-2.0.1.tgz#3bf8258f7d318c7443c36f2e169402a1a6703506"