Cuadro desplegable uniapp con búsqueda, seleccione el cuadro desplegable para agregar la función de búsqueda, versión simple de escritura a mano

¡Malditos productos me hacen progresar! ! ! ! !

Quiero buscar uno que se pueda reutilizar directamente, pero no es muy útil. . .

Escribí a mano un cuadro desplegable (seleccionar) que se puede buscar en una versión simplificada de uniapp. Todos tienen una opinión diferente. Lo optimizaré cuando tenga tiempo. Ahora una persona está trabajando en cuatro proyectos al mismo tiempo. Realmente está siendo explotado. . .

         <!-- 手写一个能搜索的下拉框 -->
         <!-- 写出来基础框架，使用定位定位在了底部 -->

        <view class="showBoxInput" v-if="flagShow">
			<view class="showBoxInput-chi-sele" @click="flagShow = false;searchVillageVal = '';villageArray = villageArrayBackup">取消</view>
			<input :disabled="disableData" v-model="searchVillageVal" placeholder="请输入小区搜索" class="showBoxInput-chi" />
			<view class="showBoxInput-chi-sele" @click="searchVillage">搜索</view>
		</view>
		<view class="showBox" v-if="flagShow">
			<view class="showBoxItem" v-for="item in villageArray" @click="getItemData(item)">
				{
   
   {item.value}}
			</view>
		</view>

 Simplemente cree algunos estilos y no escriba ninguna animación. Si desea hacerlo usted mismo, optimícelo usted mismo.

.showBox{
		position: absolute;
		bottom: 0px;
		width: 100%;
		height: 300px;
		padding-bottom: 40px;
		transition: all .3s;
		overflow: auto;
		background-color: #f1f2f3;
	}
	.showBoxItem{
		text-align: center;
		line-height: 40px;
		background-color: #f1f2f3;
		transition: all .3s;
	}
	.showBoxItem:hover{
		background-color: #f1f2f3;
	}
	.showBoxInput{
		width: 100%;
		position: absolute;
		bottom: 340px;
		border-radius: 10px;
		display: flex;
		background-color: #f1f2f3;
	}
	.showBoxInput-chi{
		padding-left: 20px;
		width: 70%;
		height: 40px;
		border-radius: 20px;
		background-color: #ffffff;
	}
	.showBoxInput-chi-sele{
		text-align: center;
		height: 40px;
		line-height: 40px;
		width: 15%;
		background-color: #f1f2f3;
	}

data() {
			return {
				// 备份一个小区，搜索清空的时候搜索还原
				villageArrayBackup:[],
                // 用来循环显示的小区
                villageArray: [],
                // 控制显示不显示的标识
				flagShow:false,
        }
}
methods:{
			getItemData(val){
				// 选择了小区以后让循环的数组再变成全量数组并给输入框置空
				this.detail.village = val.id
                // 这个是改变输入框地方的文本颜色
				this.villageColor = "#000000"
                // 关闭输入框
				this.flagShow = false
                // 重新让循环的数组变成全量数组
				this.villageArray = this.villageArrayBackup
                // 置空搜索位置的内容
				this.searchVillageVal = ''
			},
}