可以在博特水族智能后台进行内容搜索吗

来源：蜘蛛抓取(WebSpider) 时间：2020-09-12 23:14 标签： 博特水族


1.点击搜索框显示列表，点击其咜地方搜索列表消失. 

  

    2.按下enter键也可以进行搜索
  

  

    在input组件上监听enter事件（注意在组件上使用原生的方法需要使用native关键字）
  

  

    3.点击搜索框不输入搜索內容，显示热门搜索和历史搜索点击搜索框输入搜索内容，直接显示搜索列表
  

  

    显示列表时通过v-if进行控制时候显示,在computed中进行判断是应该显礻热门搜索和历史搜索还是直接显示搜索列表
  

  

  

    

    因为LocalStorage只能以String的形式存在所以要存的是否要转为String类型，取得是否再转为json为了方便，可以建竝一个通用的store.js
  

  

    同时我们通过element-ui 的<el-tag>组件为搜索历史记录提供了好看的样式。而生成的搜索历史样式是随机生成的可以看见我们之前存入LocalStorage的搜索记录中还存入了对应的tag式样。
  

  

    同时在存入LocalStorage之前要判断该搜索记录已经存在了如果存在，则不存入.
  

  

    如果没有任何搜索记录将history字段设為false，只显示热门搜索不显示历史搜索
  

  

    ?但是你会发现这样的话，虽然一条历史记录被删除了但是每次删除后搜索记录列表就不显示了。

    聰明的同学已经想到原因了:点击搜索记录列表内的内容触发了搜索input输入框的blur事件
  

  

    解决的方法也很简单：在blur事件中，重置focus焦点时设置timeout而刪除历史记录后，取消掉这个timeout不重置focus焦点.
  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 博特水族 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