fix search

packages/search/src/search.vue

@@ -1,16 +1,22 @@
 <template>
-  <div class="zan-search" :class="{ 'is-focus' : isFocus }">
+  <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">
-      <span class="zan-icon zan-icon-close" @click="handleClean"></span>
+      <zan-icon name="clear" @click="handleClean"></zan-icon>
     </div>
-    <div class="zan-search__cancel" :class="{ 'is-focus' : isFocus }" @click="handleBack">取消</div>
+    <div class="zan-search__cancel" :class="{ 'zan-search__cancel--focus' : isFocus }" @click="handleBack">取消</div>
   </div>
 </template>
 
 <script>
+  import ZanIcon from 'packages/icon';
+
   export default {
     name: 'zan-search',
+    components: {
+      ZanIcon
+    },
     props: {
       placeholder: {
         type: String

packages/zanui-css/src/search.css

@@ -10,14 +10,16 @@
         box-sizing: border-box;
         padding: 4px 15px;
         background-color: #F2F2F2;
-        @when focus {
+
+        @m focus {
             .zan-search__input-wrap {
                 width: 82%;   
             }
-            span {
+            .zan-icon-clear {
                 display: inline-block;
             }
         }
+
         @e input-wrap {
             position: relative;
             width: 90%;
@@ -25,12 +27,7 @@
             border: 1px solid $c-gray-light;
             border-radius: 4px;
             background-color: $c-white;
-            span {
-                display: none;
-                position: absolute;
-                right: 5px;
-                top: 8px;
-            }
+
             input {
                 width: 100%;
                 height: 14px;
@@ -40,14 +37,33 @@
                 outline: none;
             }
         }
+
         @e cancel {
             display: none;
             color: #44BB00;
             font-size: 14px;
             white-space: nowrap;
-            @when focus {
+            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;
+        }
     }
 }

src/mixins/popup/popup-manager.js

@@ -2,13 +2,15 @@ import Vue from 'vue';
 import { addClass } from 'src/utils/dom';
 
 const getModal = function() {
-  let modalDom = PopupManager.modalDom;
+  let modalDom = window.popupContext && window.popupContext.modalDom;
+
   if (modalDom) {
-    PopupManager.popupContext.hasModal = true;
+    window.popupContext.hasModal = true;
   } else {
-    PopupManager.popupContext.hasModal = false;
+    window.popupContext.hasModal = false;
+
     modalDom = document.createElement('div');
-    PopupManager.modalDom = modalDom;
+    window.popupContext.modalDom = modalDom;
 
     modalDom.addEventListener('touchmove', function(event) {
       event.preventDefault();