done

docs/examples-docs/search.md

@@ -4,7 +4,9 @@
 
 :::demo 样例代码
 ```html
-<z-search placeholder="商品名称">
+<z-search 
+    placeholder="商品名称"
+>
 </z-search>
 ```
 :::

packages/search/src/search.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="z-search">
+  <div class="z-search" :class="{ 'is-focus' : isFocus }">
-    <div class="z-search__input-wrap"  :class="{ 'is-focus' : isFocus }">
+    <div class="z-search__input-wrap">
-      <input type="text" :value="value" :placeholder="placeholder" @focus="handleFocus" @blur="handleBlur">
+      <input type="text" :placeholder="placeholder" v-model="value" v-refocus="focusStatus"  @focus="handleFocus">
-      <span class="zui-icon zui-icon-close"></span>
+      <span class="zui-icon zui-icon-close" @click="handleClean"></span>
     </div>
+    <div class="z-search__cancel" :class="{ 'is-focus' : isFocus }" @click="handleBack">取消</div>
   </div>
 </template>
 
@@ -16,14 +17,28 @@
     data() {
       return {
         value: '',
+        focusStatus: false,
         isFocus: false
       };
     },
+    directives: {
+      refocus: {
+        update: function(el, state) {
+          if (state.value) { el.focus(); }
+        }
+      }
+    },
     methods: {
       handleFocus() {
         this.isFocus = true;
       },
-      handleBlur() {
+      handleClean() {
+        this.value = '';
+        this.focusStatus = true;
+      },
+      handleBack() {
+        this.value = '';
+        this.focusStatus = false;
         this.isFocus = false;
       }
     }

packages/zanui-css/src/search.css

@@ -1,11 +1,25 @@
 @import "./common/var.pcss";
 @component-namespace z {
     @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;
+        @when focus {
+            .z-search__input-wrap {
+                width: 82%;   
+            }
+            span {
+                display: inline-block;
+            }
+        }
         @e input-wrap {
             position: relative;
-            width: 92%;
+            width: 90%;
             padding: 8px 24px 8px 35px;
             border: 1px solid $c-gray-light;
             border-radius: 4px;
@@ -16,12 +30,6 @@
                 right: 5px;
                 top: 8px;
             }
-            @when focus {
-                width: 82%;
-                span {
-                    display: inline-block;
-                }
-            }
             input {
                 width: 100%;
                 height: 14px;
@@ -31,5 +39,14 @@
                 outline: none;
             }
         }
+        @e cancel {
+            display: none;
+            color: #44BB00;
+            font-size: 14px;
+            white-space: nowrap;
+            @when focus {
+               display: block;
+            }
+        }
     }
 }