uni-app单页开发@input 与@confirm 使用 仿淘宝搜索功能

仿淘宝搜索 这个东西对我来说是有点绕脑。这个我不知道怎么放动图，所以就只能看看静态图片

实现功能：
输入框输入值后回车在，并在本页显示搜索出来的商品内容页面。
当清空输入框时显示回搜索历史页面内容。效果看图：


浏览器返回的东西：


代码：

searchNow: function(name) {
    var that = this;
    console.log(name)
    
    //定义一个变量，回车后返回为true
    this.showshop = name._processed
    
    let endName = ""
    if(this.showshop==true){
     endName = name.detail.value
     console.log("回车搜索的name=" + endName)
    }else{
     endName = name
     console.log("直接点搜索的name=" + endName)
    }
    
    console.log("全局name=" + endName)
    }

打印效果图：

描述：因为这里我们有两种方法触发搜索，一个是回车键触发@confirm方法返回的值需要我们点啊点的获取到零食这个值，然而，直接点搜索直接返回的就是零食这个值，所以我用了个判断来区分他们获取的值，最后直接把endName传给后端就完事啦。

到了这里基本完成了，但是，有一个问题，就是当我们清空输入框后，但回车触发的@confirm的__processed值仍然为true，这时如果我们再输入值时，商品页面就会自动显示出来上次搜索的商品内容了。但这并不是我想要的。我想要的是，再次输入等回车后或者点击搜索后才会触发显示商品页面。往下看：

通过上面的@input监听输入框是否有值,我再定义了一个方法：

loseinput(){
    //console.log("loseinput=="+this.ipt)
    if(this.ipt == ''){
     this.showshop = false
     //console.log("loseinput=="+this.showshop)
    }
   }

判断假设双向绑定的ipt值为空的时候，把false值赋给showshop,即触发@confirm时获取的_processed值。
这时候就可以实现上面所说的功能了。

这个方法可能有点笨重，而且不是十分简洁，但差点把我这脑瓜子绕昏了，读者慢琢磨，这个自己我都觉得写的有点乱，能不能看懂就看你们的造化了，哈哈哈哈。。

。