Mborder-right: 1px solid transparent

erge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue

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));
 

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/nav.config.json');
+navs = navs['zh-CN'];
 
 var parser = markdownIt('default', {
   html: true
@@ -69,17 +71,32 @@ 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)) {
@@ -90,5 +107,5 @@ for (var item in Components) {
   });
 }
 
-console.log('generate examples success!');
+console.log(chalk.green('generate examples success!'));
 

build/webpack.config.js

@@ -48,7 +48,7 @@ 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, '..'),
@@ -97,20 +97,7 @@ module.exports = {
   },
   devtool: 'source-map',
   plugins: [
-    StyleExtractPlugin,
     new ProgressBarPlugin(),
-    new HtmlWebpackPlugin({
-      chunks: ['vendor', 'zan-docs'],
-      template: 'docs/index.tpl',
-      filename: 'index.html',
-      inject: true
-    }),
-    new HtmlWebpackPlugin({
-      chunks: ['vendor', 'zan-examples'],
-      template: 'docs/index.tpl',
-      filename: 'examples.html',
-      inject: true
-    }),
     new webpack.LoaderOptionsPlugin({
       minimize: true,
       options: {
@@ -160,7 +147,20 @@ module.exports = {
           }
         }
       }
-    })
+    }),
+    new HtmlWebpackPlugin({
+      chunks: ['vendor', 'zan-docs'],
+      template: 'docs/index.tpl',
+      filename: 'index.html',
+      inject: true
+    }),
+    new HtmlWebpackPlugin({
+      chunks: ['vendor', 'zan-examples'],
+      template: 'docs/index.tpl',
+      filename: 'examples.html',
+      inject: true
+    }),
+    StyleExtractPlugin
   ]
 };
 

docs/ExamplesDocsApp.vue

@@ -1,22 +1,6 @@
 <template>
   <div class="app">
-    <div class="page-header">
-      <h1 class="page-header-logo">
-        <a href="#"></a>
-      </h1>
-      <ul class="page-header-navs">
-        <li>
-          <a href="#">首页</a>
-        </li>
-        <li>
-          <a href="#" class="active">基础组件</a>
-        </li>
-        <li>
-          <a href="#">业务组件</a>
-        </li>
-      </ul>
-      <a href="#" class="github-logo">Github</a>
-    </div>
+    <page-header></page-header>
     <div class="main-content">
       <div class="page-container clearfix">
         <side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
@@ -26,8 +10,7 @@
         </div>
       </div>
     </div>
-    <div class="page-footer">
-    </div>
+    <page-footer></page-footer>
   </div>
 </template>
 

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,64 +66,8 @@ ul, ol {
   }
 }
 
-.page-header {
-  height: 60px;
-  background-color: #fbfbfb;
-  overflow: hidden;
-  padding-right: 62px;
-  position: relative;
-}
-
-.page-header-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;
-  }
-}
-
-.page-header-navs {
-  float: right;
-
-  li {
-    float: left;
-  }
-
-  a {
-    display: block;
-    line-height: 60px;
-    color: #333;
-    font-size: 16px;
-    margin: 0 20px;
-
-    &.active,
-    &:hover {
-      color: #3388FF;
-    }
-  }
-}
-
-.github-logo {
-  position: absolute;
-  top: 19px;
-  right: 20px;
-  width: 22px;
-  height: 0;
-  padding-top: 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;
-}
-
 .main-content {
-  margin: 40px 15px;
+  margin: 50px 15px 40px;
 }
 
 .page-container {
@@ -263,9 +207,3 @@ ul, ol {
     padding: 10px;
   }
 }
-
-.page-footer {
-  height: 72px;
-  margin-top: 40px;
-  background-color: #34383B;
-}

docs/components/demo-block.vue

