1. Toy模板网首页
  2. > Toy博客

uniapp中的input，输入input回车事件和输入input事件

9月前 作者：被窝是圆的 分类：Toy博客 阅读(39) 违法举报

这篇具有很好参考价值的文章主要介绍了uniapp中的input，输入input回车事件和输入input事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<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
			},

实现效果--车辆信息点击搜索框实现，当输入值！==‘’--------实现搜索界面，点击键盘回车------------实现车辆信息界面

uniapp中的input，输入input回车事件和输入input事件

全部代码文章来源地址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模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包