done

components.json

@@ -17,5 +17,8 @@
   "steps": "./packages/steps/index.js",
   "tag": "./packages/tag/index.js",
   "checkbox": "./packages/checkbox/index.js",
-  "checkbox-group": "./packages/checkbox-group/index.js"
+  "checkbox-group": "./packages/checkbox-group/index.js",
+  "badge-group": "./packages/badge-group/index.js",
+  "badge": "./packages/badge/index.js",
+  "search": "./packages/search/index.js"
 }

docs/examples-docs/badge.md

@@ -2,7 +2,6 @@
 
 ### 基础用法
 
-:::demo 样例代码
 ```html
 <zan-badge-group active-key="2">
   <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
@@ -11,7 +10,6 @@
   <zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
 </zan-badge-group>
 ```
-:::
 
 ### z-badge-group API
 

docs/examples-docs/search.md

@@ -1,21 +1,12 @@
-<script>
-export default {
-  methods: {
-    goSearch(value) {
-      alert(value)
-    }
-  }
-};
-</script>
 ## Search 组件
 
 ### 基础用法
 
-:::demo 样例代码
+
 ```html
 <zan-search 
     placeholder="商品名称"
-    :on-search="goSearch"
+    @search="goSearch"
 >
 </zan-search>
 ```
@@ -29,11 +20,9 @@ export default {
   }
 };
 ```
-:::
 
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 必须       |
 |-----------|-----------|-----------|-------------|-------------|
-| placeholder | input的placeholder文案 | string  |           | required    |
+| placeholder | input的placeholder文案 | string  |           |     |
-| on-search | 点击回车后出发搜索回调 | function  | function() {}  |   |

docs/examples/badge.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="page-badge">
+    <h1 class="page-title">Badge</h1>
+    
+    <h2 class="page-sub-title">基础用法</h2>
+    <zan-badge-group active-key="2">
+      <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
+      <zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
+      <zan-badge mark="2" title="火炽寿司"></zan-badge>
+      <zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
+    </zan-badge-group>
+  </div>
+</template>
+<style>
+  .page-badge {
+    padding: 0 15px;
+  }
+</style>

docs/examples/search.vue

@@ -0,0 +1,23 @@
+<script>
+export default {
+  methods: {
+    goSearch(value) {
+      alert(value)
+    }
+  }
+};
+</script>
+<template>
+  <div class="page-search">
+    <h1 class="page-title">Search</h1>
+    
+    <h2 class="page-sub-title">基础用法</h2>
+    <zan-search  placeholder="商品名称" @search="goSearch">
+    </zan-search>
+  </div>
+</template>
+<style>
+  .page-badge {
+    padding: 0 15px;
+  }
+</style>

packages/search/src/search.vue

@@ -2,7 +2,7 @@
   <div class="zan-search" :class="{ 'is-focus' : isFocus }">
     <div class="zan-search__input-wrap">
       <input type="text" :placeholder="placeholder" v-model="value" v-refocus="focusStatus"  @focus="handleFocus" @keyup.enter="handleSearch">
-      <span class="zui-icon zui-icon-close" @click="handleClean"></span>
+      <span class="zan-icon zan-icon-close" @click="handleClean"></span>
     </div>
     <div class="zan-search__cancel" :class="{ 'is-focus' : isFocus }" @click="handleBack">取消</div>
   </div>
@@ -13,12 +13,7 @@
     name: 'zan-search',
     props: {
       placeholder: {
-        type: String,
+        type: String
-        required: true
-      },
-      onSearch: {
-        type: Function,
-        default: function() {}
       }
     },
     data() {
@@ -51,9 +46,9 @@
         this.focusStatus = false;
         this.isFocus = false;
       },
-      handleSearch(ev) {
+      handleSearch() {
         // input输入回车后，发送回调
-        this.onSearch(ev.target.value)
+        this.$emit('search', this.value)
       }
     }
   };

src/index.js

@@ -17,6 +17,9 @@ import Steps from '../packages/steps/index.js';
 import Tag from '../packages/tag/index.js';
 import Checkbox from '../packages/checkbox/index.js';
 import CheckboxGroup from '../packages/checkbox-group/index.js';
+import BadgeGroup from '../packages/badge-group/index.js';
+import Badge from '../packages/badge/index.js';
+import Search from '../packages/search/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -38,6 +41,9 @@ const install = function(Vue) {
   Vue.component(Tag.name, Tag);
   Vue.component(Checkbox.name, Checkbox);
   Vue.component(CheckboxGroup.name, CheckboxGroup);
+  Vue.component(BadgeGroup.name, BadgeGroup);
+  Vue.component(Badge.name, Badge);
+  Vue.component(Search.name, Search);
 };
 
 // auto install
@@ -66,5 +72,8 @@ module.exports = {
   Steps,
   Tag,
   Checkbox,
-  CheckboxGroup
+  CheckboxGroup,
+  BadgeGroup,
+  Badge,
+  Search
 };