code review

build/genExamples.js

@@ -4,7 +4,8 @@ var fs = require('fs');
 var path = require('path');
 var cheerio = require('cheerio');
 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 +70,32 @@ parser.use(markdownItContainer, 'demo', {
 });
 
 var docsDir = path.resolve(__dirname, '../docs');
-for (var item in Components) {
+var components = [];
-  var itemMdFile = `${docsDir}/examples-docs/${item}.md`;
+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)) {

docs/examples-dist/cell.vue

@@ -27,28 +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>
-@component-namespace demo {
-  @b card {
-    .official-img {
-      width: 31px;
-      vertical-align: middle;
-      border: 0;
-    }
 
-    .examples {
-      background-color: #fff;
-    }
-  }
-}
-</style>
 <script>
 import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 export default {

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/loading.vue

@@ -24,7 +24,10 @@
 
     .demo-loading__example--with-bg {
       background-color: rgba(0, 0, 0, 0.5);
-      margin-bottom: 10px;
+      margin: 0 auto;
+      width: 80px;
+      padding: 25px 0;
+      border-radius: 10px;
     }
   }
 }

docs/examples-dist/search.vue

@@ -1,5 +1,11 @@
 <template><section class="demo-search"><h1 class="demo-title">search</h1><example-block title="基础用法">
-                <zan-search placeholder="商品名称" @search="goSearch" @change="handleChange"></zan-search>
+                <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>
@@ -13,6 +19,9 @@ export default {
     },
     handleChange(value) {
       console.log(value);
+    },
+    handleCancel() {
+      alert('cancel');
     }
   }
 };

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="自定义样式用法">
+              </example-block><example-block title="自定义样式">
-                <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>
@@ -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 {
+  .custom-tabwrap .zan-tab-active {
-    padding: 0 15px;
-  }
-  .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-docs/cell.md

@@ -1,19 +1,3 @@
-<style>
-@component-namespace demo {
-  @b card {
-    .official-img {
-      width: 31px;
-      vertical-align: middle;
-      border: 0;
-    }
-
-    .examples {
-      background-color: #fff;
-    }
-  }
-}
-</style>
-
 <script>
 export default {
   methods: {
@@ -118,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/loading.md

@@ -11,7 +11,10 @@
 
     .demo-loading__example--with-bg {
       background-color: rgba(0, 0, 0, 0.5);
-      margin-bottom: 10px;
+      margin: 0 auto;
+      width: 80px;
+      padding: 25px 0;
+      border-radius: 10px;
     }
   }
 }

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`输入框的值  |

packages/search/src/search.vue

@@ -2,7 +2,13 @@
   <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">
+      <input
+        type="text"
+        :placeholder="placeholder"
+        v-model="value"
+        v-refocus="focusStatus"
+        @focus="handleFocus"
+        @keyup.enter="handleSearch">
       <zan-icon name="clear" @click="handleClean"></zan-icon>
     </div>
     <div class="zan-search__cancel" :class="{ 'zan-search__cancel--focus' : isFocus }" @click="handleBack">取消</div>
@@ -14,19 +20,21 @@
 
   export default {
     name: 'zan-search',
+
     components: {
       ZanIcon
     },
+
     props: {
-      placeholder: {
+      placeholder: String
-        type: String
-      }
     },
+
     watch: {
       value(val) {
         this.$emit('change', val);
       }
     },
+
     data() {
       return {
         value: '',
@@ -34,32 +42,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/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/search.css

@@ -1,69 +1,70 @@
 @import './common/var.css';
+@import './icon.css';
 
 @component-namespace zan {
-    @b search {
+  @b search {
-        display: flex;
+    display: flex;
-        flex-direction: row;
+    flex-direction: row;
-        justify-content: space-around;
+    justify-content: space-around;
-        align-items: center;
+    align-items: center;
-        position: relative;
+    position: relative;
-        box-sizing: border-box;
+    box-sizing: border-box;
-        padding: 4px 15px;
+    padding: 4px 15px;
-        background-color: #F2F2F2;
+    background-color: #F2F2F2;
 
-        @m focus {
+    @m focus {
-            .zan-search__input-wrap {
+      .zan-search__input-wrap {
-                width: 82%;   
+        width: 82%;   
-            }
+      }
-            .zan-icon-clear {
+      .zan-icon-clear {
-                display: inline-block;
+        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;
-        }
     }
+
+    @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;
+    }
+  }
 }

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 {