移动端--搜索框

首先说说如何在用户点击 input 时弹出带有搜索按钮的键盘，其实很简单，加上 type=“search” 即可。

//搜索框

 

  
    取消


//搜索时显示的界面

    
历史搜索
    

      {{item}}
    

js部分：
getbuildData(){
        if(JSON.parse(sessionStorage.getItem('historyVolumn'))==null        ||JSON.parse(sessionStorage.getItem('historyVolumn'))==''||JSON.parse(sessionStorage.getItem('historyVolumn'))==undefined){
          this.historyVolumn=[]
        }else{
          this.historyVolumn=JSON.parse(sessionStorage.getItem('historyVolumn'))
        }
      	let param={
      		volumeID:this.volumeID,
          criteria:this.searchVolumn,
      	}
        requestRiskPointList(param).then(response=>{
         this.VolumnTopVO=response
        })
},
searchVolumnMethod(event,item){
   if(item==''||item==undefined||item==null){
     if(this.searchVolumn == ''||this.searchVolumn==null){
       MessageBox( '提示','搜索内容不能为空');
     }else{
       this.historyVolumn.push(this.searchVolumn)
       sessionStorage.setItem('historyVolumn', JSON.stringify(this.historyVolumn))
       this.getbuildData()
     }
   }else{
     this.searchVolumn=item
     this.getbuildData()
   }
   this.showQuxiao=false
   document.querySelector(".inputClass").style.width="100%"
   let input = document.querySelector(".inputClass")
   input.blur();
 },
displayQuxiao(){
 document.querySelector(".inputClass").style.width="calc(100% - 44px)"
  this.showQuxiao=true
},
cacelSearch(){
  document.querySelector(".inputClass").style.width="100%"
  this.showQuxiao=false
  this.searchVolumn=''
  this.getbuildData()
},

CSS部分：
.searchClass{
  height: 38px;
  margin:-5px -25px 0;
  background-color: #ffffff;
  padding:9px 16px;
  border-top: rgba(0,0,0,0.25) 1px solid;
}
.inputClass{
  width:100%;
  height: 36px;
  -webkit-border-radius: 10px;
  -moz-border-radius:10px;
  border-radius:10px;
  background-color:  rgba(142,142,147,0.12);
  outline-color: #ffffff;
  border:0px;
  text-indent: 10px;
  margin-left: 0px;
}
.inputClass:hover{
  outline-color: #ffffff;
}
 .buildDetail input[type=search]::-webkit-search-cancel-button{
  -webkit-appearance: none;/*此处只是去掉默认的小×*/
}
.imgVolumn{
  text-align: left;
  padding:20px;
  font-family:'PingFang-SC-Medium';
}
 .imgVolumn div{
   display:inline-block;
   text-align: left;
   margin: 10px 10px 0 0;
 }

手机端点击input输入框会变大：

在html中添加   user-scalable=no  即可。