Эх сурвалжийг харах

feat: 移动端搜索逻辑优化

cuiyalong 4 жил өмнө
parent
commit
b89e3028c4

+ 6 - 2
jydocs-mobile/src/components/Search.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="search-container van-fade-an">
       <div class="click-pop" v-if="type === 'click'"  @click="onClick"></div>
-      <van-search @input="$emit('input', $event)" @search="onSearch" class="my-search" left-icon="diy-search" v-model.trim="input" placeholder="搜索文档" />
+      <van-search @input="$emit('input', $event)" @search="onSearch" class="my-search" left-icon="diy-search" v-model="input" placeholder="搜索文档" />
   </div>
 </template>
 
@@ -23,13 +23,17 @@ export default class Empty extends Vue {
     input = ''
 
     created () {
-      this.input = this.defalultValue || ''
+      this.setSearchContent(this.defalultValue || '')
     }
 
     onSearch () {
       this.$emit('submit', this.input)
     }
 
+    setSearchContent (v) {
+      this.input = v
+    }
+
     onClick () {
       if (this.type === 'click') {
         this.$emit('click')

+ 6 - 2
jydocs-mobile/src/views/Search.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="pages--search">
     <div class="j-header">
-      <search id="mySearch" key="search-page" :defalultValue="listState.value" @input="onInput" @submit="doSearch"></search>
+      <search id="mySearch" ref="input" key="search-page" :defalultValue="listState.value" @input="onInput" @submit="doSearch"></search>
       <van-tabs v-model="docsTypeConf.active"
         v-if="docsTypeConf.list.length"
         title-active-color="#2ABED1"
@@ -184,7 +184,7 @@ export default class extends Vue {
   }
 
   onInput (search: string) {
-    this.listState.value = search
+    this.listState.value = search.trim().replace(/\s+/g, ' ')
   }
 
   docTypeChange () {
@@ -214,6 +214,10 @@ export default class extends Vue {
 
   doSearch () {
     if (!this.listState.value) return
+
+    const inputComponent = this.$refs.input as any
+    inputComponent.setSearchContent(this.listState.value)
+
     this.resetListState()
     this.setScrollTop()
     this.listState.finished = false