Informationen zur Suchauswahl im Dropdown-Feld des Uniapp-Applets

Beim Schreiben eines kleinen Programms in uniapp bin ich auf die Verwendung einiger Seitenkomponenten gestoßen, z. B. des Dropdown-Auswahlfelds und des Suchauswahlfelds.

1. Ziehen Sie nach unten, um die Komponente auszuwählen. Diese Komponente wurde so lange von einem Blogger extrahiert, dass ich die Quelle vergessen habe. Es war auch mein erstes Mal, dass ich ein kleines Programm mit uniapp geschrieben habe. Ich war mit diesem Dropdown-Feld eigentlich nicht zufrieden . Ich habe es selbst geändert, weil ich nicht genügend Daten hatte. Wenn das Dropdown-Feld nicht verschwindet, deaktiviere ich es und es werden dann weniger Referenzen angezeigt: noData ='no more'. Es liegt ein Problem mit dem Original vor Suche und ich werde es ändern. Wenn es einen besseren Weg gibt, damit umzugehen, sagen Sie es mir bitte.

<template>
	<view class="index">
		<view class="search" v-if="show">
			<scroll-view class="list" scroll-y v-if="list.length > 0" :lower-threshold="10" @scrolltolower="scrolltolower">
				<view
					v-for="item in list"
					:key="item[valueName]"
					class="item"
					:style="[setItemStyle]"
					hover-class="item-hover"
					hover-start-time="0"
					hover-stay-time="100"
					@click="click(item)"
				>
					{
   
   { item[labelName] }}
				</view>
			</scroll-view>
			<!-- <view class="empty" v-else>{
   
   { noData }}</view> -->
		</view>
	</view>
</template>

<script>
export default {
	props: {
		/** 展示整体组件 */
		show: {
			type: Boolean,
			default: false
		},
		/** 需要展示的列表 */
		list: {
			type: Array,
			default: () => []
		},
		/** 自定义label */
		labelName: {
			type: String,
			default: 'label'
		},
		/** 自定义value */
		valueName: {
			type: String,
			default: 'value'
		},
		/** 无内容时显示的内容  */
		noData: {
			type: String,
			default: '暂无匹配内容...'
		},
		/** item的对齐样式 */
		align: {
			type: String,
			default: 'left',
			validator: value => {
				return ['left', 'center', 'right'].includes(value);
			}
		},
		/** 自定义item展示样式 */
		customStyle: {
			type: Object,
			default: () => ({})
		}
	},
	computed: {
		/** 设置item的样式 */
		setItemStyle() {
			const { align, customStyle } = this;
			return {
				textAlign: align,
				...customStyle
			};
		}
	},
	methods: {
		/** item点击事件 */
		click(item) {
			this.$emit('select', { ...item });
		},
		/** 触底加载下一页 */
		scrolltolower() {
			this.$emit('scrolltolower');
		}
	}
};
</script>

<style lang="scss" scoped>
.index {
	width: 100%;
	position: absolute;
	z-index: 9;
}

