vue 城市搜索组件

• Z时代
• 2024-01-10
• 分类：综合

vue城市搜索组件

1.实现大致是如下效果

2.搜索组件的页面结构

1. <template>

2.    <div>

3.     <div class="search">

4.        <input v-model='keyword' class="search-input" type="text" placeholder="输入城市名或者拼音"/>

5.     </div>

6.      <div class="search-content" v-show="keyword" ref="search">

7.         <ul>

8.            <li class="search-item border-bottom" v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>

9.            <li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>

10.         </ul>

11.     </div>

12.     </div>

13. </template>

3.Watch监听输入的关键词keyword, 当keyword变化的时候，遍历cities, 查找与keyword匹配的，把查找的结果都放到list数组中,再渲染到页面上

接收父组件的传值和定义变量

1. props:{

2.            cities: Object

3.        },

4.        data(){

5.            return{

6.                keyword:'',

7.                list:[],

8.                timer:null

9.            }

10.        }

监听keyword

1. watch :{

2.          keyword(){

3.             if(this.timer){

4.                 clearTimeout(this.timer)

5.             }

6.             if(!this.keyword){

7.                 this.list=[]

8.                 return

9.             }

10.             this.timer=setTimeout(() => {

11.                 const result=[]

12.                 for (let i in this.cities){

13.                     //console.log(i)

14.                    this.cities[i].forEach((value) => {

15.                        if(value.spell.indexOf(this.keyword)>-1||value.name.indexOf(this.keyword)>-1){

16.                            result.push(value)

17.                        }

18.                    });

19.                 }

20.                 //console.log(result)

21.                 this.list=result

22.             }, 100);

23.  

24.          }

25.        },

4.给查找到的search-content数据绑定better-scroll组件，使其数据量大的时候可以滑动

1. //在页面挂载完执行

2.         mounted(){

3.           this.scroll=new Bscroll(this.$refs.search)

4.         }

5.给查找到的search-content设置v-show="keyword"，使其没有搜索关键词输入的时候不显示search-content

6.当没有匹配的数据的时候，显示为"没有匹配的数据"，设置v-show="hasNoData"

1. computed:{

2.           hasNoData(){

3.               return !this.list.length

4.           }

5.       }

posted on 2018-06-27 03:53 gisery 阅读(...) 评论(...) 编辑 收藏

以上是 vue 城市搜索组件 的全部内容， 来源链接： utcz.com/z/375668.html