uniapp微信小程序 模糊查询

刚入职场的的新人,公司也是一个小公司,我们部门一共就四个人前端俩后端俩我是其中一个前端,今天说要将全部页面的选择框都换成模糊搜索pc的挺好改的,一键替换完工开始摸鱼这时我还没发现不对,后来又告知小程序的要改小程序听到这个消息我整个人都萎了,真的是要一个一个改 ctrl+c,ctrl+v 压力山大 下面是我写的模糊查询 组件 写的不是很好，有更好的请留言

有没有大佬告知一下如何批量修改

<template>
	<view>
		<uni-forms-item :required='required' label-width="160rpx" :label="label">
			<uni-easyinput @blur='blurInput' @tap='tapInput' @input="input" :styles="{ fontSize:'28rpx' }" type="text"
				v-model="keyword" :placeholder="placeholder" :disabled='disabled' />
			<text class="message" v-show="!isValue">{{filteredList.length?'请选择数据':'没有此关键字'}}</text>
			<view class="ul-box">
				<ul :class="{ 'slide-down': isUl }">
					<li class="li" @click='onClick(item)' v-for="item in filteredList">
						{{ item }}
					</li>
					<li class="li" v-show="!filteredList.length">没有找到数据</li>
				</ul>
				<view class="to" v-show="isUl"></view>
			</view>
		</uni-forms-item>
	</view>
</template>

<script>
	export default {
		name: "SearchInput",
		props: {
			// 标题
			label: {},
			// input 的name属性 用于返回给子组件的键
			name: {
				type: String
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false,
			},
			// 选择/查询列表
			list: {
				type: Array,
			},
			// 提示信息
			placeholder: {
				type: String,
				default: '请选择'
			},
			// 显示红*
			required: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				// 当前的Value值
				keyword: null,
				// 是否显示选择区域
				isUl: false,
				// list里面是否有这条keyword值
				isValue: true,
			};
		},
		computed: {
			// 模糊搜索到的数据
			filteredList() {
				if (this.keyword) {
					return this.fuzzySearch(this.list, this.keyword)
				}
				return this.list;
			}
		},
		methods: {
			// 模糊搜索
			fuzzySearch(array, keyword, n = array.length) {
				return array.filter(item => item.includes(keyword)).slice(0, n);
			},
			// 输入时
			input(item) {
				this.isValue = this.list.indexOf(item) === -1 ? false : true
				this.isUl = true;
				if (this.isValue) this.$emit('getValue', {
					key: this.name,
					value: item
				});
			},
			// 点击时
			tapInput(e) {
				this.isUl = !this.isUl;
				// this.isUl = true;
			},
			// 失去焦点 
			blurInput(item) {
				this.isValue = this.list.indexOf(item.detail.value) === -1 ? false : true
				if (this.isValue) {
					this.isUl = false;
					this.$emit('getValue', {
						key: this.name,
						value: item
					});
				}
			},
			// 点击列表
			onClick(item) {
				this.isUl = false;
				this.keyword = item;
				this.isValue = true;
				this.$emit('getValue', {
					key: this.name,
					value: item
				});
			}
		}
	}
</script>
<style lang="scss">
	.ul-box {
		position: relative;
	}

	.message {
		color: red;
		padding-left: 20rpx;
		font-size: 24rpx;
	}

	.to {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		top: -22rpx;
		left: 25%;
		border-width: 12rpx;
		border-style: solid;
		border-color: transparent transparent #dedede transparent;
	}

	ul {
		box-sizing: border-box;
		overflow-y: auto;
		overflow: auto;
		transition: max-height 0.3s ease-in-out;
		// transition: margin-top 0.3s ease-in-out;
		max-height: 0;
		margin-top: 0;
	}

	.slide-down {
		margin-top: 20rpx;
		max-height: 200rpx;
		border: 2rpx solid #dedede;
		border-radius: 8rpx;
		box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
	}


	.li {
		padding: 10rpx 40rpx;
	}

	.li:hover {
		background-color: #ebebeb;
	}
</style>

年后有可能就看看换工作了,写完页面一直让改样式我又不是UI工程师，我想这这样写好看,最后老板拿出手机上的app来做对比（心里吐槽那能一样吗？写的是管理系统给我看淘宝、BOSS、铁路12306）想这找个管理系统的样式给他看吧！可是我都写很多了，再找模板之前写的就竹篮打水一场空,今天还是来了老板直接发给了我们组长几张小程序的图片,要按图片的写直接就重写了,过完这个年得赶紧跑路。