.search {
	.list,
	.empty {
		padding: 10rpx;
		background-color: #fff;
		box-shadow: 0 0 10rpx #888;
		border-radius: 10rpx;
	}

	.list {
		box-sizing: border-box;
		max-height: 300rpx;
		overflow: hidden;

		.item {
			padding: 8rpx 0;
			font-size: 26rpx;
			margin: 5rpx 0;

			&-hover {
				background-color: #f5f5f5;
			}
		}
	}
	.empty {
		height: 80rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>

1.1 Seitenverweis

import FuzzyList  from "../../node_modules/components/qj-fuzzy-search/index.vue" 

1.2 Zitieren Sie den Code, label-name="mcName", ersetzen Sie mcName durch Ihren eigenen, value-name="mcId" ersetzen Sie mcId durch Ihren eigenen: list="company" Unternehmen sind die Hintergrunddaten

	<u-form-item label="收货单位" prop="msName" borderBottom>
						<!-- <view style="text-align: center;"></view> -->
						<view class="content">
							<u-input v-model="form.msTakeName" class="input" type="text" :value="value_sf" placeholder="请输入收货单位" @input="input_sf" />
							<fuzzy-list label-name="msName" value-name="msId" align="center" no-data="暂无匹配内容,请直接输入"
								:show="show_sf" :list="shoufa" :custom-style="{ fontSize: '30rpx' }"
								@scrolltolower="scrolltolower_sf" @select="select_sf"></fuzzy-list>
						</view>
					

					</u-form-item>

Ich habe in 1.3 auch die Methode geändert, sonst wäre die Suche nicht möglich.

//data中定义的变量
queryParams: {
					pageSize: 10,
					pageNum: 1
				},
				show_sf: false,
				value_sf: '',
//
scrolltolower_sf() {
				console.log("0000000000000000000000")
				this.queryParams.pageNum++;
				this.getList();

			},

			select_sf(event) {
			//这个地方两个变量设置为空你们不用管，我是为了实现没得数据的时候，写入的数据是新数据，后端需要录入，如果没这个要求可以吧，可以吧1中我禁掉的代码放开，在引用的组件中加入:noData ='没有了'，就可以了
				this.form.msTakeId = '';
				this.form.msTakeName = '';
				
				console.log("event", event)
				this.show_sf = false;
				
				this.value_sf = event.msName;
				//这里是数据放入提交的表单中去
				this.form.msTakeId = event.msId;
				this.form.msTakeName = event.msName;
				
			},
			getList() {

				//this.shoufaList = this.shoufa;
				/** 输入框内有值就进行搜索，没有值就关闭 */
				if (this.value_sf != '') {
				这个地方新的数组来接收 上面定义的没写，不去接收includes不生效我也不知道咋回事，
					this.shoufa = [];
					this.shoufa = this.shoufaList.filter(item => item.msName.includes(this.value_sf))
					if (!this.show_sf){
					this.show_sf = true;
					} 
					//console.log("this.", this.shoufa.filter(item => item.msName.includes(this.value_sf)))



				} else {
				//这地方是后端的数据我用两个数据去接收的，当选择后又不选择就去赋值；
					this.shoufa = this.shoufaList;
					this.show_sf = false;
				}
			},

2. Ein einfaches Dropdown-Auswahlfeld eignet sich für diejenigen mit einer kleinen Datenmenge. Ich konnte dies auch ändern, da das Original keine Daten auswählen konnte. Der neue LabelName und ValueName wurden hinzugefügt.

<template>
	<view class="easy-select" @click.stop="trigger" :style="[easySelectSize]">
		<input type="text" v-model="value" :placeholder="placeholder" disabled clearable>
		<view class="easy-select-suffix" :style="{border: '1px solid rgba（0,0,0,0)'}" :class="[showSuffix]">
			<view class="easy-select-down-tag">^</view>
		</view>
		<view class="easy-select-options" v-if="showOptions" :style="{'min-width': boundingClientRect.width + 'px', top: optionsGroupTop, margin: optionsGroupMargin}">
			<view class="easy-select-options-item" v-for="item in options" :key="item[valueName]" @click.stop="select(item)" :class="{active: currentSelect.label === item.label}">
				<text>{
   
   {item[labelName]}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * easy-select
	 * @author Snoop zhang
	 * @description Select Component
	 * */
	const COMPONENT_NAME = 'easy-select'
	const MAX_OPTIONS_HEIGHT = 137 // 修改务必也修改easy-select-options的css部分
	const OPTIONS_ITEM_HEIGHT = 33 // 修改务必也修改easy-select-options-item的css部分
	const OPTIONS_MARGIN = 10
	const OPTIONS_PADDING = 6 * 2 + 2 // + 2是border
	const OPTIONS_OTHER_HEIGHT = OPTIONS_MARGIN + OPTIONS_PADDING
	const STORAGE_KEY = '_easyWindowHeight'
	const SIZE = {
		'medium': {
			width: '240px',
			height: '40px'
		},
		'small': {
			width: '200px',
			height: '30px'
		},
		'mini': {
			width: '160px',
			height: '30px'
		}
	}
	
	export default {
		name: COMPONENT_NAME,
		props: {
			windowHeight: {
				type: [Number, String],
				default: 0
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			value: {
				type: String,
				default: 'lable'
			},
			/** 自定义label */
			labelName: {
				type: String,
				default: 'value'
			},
			/** 自定义value */
			valueName: {
				type: String,
				default: 'lable'
			},
			size: {
				type: String,
				default: 'medium'
			},
			options: {
				type: Array,
				default () {
					return [{
						value: '选项1',
						label: '黄金糕'
					}, {
						value: '选项2',
						label: '双皮奶'
					}, {
						value: '选项3',
						label: '蚵仔煎'
					}, {
						value: '选项4',
						label: '龙须面'
					}, {
						value: '选项5',
						label: '北京烤鸭'
					}]
				}
			}
		},
		data() {
			return {
				showOptions: false,
				boundingClientRect: {},
				currentSelect: {},
				optionsGroupTop: 'auto',
				optionsGroupMargin: ''
			}
		},
		computed: {
			showSuffix() {
				return this.showOptions ? 'showOptions' : 'no-showOptions'
			},
			easySelectSize() {
				let size = this.size.toLowerCase()
				if (size in SIZE) {
					return {
						width: SIZE[size].width,
						height: SIZE[size].height
					}
				} else {
					return {}
				}
			}
		},
		mounted() {
			const elQuery = uni.createSelectorQuery().in(this)
			elQuery.select('.easy-select').boundingClientRect(data => {
				this.boundingClientRect = data
			}).exec();
			try {
				if (!this.windowHeight) {
					const storageHeihgt = uni.getStorageSync(STORAGE_KEY)
					if (storageHeihgt) {
						this.easyWindowHeight = storageHeihgt
						return
					}
					const res = uni.getSystemInfoSync();
					this.easyWindowHeight = res.windowHeight
					uni.setStorageSync(STORAGE_KEY, this.easyWindowHeight)
				}
			} catch (e) {
			    // error
			}
		},
		methods: {
			trigger(e) {
				const view = uni.createSelectorQuery().in(this)
				view.select('.easy-select').fields({rect: true}, data => {
					let {	top, bottom } = data
					const thresholdHeight = Math.min(MAX_OPTIONS_HEIGHT + OPTIONS_MARGIN, (this.options.length * OPTIONS_ITEM_HEIGHT) +
						OPTIONS_OTHER_HEIGHT)
					bottom = Number(this.windowHeight || this.easyWindowHeight) - (top + this.boundingClientRect.height) // 距离底部的距离等于视口的高度减上top加select组件的高度

					// judge direction
					if (bottom < thresholdHeight) {
						this.optionsGroupDirection = 'up'
						this.optionsGroupTop = -thresholdHeight - 12 + 'px'
						this.optionsGroupMargin = '0'
					} else {
						this.optionsGroupDirection = 'down'
						this.optionsGroupTop = 'auto'
						this.optionsGroupMargin = '10px 0 0 0'
					}

					// if (this.scrollTop < )
					this.showOptions = !this.showOptions
				}).exec();
			},
			select(options) {
				this.showOptions = false
				this.currentSelect = options
				this.$emit('selectOne', options)
			},
			hideOptions() {
				this.showOptions = false
			}
		}
	}
</script>

<style scoped>
	.easy-select {
		position: relative;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		/* font-size: 28rpx; */
		color: #606266;
		outline: none;
		box-sizing: content-box;
		height: 30px;
	}

	.easy-select input {
		padding: 0 18rpx;
		padding-right: 60rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		height: 100% !important;
		min-height: 100% !important;
	}

	.easy-select .easy-select-suffix {
		position: absolute;
		box-sizing: border-box;
		height: 100%;
		right: 5px;
		top: 0;
		display: flex;
		align-items: center;
		transform: rotate(180deg);
		transition: all .3s;
		transform-origin: center;
	}

	.easy-select .showOptions {
		transform: rotate(0) !important;
	}

	.easy-select .no-showOptions {
		transform: rotate(180deg) !important;
	}

	.easy-select .easy-select-options {
		position: absolute;
		padding: 6px 0;
		margin-top: 10px;
		border: 1px solid #e4e7ed;
		border-radius: 4px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		box-sizing: border-box;
		transform-origin: center top;
		z-index: 2238;
		overflow: scroll;
		max-height: 274rpx;
	}

	.easy-select .easy-select-options-item {
		padding: 0 20rpx;
		position: relative;
		white-space: nowrap;
		font-size: 14px;
		color: #606266;
		height: 33px;
		line-height: 33px;
		box-sizing: border-box;
	}

	.easy-select .active {
		background-color: #F5F7FA
	}
</style>

2.1 Seitenverweis

import EasySelect from "../../node_modules/components/easy-select/easy-select.vue"
<u-form-item label="选择部门" prop="mbName" borderBottom>
						<view class="content" @click="useOutClickSideb">
							<easy-select ref="easySelectb" label-name="maName" value-name="maId" size="medium"
								:value="selecValueb" @selectOne="selectOneb" :options="department"></easy-select>
						</view>
					</u-form-item>



//方法
selectOneb(options) {
				console.log("options部门", options)
				
				this.form.maId = options.maId;
				this.selecValueb = options.maName;
			
				
			},
			useOutClickSideb() {
			
				this.$refs.easySelectb.hideOptions && this.$refs.easySelectb.hideOptions()
			},

Das ist alles für den Moment. Es gibt eine bessere Möglichkeit für den älteren Bruder, den jüngeren Bruder zu informieren.