code review

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