Merge pull request #376 from lsdlab/master

搜索框取消回调
ydcss · Dec 7, 2017 · 8e99a3e · 8e99a3e
2 parents cfc9774 + a14b672
commit 8e99a3e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/example/routers/search.vue b/example/routers/search.vue
@@ -1,10 +1,10 @@
 <template>
     <yd-layout title="Search">
         <p class="demo-search-title">行内模式：</p>
-        <yd-search v-model="value1" :onSubmit="submitHandler"></yd-search>
+        <yd-search v-model="value1" :onSubmit="submitHandler" :onCancel="cancelHandler" ></yd-search>
 
         <p class="demo-search-title">全屏模式（带匹配结果）：</p>
-        <yd-search :result="result" fullpage v-model="value2" :itemClick="clickHandler" :onSubmit="submitHandler"></yd-search>
+        <yd-search :result="result" fullpage v-model="value2" :itemClick="clickHandler" :onSubmit="submitHandler" :onCancel="cancelHandler"></yd-search>
     </yd-layout>
 </template>
 
@@ -30,6 +30,9 @@
             },
             submitHandler(value) {
                 this.$dialog.toast({mes: `搜索：${value}`});
+            },
+            cancelHandler() {
+                this.$dialog.toast({mes: '取消搜索回调'});
             }
         },
         watch: {

diff --git a/src/components/search/src/search.vue b/src/components/search/src/search.vue
@@ -14,7 +14,7 @@
                     ></yd-search-input>
                 </form>
                 <a href="javascript:;" class="cancel-text" v-show="currentValue !== ''"
-                   @click="close">{{cancelText}}</a>
+                   @click="close(false)">{{cancelText}}</a>
             </div>
         </div>
 
@@ -30,7 +30,7 @@
                                 ref="search"
                         ></yd-search-input>
                     </form>
-                    <a href="javascript:;" class="cancel-text" @click="close">{{cancelText}}</a>
+                    <a href="javascript:;" class="cancel-text" @click="close(false)">{{cancelText}}</a>
                 </div>
                 <div class="yd-search-list" :style="{paddingBottom: top}">
                     <p class="yd-search-list-item" v-for="item, key in result" @click="clickHandler(item)" :key="key">{{item.label || item}}</p>
@@ -90,6 +90,9 @@
             },
             onSubmit: {
                 type: Function
+            },
+            onCancel: {
+                type: Function
             }
         },
         watch: {
@@ -115,18 +118,21 @@
                     this.show = true;
                 }
             },
-            close() {
+            close(internalClose) {
                 this.show = false;
                 this.currentValue = '';
+                if (!internalClose) {
+                  this.onCancel();
+                }
             },
             submit() {
                 this.$refs.search.setBlur();
                 this.onSubmit && this.onSubmit(this.currentValue);
-                this.close();
+                this.close(true);
             },
             clickHandler(item) {
                 this.itemClick && this.itemClick(item);
-                this.close();
+                this.close(true);
             }
         },
         destroyed() {