点击搜索记录tag触发搜索

src/components/app-search-history/app-search-history.less

@@ -3,11 +3,11 @@
     .hisText{
       display: flex;
       justify-content: space-between;
-      font-size: 14px;
+      font-size: 15px;
       color: #777777;
       margin:2px 15px;
-      ion-icon{
-        padding-top: 3px;
+      .van-icon{
+        margin-top: 2px;
       }
     }
     .hisItems{

src/components/app-search-history/app-search-history.vue

 <template>
   <div class="app-seach-history">
         <ion-toolbar>
-            <ion-searchbar style="height: 36px; padding-bottom: 0px;" :placeholder="$t('app.fastsearch')" debounce="500" @ionChange="quickValueChange($event)" show-cancel-button="focus" :cancel-button-text="$t('app.button.cancel')" @ionFocus="showHistory" @ionBlur="hideHistory" @search="searchVal"></ion-searchbar>
+            <ion-searchbar style="height: 36px; padding-bottom: 0px;" :placeholder="$t('app.fastsearch')" debounce="500" @ionChange="quickValueChange($event)" show-cancel-button="focus" :cancel-button-text="$t('app.button.cancel')" @ionFocus="showHistory" @ionBlur="hideHistory" @search="searchVal" ref="searchbar"></ion-searchbar>
             <ion-button v-if="showfilter" class="filter-btn" size="small" slot="end"  @click="openSearchform"><ion-icon  slot="end" name="filter-outline"></ion-icon>过滤</ion-button> 
         </ion-toolbar>
         <div class="history" v-if="hasHistory">
-          <div class="hisText"><div>最近搜索</div> <ion-icon name="trash-bin-outline" @click="clearHistory"></ion-icon></div>
+          <div class="hisText"><div>最近搜索</div> <van-icon name="delete" @click="clearHistory"/></div>
           <div class="hisItems">
-            <van-tag type="primary" v-for="item in historyList" :key="item.index" round size="medium" color="#ededed" text-color="#333" >{{item}}</van-tag>
+            <van-tag type="primary" v-for="item in historyList" :key="item.index" round size="medium" color="#ededed" text-color="#333" @click="clickTag">{{item}}</van-tag>
           </div>
         </div>
   </div>
@@ -41,7 +41,7 @@ export default class AppRoundList extends Vue{
      * @type {boolean}
      * @memberof AppSearchHistory
      */ 
-    @Prop() public showfilter:boolean = false;
+    @Prop() public showfilter!:boolean;
 
     /**
      * 快速搜索值变化
@@ -52,6 +52,7 @@ export default class AppRoundList extends Vue{
      */
     public quickValueChange($event:any){
       this.$emit('quickValueChange',$event);
+      this.searchVal($event);
     }
 
     /**
@@ -153,7 +154,6 @@ export default class AppRoundList extends Vue{
         if ( (Array.isArray(this.historyLists.historyList)) && (this.historyLists.historyList.length <= 0) ) {
           this.hasHistory = false;
         } else {
-          console.log('333');
           this.hasHistory = true;
         }
       } 
@@ -176,6 +176,9 @@ export default class AppRoundList extends Vue{
     public searchVal($event:any){
       let val:any = $event.target.value;
       val = val.trim();
+      if (val === "") {
+        return;
+      }
       if (this.historyList.length > 0) {
         if (this.historyList.indexOf(val) !== -1) { 
           this.historyList.splice(this.historyList.indexOf(val), 1);
@@ -212,6 +215,18 @@ export default class AppRoundList extends Vue{
           return false;
       }
     }
+
+    /**
+     * 点击tag
+     *
+     * @memberof AppSearchHistory
+     */ 
+    public async clickTag($event:any){
+      let content:any = $event.target.textContent
+      let searchbar:any = this.$refs.searchbar;
+      searchbar.value = content;      
+      this.quickValueChange({detail:{value:content}});
+    }
 };
 </script>
 <style lang = "less">