<input class="inputclass font28"
v-model="inputvalue" @input="input"
placeholder="搜索" placeholder-class="color999 "
confirm-type="search" @confirm="doSearch"/>
data定义
//搜索框
inputvalue:'',
methods方法
//当键盘输入时,触发input事件,
input(){
//搜索框不为空
if(this.inputvalue!=''){
//显示搜索界面
this.status=2
}else{
//显示当前界面
this.status=1
}
},
//键盘点击回车
doSearch(){
//显示搜索结果
this.status=3
},
实现效果--车辆信息点击搜索框实现,当输入值!==‘’--------实现搜索界面,点击键盘回车------------实现车辆信息界面
文章来源:https://www.toymoban.com/news/detail-514278.html
全部代码文章来源地址https://www.toymoban.com/news/detail-514278.html
<template>
<view class="paddingbox">
<!--搜索-->
<view class="searchbox lightgreyBack flexbox alignitem">
<view class="iconfont icon-sousuo color666"></view>
<view class="ml16 font28">
<input class="inputclass font28"
v-model="inputvalue" @input="input"
placeholder="搜索" placeholder-class="color999 "
confirm-type="search" @confirm="doSearch"/>
</view>
</view>
<!--搜索-->
<view class="mt48 containitem " v-if="status==1">
<view class="fwbold font32">我的搜索</view>
<view class="mt20 containitem1 lightgreyBack">
<view class="searchbox1 " v-for="(item,index) in list" :key="index">
<view class="searchbox1item flexbox alignitem" @click="todetail">
<view class="searchbox1itemleft">
<image :src="item.src" mode="aspectFit"></image>
<!-- <image src="" mode="aspectFit"></image> -->
</view>
<view class="searchbox1itemright" :class="list.length-1==index ?'':'lightgreyborder'">
<view class="flexbox alignitem">
<view class="colorfff btn bg999 font24" v-if="item.status==1">
离线
</view>
<view class="colorfff btn bgred font24" v-if="item.status==2">
停止
</view>
<view class="colorfff btn sysBack font24" v-if="item.status==3">
行驶
</view>
<view class="fwbold font28 ">{{item.number}}</view>
</view>
<view class="font24 color999 mt12">{{item.type}}</view>
<view class="font24 color999 mt4">里程:{{item.mileage}}</view>
</view>
</view>
</view>
</view>
</view>
<!--车辆列表-->
<view class="mt52 containitem " v-if="status==1">
<view class="fwbold font32">车辆列表</view>
<view class="mt20 containitem1 lightgreyBack">
<view class="searchbox1 " v-for="(item,index) in list2" :key="index">
<view class="searchbox1item flexbox alignitem" @click="todetail">
<view class="searchbox1itemleft">
<image :src="item.src" mode="aspectFit"></image>
</view>
<view class="searchbox1itemright" :class="list2.length-1==index ?'':'lightgreyborder'">
<view class="flexbox alignitem">
<view class="colorfff btn bg999 font24" v-if="item.status==1">
离线
</view>
<view class="colorfff btn bgred font24" v-if="item.status==2">
停止
</view>
<view class="colorfff btn sysBack font24" v-if="item.status==3">
行驶
</view>
<view class="fwbold font28 ">{{item.number}}</view>
</view>
<view class="font24 color999 mt12">{{item.type}}</view>
<view class="font24 color999 mt4">里程:{{item.mileage}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="mt52 containitem " v-if="status==3">
<view class="fwbold font32">查询结果</view>
<view class="mt20 containitem1 lightgreyBack">
<view class="searchbox1 " v-for="(item,index) in list3" :key="index">
<view class="searchbox1item flexbox alignitem" @click="todetail">
<view class="searchbox1itemleft">
<image :src="item.src" mode="aspectFit"></image>
</view>
<view class="searchbox1itemright" :class="list3.length-1==index ?'':'lightgreyborder'">
<view class="flexbox alignitem">
<view class="colorfff btn bg999 font24" v-if="item.status==1">
离线
</view>
<view class="colorfff btn bgred font24" v-if="item.status==2">
停止
</view>
<view class="colorfff btn sysBack font24" v-if="item.status==3">
行驶
</view>
<view class="fwbold font28 ">{{item.number}}</view>
</view>
<view class="font24 color999 mt12">{{item.type}}</view>
<view class="font24 color999 mt4">里程:{{item.mileage}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//status=2点击搜索,status=3
status:1,
//搜索框
inputvalue:'',
//我的搜索
list:[
{
src:'../../static/image/Schedule.png',
//状态1离线,2停止,3行驶
status:1,
//车牌号
number:'鲁U67890',
type:'类型:清运/可回收垃圾/4吨压缩车',
mileage:'12345km'
},
{
src:'../../static/image/Schedule.png',
//状态
status:2,
//车牌号
number:'鲁U67890',
type:'类型:清运/可回收垃圾/4吨压缩车',
mileage:'12345km'
}
],
//车辆列表
list2:[
{
src:'../../static/image/Schedule.png',
//状态1离线,2停止,3行驶
status:1,
//车牌号
number:'鲁U67890',
type:'类型:清运/可回收垃圾/4吨压缩车',
mileage:'12345km'
},
{
src:'../../static/image/Schedule.png',
//状态
status:2,
//车牌号
number:'鲁U67890',
type:'类型:清运/可回收垃圾/4吨压缩车',
mileage:'12345km'
},
{
src:'../../static/image/Schedule.png',
//状态
status:3,
//车牌号
number:'鲁U67890',
type:'类型:清运/可回收垃圾/4吨压缩车',
mileage:'12345km'
},
{
src:'../../static/image/Schedule.png',
//状态
status:1,
//车牌号
number:'鲁U67890',
type:'类型:清运/可回收垃圾/4吨压缩车',
mileage:'12345km'
},
],
//车辆列表
list3:[
{
src:'../../static/image/Schedule.png',
//状态1离线,2停止,3行驶
status:1,
//车牌号
number:'鲁U67890',
type:'类型:清运/可回收垃圾/4吨压缩车',
mileage:'12345km'
},
]
};
},
methods:{
//当键盘输入时,触发input事件,
input(){
//搜索框不为空
if(this.inputvalue!=''){
//显示搜索界面
this.status=2
}else{
//显示当前界面
this.status=1
}
},
//键盘点击回车
doSearch(){
//显示搜索结果
this.status=3
},
todetail(){
uni.navigateTo({
url:'/pages/vehicles/detail'
})
}
}
}
</script>
<style lang="scss">
.bg999{
background-color: #999999;
}
.containitem1{
border-radius: 16upx;
padding:0upx 32upx;
}
.bgred{
background-color: #EE0101;
}
.colorfff{
color: #FFFFFF;
}
.alignitem{
align-items: center;
}
.paddingbox{
padding: 16upx 32upx;
}
.searchbox{
padding: 20upx 32upx;
border-radius: 8upx;
.inputclass{
width: 600upx;
}
}
.mt48{
margin-top: 48upx;
}
.mt20{
margin-top: 20upx;
}
.containitem{
border-radius: 16upx;
.searchbox1{
padding:0upx 0upx;
.searchbox1item{
.searchbox1itemleft{
// background-color: red;
border-radius: 24upx;
padding: 25upx 0upx;
width: 160upx;
height: 120upx;
image{
border-radius: 24upx;
width: 160upx;
height: 120upx;
}
}
.searchbox1itemright{
padding: 25upx 0upx;
margin-left: 24upx;
.mt4{
margin-top: 4upx;
}
.btn{
padding: 6upx 8upx;
border-radius: 4upx;
margin-right: 16upx;
}
}
}
}
}
.mt52{
margin-top: 52upx;
}
</style>
到了这里,关于uniapp中的input,输入input回车事件和输入input事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!