@@ -30,8 +30,8 @@ export default {
     .examples {
       width: 320px;
       box-sizing: border-box;
-      padding: 10px 0 0;
-      min-height: 200px;
+      padding: 10px 0;
+      min-height: 60px;
       max-height: 500px;
       overflow: auto;
       background-color: #F8F8F8;

docs/components/mobile-computed.js

@@ -7,7 +7,11 @@ export default {
 
   computed: {
     mobileUrl() {
-      return '/examples.html#' + location.pathname.slice(4);
+      if (process.env.NODE_ENV === 'production') {
+        return '/vue/examples#' + location.pathname.slice(4);
+      } else {
+        return '/examples.html#' + location.pathname.slice(4);
+      }
     }
   },
 

docs/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>

docs/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>

docs/components/page-header.vue

@@ -0,0 +1,108 @@
+<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="#" class="page-header__link">PC端</a>
+      </li>
+      <li class="page-header__item">
+        <a href="#" class="page-header__link page-header__link--active">移动端</a>
+      </li>
+      <li class="page-header__item">
+        <a href="#" class="page-header__link">微信小程序</a>
+      </li>
+    </ul>
+    <ul class="page-header__subnavs">
+      <li class="page-header__item">
+        <a href="#" class="page-header__link page-header__link--active">基础组件</a>
+      </li>
+      <li class="page-header__item">
+        <a href="#" class="page-header__link">业务组件</a>
+      </li>
+      <li class="page-header__item">
+        <span class="page-header__link">V1.0</span>
+      </li>
+      <li class="page-header__item">
+        <a href="#" class="page-header__github" target="_blank"></a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style>
+@component-namespace page {
+  @b header {
+    height: 60px;
+    background-color: #fbfbfb;
+    position: relative;
+
+    @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;
+    }
+
+    @e subnavs {
+      position: absolute;
+      line-height: 50px;
+      top: 60px;
+      display: flex;
+      justify-content: center;
+      width: 100%;
+
+      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>

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>
@@ -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>

docs/examples-dist/badge.vue

@@ -1,9 +1,17 @@
 <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>

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,20 +27,14 @@
   <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);
 export default {

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>
 
 
 

docs/examples-dist/icon.vue

@@ -1,41 +1,143 @@
 <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" :style="{ color: '#f44' }"></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;
     }
   }
 } 

docs/examples-dist/image-preview.vue

@@ -16,13 +16,17 @@
 <script>
 import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 import { ImagePreview } from 'src/index';
+import MobileComputed from 'components/mobile-computed';
 
 export default {
+  mixins: [MobileComputed],
+
   methods: {
     handleImagePreview() {
       ImagePreview([
-        'https://img.yzcdn.cn/upload_files/2017/03/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'
       ]);
     }
   }

docs/examples-dist/layout.vue

@@ -0,0 +1,55 @@
+<template><section class="demo-layout"><h1 class="demo-title">layout</h1><example-block title="常规用法">
+                <zan-row>
+  <zan-col span="8">
+    <div class="gray"></div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="white"></div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="gray"></div>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col offset="12" span="12">
+    <div class="gray"></div>
+  </zan-col>
+</zan-row>
+
+              </example-block><example-block title="在列元素之间增加间距">
+                <zan-row gutter="10">
+  <zan-col span="8">
+    <div class="gray"></div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="white"></div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="gray"></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;
+    background: #666;
+}
+.white {
+    height: 30px;
+    background: #fff;
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

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>

docs/examples-dist/loading.vue

@@ -1,40 +1,35 @@
-<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>

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,8 +46,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;
     }
   }
 }
@@ -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);
       }
     }

docs/examples-dist/progress.vue

@@ -20,7 +20,7 @@
   <zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
 </div>
 
-              </example-block><example-block title="自定义颜色">
+              </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>

docs/examples-dist/search.vue

@@ -2,6 +2,12 @@
                 <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>
@@ -10,6 +16,12 @@ export default {
   methods: {
     goSearch(value) {
       alert(value)
+    },
+    handleChange(value) {
+      console.log(value);
+    },
+    handleCancel() {
+      alert('cancel');
     }
   }
 };

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>

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" @pagechange:end="handlePageEnd">
-  <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 {
@@ -35,6 +33,19 @@
 <script>
 import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
+  data() {
+    return {
+      autoImages: [
+        'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
+        'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
+      ],
+      images: [
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+      ]
+    };
+  },
+
   methods: {
     handlePageEnd(page, index) {
       console.log(page, index);

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 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) => {});
     }
   }
 };  

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,7 @@
 </zan-tabs>
 
 
+
               </example-block><example-block title="click事件">
                 <zan-tabs @click="handleTabClick">
   <zan-tab title="选项一">内容一</zan-tab>
