done

components.json

@@ -12,5 +12,6 @@
   "radio-group": "./packages/radio-group/index.js",
   "loading": "./packages/loading/index.js",
   "badge": "./packages/badge/index.js",
-  "badge-group": "./packages/badge-group/index.js"
+  "badge-group": "./packages/badge-group/index.js",
+  "search": "./packages/search/index.js"
 }

docs/examples-docs/search.md

@@ -0,0 +1,10 @@
+## Search 组件
+
+### 基础用法
+
+:::demo 样例代码
+```html
+<z-search placeholder="商品名称">
+</z-search>
+```
+:::

packages/search/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/search/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/search/index.js

@@ -0,0 +1,3 @@
+import Search from './src/search';
+
+export default Search;

packages/search/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/search/src/search.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="z-search">
+    <div class="z-search__input-wrap"  :class="{ 'is-focus' : isFocus }">
+      <input type="text" :value="value" :placeholder="placeholder" @focus="handleFocus" @blur="handleBlur">
+      <span class="zui-icon zui-icon-close"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'z-search',
+    props: {
+      placeholder: String
+    },
+    data() {
+      return {
+        value: '',
+        isFocus: false
+      };
+    },
+    methods: {
+      handleFocus() {
+        this.isFocus = true;
+      },
+      handleBlur() {
+        this.isFocus = false;
+      }
+    }
+  };
+</script>

packages/zanui-css/src/index.css

@@ -13,3 +13,5 @@
 @import './radio.css';
 @import './switch.css';
 @import './badge.css';
+@import './search.css';
+

packages/zanui-css/src/search.css

@@ -0,0 +1,35 @@
+@import "./common/var.pcss";
+@component-namespace z {
+    @b search {
+        padding: 4px 15px;
+        background-color: #F2F2F2;
+        @e input-wrap {
+            position: relative;
+            width: 92%;
+            padding: 8px 24px 8px 35px;
+            border: 1px solid $c-gray-light;
+            border-radius: 4px;
+            background-color: $c-white;
+            span {
+                display: none;
+                position: absolute;
+                right: 5px;
+                top: 8px;
+            }
+            @when focus {
+                width: 82%;
+                span {
+                    display: inline-block;
+                }
+            }
+            input {
+                width: 100%;
+                height: 14px;
+                font-size: 14px;
+                color: $c-gray-dark;
+                border: none;
+                outline: none;
+            }
+        }
+    }
+}

src/index.js

@@ -12,6 +12,7 @@ import RadioGroup from '../packages/radio-group/index.js';
 import Loading from '../packages/loading/index.js';
 import Badge from '../packages/badge/index.js';
 import BadgeGroup from '../packages/badge-group/index.js';
+import Search from '../packages/search/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -29,6 +30,7 @@ const install = function(Vue) {
   Vue.component(Loading.name, Loading);
   Vue.component(Badge.name, Badge);
   Vue.component(BadgeGroup.name, BadgeGroup);
+  Vue.component(Search.name, Search);
 };
 
 // auto install
@@ -52,5 +54,6 @@ module.exports = {
   RadioGroup,
   Loading,
   Badge,
-  BadgeGroup
+  BadgeGroup,
+  Search
 };