uniapp 検索付きドロップダウン ボックス、検索機能を追加するドロップダウン ボックスを選択、手書き簡易バージョン

素晴らしい製品が私を進歩させてくれます！！！！！

直接再利用できるものを探したいのですが、あまり役に立ちません。。。

uniappの簡易版で検索できるドロップダウンボックス(選択)を手書きしました。意見は人それぞれです。時間があるときに最適化します。今は1人で4つのプロジェクトを同時に進めています。 . 彼は本当に搾取されています。。。

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

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

 いくつかのスタイルを作成するだけで、アニメーションは記述しません。自分でやりたい場合は、自分で最適化するだけです。

.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 = ''
			},
}