vue2 uniapp加 Search 搜索 或Input 输入框 实现车辆软键盘 app

选择车辆组件实现

在现代的网络应用中，选择车辆是一个常见的功能需求。为了满足这个需求，我们可以利用Vue.js框架构建一个通用的选择车辆组件。本文将详细介绍这个组件的代码实现，涵盖了组件的属性、数据和方法，以及与其相关的功能

组件概述

选择车辆组件是一个基于Vue.js的可复用组件，它允许用户输入车牌号并从预定义的车辆列表中选择车辆。组件提供了自动联想和键盘控制功能，以便用户能够快速、方便地选择车辆。

组件代码

以下是该组件的代码实现，包括属性、数据和方法的定义：

<template>
	<view>
		<u-popup :show="show" :mode="mode" :round="20" :closeable="true" @close="close" customStyle="top: 100rpx;">
			<view class="carPopup">
				<view class="carPopup-top">
					<view class="carPopup-top-left">
						<!-- 弹窗标题 -->
						{{title}}
					</view>
				</view>
				<u-search :placeholder="placeholder" actionText="搜索" v-model="carNumber" @focus="Focus"
					:showAction="true" @custom="baseGetCarNumberByComBoBoxApi" :lists="platelist"></u-search>
				<scroll-view :scroll-y="true" style="height: 1100rpx;">
					<view class="carPopup-list">
						<!-- 车牌号 -->
						<text @click="checkboxChange(item,index)" class="carPopup-list-item"
							v-for="(item, index) in checkboxList1" :key="index"> <text v-html="item.name"></text></text>
					</view>
					<!-- 没有车辆显示 -->
					<div v-if="checkboxList1.length == 0" class="materialPopup-center">
						暂无数据
					</div>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 车辆软键盘 -->
		<u-keyboard v-if="show&&showCar" ref="uKeyboard" mode="car" @cancel="showCar = false" @confirm="inputBlurs"
			@change="changeCarNum" :show="showCar" @backspace="backspace">
		</u-keyboard>
	</view>
</template>

<style lang="scss" scoped>
	// 弹窗样式
	.carPopup {
		padding: 20px;
		// margin-top: 204rpx;
		width: 500rpx;
		min-height: 1900rpx;
		background-color: #fff;

		/deep/.u-search__action {
			color: #ffffff;
			width: 100rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #07c15f;
			font-size: 28rpx;
		}

		.carPopup-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #5e5e5e;
			margin-bottom: 20px;
		}

		.carPopup-top-left {
			font-weight: 550;
			font-size: 36rpx;
		}

		.carPopup-input {
			margin: 32rpx;

			.carPopup-input-bg {
				border-radius: 8rpx;
				height: 64rpx;
				background-color: #eeeeee;
				display: flex;
				align-items: center;
				padding: 0 10rpx;

				.carPopup-input {
					flex: 1;
				}
			}
		}

		.carPopup-line {
			height: 8rpx;
			background-color: #eeeeee;
		}

		.carPopup-list {
			margin-top: 20px;
			// padding: 0 48rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 4rpx solid #eeeeee;
			flex-wrap: wrap;

			.carPopup-list-item {
				height: 80rpx;
				line-height: 40rpx;
				text-align: center;
				width: 50%;
				color: #6e7073;
			}
		}

	}

	// 车辆列表
	.materialPopup-center {
		width: 100%;
		text-align: center;
		padding: 40rpx 0;
		color: #bababa;
	}
</style>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			mode: {
				type: String,
				default: 'right'
			},
			title: {
				type: String,
				default: '选择车辆'
			},
			placeholder: {
				type: String,
				default: '请输入车牌号'
			},
			lists: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				carNumber: "", // 车牌号输入框的值
				checkboxList1: [], // 车辆列表展示的数据
				showCar: false, // 控制键盘的显示和隐藏
				list: [], // 车辆列表的原始数据
			};
		},
		watch: {
			show(val) {
				// 监听show属性的变化 弹窗打开后
				if (val) {
					this.baseGetCarNumberByComBoBoxApi();
					// 当show为true时，调用baseGetCarNumberByComBoBoxApi方法获取车辆列表数据
				} else { //弹窗关闭
					this.empty();
					// 当show为false时，调用empty方法清空数据
				}
			},
		},
		methods: {
			close() {
				// 关闭组件
				this.$emit('update:show', {
					show: false,
					falg: 1
				});
			},
			changeCarNum(e) {
				// 输入框输入变化
				this.carNumber += e;
			},
			Focus() {
				// 输入框获得焦点
				uni.hideKeyboard();
				this.showCar = true;
				// 隐藏原生键盘，显示自定义键盘
			},

			inputBlurs() {
				// 确定按钮
				this.showCar = false;
				// 隐藏自定义键盘
			},
			backspace() {
				// 键盘退格
				this.carNumber = this.carNumber.slice(0, -1);
				// 删除输入框的最后一个字符
			},
			async baseGetCarNumberByComBoBoxApi() {
				// 获取车辆列表数据
				this.list = this.lists.map(em => ({
					name: em
				}));
				// 将传入的车辆列表数据进行格式转换
				if (this.carNumber === '') {
					this.checkboxList1 = this.list;
				} else {
					this.checkboxList1 = this.list.filter(item => item.name.includes(this.carNumber));
					// 根据输入的车牌号筛选出符合条件的车辆列表数据
					this.checkboxList1 = this.checkboxList1.map(item => {
						const name = item.name.replace(
							new RegExp(this.carNumber, 'gi'),
							match => `<span style="color: red">${match}</span>`
						);
						// 将匹配到的车牌号部分标红显示
						return {
							...item,
							name
						};
					});
				}
			},
			empty() {
				// 清空数据
				this.checkboxList1 = [];
				// 清空车辆列表
				this.carNumber = '';
				// 清空车牌号
				this.showCar = false;
				// 关闭自定义键盘
			},
			checkboxChange(n, i) {
				// 确认选择车牌号
				if (n.name) {
					this.carNumber = this.list[i].name;
					this.$emit('update:show', {
						show: false,
						falg: 3,
						carNumber: this.carNumber
					});
					// 将选择的车牌号传递给父组件
				}
			},
		},
	};
</script>

父组件使用

	<vehicle :show="plate" :lists="platelist" @update:show="handleplate"  />

效果