@@ -55,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;

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>

docs/examples-dist/toast.vue

@@ -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;
         }

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>

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`的对象信息 |

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          |           |

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`。
 

docs/examples-docs/cell.md

@@ -1,11 +1,3 @@
-<style>
-.official-img {
-  width: 31px;
-  vertical-align: middle;
-  border: 0;
-}
-</style>
-
 <script>
 export default {
   methods: {
@@ -110,7 +102,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>

docs/examples-docs/checkbox.md

@@ -37,8 +37,42 @@ export default {
 
 ## 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">

docs/examples-docs/dialog.md

@@ -41,17 +41,25 @@ export default {
 
 ## 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`  | `取消` |   |

docs/examples-docs/field.md

@@ -22,7 +22,39 @@ export default {
 
 表单中`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。
 

docs/examples-docs/icon.md

@@ -1,12 +1,14 @@
 <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;
     }
   }
 } 
@@ -52,32 +54,132 @@ export default {
 
 :::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" :style="{ color: '#f44' }"></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>
 ```
 :::
 

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` |

docs/examples-docs/layout.md

@@ -29,12 +29,49 @@
 </style>
 
 ## Layout 布局
-主要提供了 zan-row 和 zan-col 两个组件来进行行列布局
 
-### 常规用法
-Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比（span / 24）；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
+主要提供了`zan-row`和`zan-col`两个组件来进行行列布局。
 
-:::demo
+### 使用指南
+
+如果你已经按照[快速上手](/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">
@@ -63,10 +100,11 @@ Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设
 ```
 :::
 
-### 在列元素之间增加间距
+#### 在列元素之间增加间距
+
 列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。
 
-:::demo
+:::demo 在列元素之间增加间距
 ```html
 <zan-row gutter="10">
   <zan-col span="8">

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` |   |

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 加载
 
-### 基础用法
+### 使用指南
 
-:::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
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |

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

docs/examples-docs/picker.md

@@ -37,7 +37,39 @@ export default {
 
 ## Picker 选择器
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/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
@@ -76,7 +108,7 @@ export default {
 ```
 :::
 
-### 带toolbar的Picker
+#### 带toolbar的Picker
 
 :::demo 带toolbar的Picker
 ```html

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);
       }
     }
@@ -78,36 +85,85 @@ export default {
 
 ## 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` |   |

docs/examples-docs/progress.md

@@ -12,7 +12,41 @@
 
 ## 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">
@@ -45,8 +82,11 @@
 :::
 
 
-### 自定义颜色和文字
-:::demo 自定义颜色
+#### 自定义颜色和文字
+
+可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
+
+:::demo 自定义颜色和文字
 ```html
 <div class="demo-progress__wrapper">
   <zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
@@ -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   |

docs/examples-docs/quantity.md

@@ -25,7 +25,39 @@ export default {
 
 ## 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`属性。
 

docs/examples-docs/radio.md

@@ -27,8 +27,42 @@ export default {
 
 ## 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">

docs/examples-docs/search.md

@@ -6,6 +6,9 @@ export default {
     },
     handleChange(value) {
       console.log(value);
+    },
+    handleCancel() {
+      alert('cancel');
     }
   }
 };
@@ -13,11 +16,46 @@ export default {
 
 ## 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" @change="handleChange"></zan-search>
+<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
+
 <script>
 export default {
   methods: {
@@ -30,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`  |           |     |
+
+### Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| change | `input`输入框每次`change`时触发，适用于实时搜索等 | value：当前`input`输入框的值  |
+| cancel | 取消搜索 |   |
+| search | 确定搜索 | value：当前`input`输入框的值  |

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 | 状态栏添加额外的元素 |
 

docs/examples-docs/swipe.md

@@ -14,6 +14,19 @@
 
 <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);
@@ -24,33 +37,95 @@ export default {
 
 ## 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,
+    'zam-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" @pagechange:end="handlePageEnd">
-  <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>
 ```
 :::
 

docs/examples-docs/switch.md

@@ -1,36 +1,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 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) => {});
     }
   }
 };  
@@ -38,46 +40,83 @@ export default {
 
 ## 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`  | -          | - |

docs/examples-docs/tab.md

@@ -1,4 +1,3 @@
-
 <style>
 @component-namespace demo {
   @b tab {
@@ -6,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>
@@ -36,7 +51,43 @@ export default {
 
 ## 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
@@ -50,17 +101,36 @@ export default {
 ```
 :::
 
-### 禁用用法
+#### active特定tab
 
-:::demo 禁用用法
+可以在`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: {
@@ -73,9 +143,11 @@ export default {
 ```
 :::
 
-### card样式用法
+#### card样式
 
-:::demo card样式用法
+`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`zan-tabs`上设置`type`为`card`改为card样式。
+
+:::demo card样式
 ```html
 <zan-tabs type="card">
   <zan-tab title="选项一">内容一</zan-tab>
@@ -87,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;
@@ -106,30 +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;
@@ -139,7 +202,7 @@ export default {
 ```
 :::
 
-### click事件
+#### click事件
 
 可以在`zan-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
 
@@ -179,5 +242,12 @@ export default {
 | 参数       | 说明      | 类型       | 默认值       | 可选       |
 |-----------|-----------|-----------|-------------|-------------|
 | title | tab的标题 | `string`  |         |          |
-| disable | 是否禁用这个tab | `boolean`  | `false`      |           |
+| disabled | 是否禁用这个tab | `boolean`  | `false`      |           |
+
+### zan-tabs Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| click | 某个tab点击事件 | index：点击的`tab`的索引 |
+| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
 

docs/examples-docs/tag.md

@@ -10,13 +10,47 @@
 
 ## 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>
 ```
 :::

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;
         }
@@ -65,7 +65,17 @@ export default {
 
 ## 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。

docs/examples-docs/uploader.md

@@ -12,25 +12,60 @@ export default {
   }
 };  
 </script>
+
 ## 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
 <div class="uploader-container">
     <zan-uploader 
         :before-read="logContent"
-        @file-readed="logContent">
+        :after-read="logContent">
     </zan-uploader>
 </div>
 ```
 :::
-### 自定义上传图标
+
+#### 自定义上传图标
+
 :::demo 自定义上传图标
 ```html
 <div class="uploader-container">
-  <zan-uploader @file-readed="logContent">
+  <zan-uploader :after-read="logContent">
     <zan-icon name="photograph"></zan-icon>
   </zan-uploader>
 </div>
@@ -45,7 +80,7 @@ export default {
 | result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `string`  | `dataUrl`          | `dataUrl`, `text`         |
 | disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `boolean`  | `false`          |           |
 | before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | `Function`  |           |  |
-| file-readed | 文件读完之后出发此事件，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | `Function`  |           |  |
+| after-read | 文件读完之后回调此函数，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | `Function`  |           |  |
 
 ### Slot
 

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` |   |
 

docs/examples.js

@@ -10,6 +10,9 @@ 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);

docs/index.js

@@ -6,6 +6,8 @@ import routes from './router.config';
 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';
 import ZanUI from 'src/index.js';
 
 import 'packages/zanui-css/src/index.css';
@@ -18,9 +20,14 @@ function isMobile() {
 
 Vue.use(VueRouter);
 Vue.use(ZanUI);
+Vue.use(ZanUI.Lazyload, {
+  lazyComponent: true
+});
 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);
 
 let routesConfig = routes(navConfig);
 routesConfig.push({

docs/nav.config.json

@@ -95,6 +95,10 @@
             {
               "path": "/image-preview",
               "title": "ImagePreview 图片预览"
+            },
+            {
+              "path": "/lazyload",
+              "title": "Lazyload 图片懒加载"
             }
           ]
         },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-vue",
-  "version": "0.0.47",
+  "version": "0.0.50",
   "description": "有赞vue wap组件库",
   "main": "lib/zanui.js",
   "style": "lib/zanui-css/index.css",
@@ -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",

packages/actionsheet/src/actionsheet.vue

@@ -89,7 +89,9 @@ export default {
 
   methods: {
     handleItemClick(item) {
-
+      if (item.callback && typeof item.callback === 'function') {
+        item.callback(item);
+      }
     }
   }
 };

packages/badge/src/badge-group.vue

@@ -14,6 +14,12 @@
         type: [Number, String],
         default: 0
       }
+    },
+
+    data() {
+      return {
+        badges: []
+      };
     }
   };
 </script>

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>

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>

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;

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;
 

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;

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',
 
@@ -32,32 +37,29 @@ export default {
         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() + '%';
+      return this.pivotText ? this.pivotText : this.percentage + '%';
     },
     componentColor() {
-      return this.inactive ? '#cacaca' : this.color;
+      return this.inactive ? INACTIVE_COLOR : this.color;
     },
     pivotStyle() {
       const pivotStyle = {

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"

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,19 +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: '',
@@ -34,32 +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);
       }
     }

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: []

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,12 @@ export default {
      */
     toggleState: function() {
       if (this.disabled || this.loading) return;
-      this.$emit('change', !this.checked);
+      console.log('d');
+      if (this.onChange) {
+        this.onChange(!this.checked);
+      } else {
+        this.checked = !this.checked;
+      }
     }
   }
 };

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>

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)"
       >
         {{ 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,13 +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.$emit('click', index);
-        this.switchActiveTabKey = index;
+        this.curActive = index;
       }
     },
 

packages/toast/src/toast.js

@@ -2,24 +2,17 @@ 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')
   });
+  return instance;
 };
 
-const returnInstance = instance => {
-  if (instance) {
-    toastQueue.push(instance);
-  }
-};
 
 const removeDom = event => {
   if (event.target.parentNode) {
@@ -31,7 +24,6 @@ var Toast = (options = {}) => {
   const duration = options.duration || 3000;
 
   let instance = getInstance();
-  returnInstance(instance);
   instance.closed = false;
   clearTimeout(instance.timer);
   instance.type = options.type ? options.type : 'text';
@@ -77,4 +69,8 @@ Toast.fail = (options) => {
   }, options));
 };
 
+Toast.clear = () => {
+  if (instance) instance.clear();
+}
+
 export default Toast;

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]">
         <!-- 只显示文字 -->

packages/uploader/src/main.vue

@@ -18,6 +18,7 @@
         default: false
       },
       beforeRead: Function,
+      afterRead: Function,
       resultType: {
         type: String,
         default: 'dataUrl',
@@ -37,7 +38,7 @@
         if (this.beforeRead && !this.beforeRead(file)) return;
         var reader = new FileReader();
         reader.onload = (e) => {
-          this.$emit('file-readed',
+          this.afterRead && this.afterRead(
             {
               name: file.name,
               type: file.type,

packages/zanui-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-css",
-  "version": "0.0.47",
+  "version": "0.0.50",
   "description": "zanui css.",
   "main": "lib/index.css",
   "style": "lib/index.css",

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

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
     }
   ]
 };

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;
+      }
+    }
+  }
 }

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;
 

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 {

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'; } /* '' */
+.zan-icon-fail:before { content: '\e819'; } /* '' */
+.zan-icon-contact:before { content: '\e81a'; } /* '' */

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%;
     }

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;
+    }
+  }
 }

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;
+      }
     }
   }
 

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;

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;
       }

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;
+}

src/index.js

@@ -80,7 +80,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 module.exports = {
   install,
-  version: '0.0.47',
+  version: '0.0.50',
   Button,
   Switch,
   Field,

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;

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;

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;
+      let instances = PopupContext.getContext('instances');
+      instances[id] = instance;
     }
   },
 
   deregister(id) {
     if (id) {
-      this.popupContext.instances[id] = null;
-      delete this.popupContext.instances[id];
+      let 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) {

yarn.lock

@@ -2887,7 +2887,7 @@ good-listener@^1.2.0:
   dependencies:
     delegate "^3.1.2"
 
-graceful-fs@4.1.10:
+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"
 
@@ -2897,10 +2897,6 @@ graceful-fs@^3.0.0:
   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"
@@ -5452,14 +5448,10 @@ q-io@1.13.2:
     qs "^1.2.1"
     url2 "^0.0.0"
 
-q@1.4.1:
+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"
 
-q@^1.0.1, q@^1.1.2:
-  version "1.5.0"
-  resolved "http://registry.npm.qima-inc.com/q/download/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
-
 qjobs@^1.1.4:
   version "1.1.5"
   resolved "http://registry.npm.qima-inc.com/qjobs/download/qjobs-1.1.5.tgz#659de9f2cf8dcc27a1481276f205377272382e73"
@@ -6743,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"