uview u-dropdown踩过的坑

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天,查看详情

首先: 先看官方的原型

设计图所需要的样子

图一：

图二：

1. 修改右边的图标 在node_modules > uview-ui > u-dropdown-item > u-dropdown-item.vue

2. 图一 html代码

<view class="headBox">
			<u-dropdown :title-size="32" ref="uDropdown" @open="open" @close="close">
				<u-dropdown-item v-model="storePointId" :title="label1" :options="locationList"
					@change="locationChange">
				</u-dropdown-item>
				<u-dropdown-item v-model="storeHouseId" :disabled="label1 == '库点' || houseList.length == 0 "
					:title="label2" :options="houseList" @change="houseChange">
				</u-dropdown-item>
				<u-dropdown-item :title="label3"></u-dropdown-item>
			</u-dropdown>
		</view>

2. js代码 组件

                       open(index) {
				this.$refs.uDropdown.highlight();
				if (index == 2) {
					this.label1 = '库点'
					this.label2 = '仓库'
					this.storePointId = ''
					this.storeHouseId = ''
					this.$emit("allChange")
					this.$refs.uDropdown.close();
				}
			},
			close(index) {
				this.$refs.uDropdown.highlight(index);
			},
                        locationChange(value) {
				console.log('value', value)
				this.locationList.forEach(val => {
					if (val.value == value) {
						this.label1 = val.label
						this.label2 = '仓库'
						this.storePointId = value
						this.storeHouseId = ''
						this.$emit("againLocationChange", this.storePointId)
					}
				})
			},
			houseChange(value) {
				this.houseList.forEach(val => {
					if (val.value == value) {
						this.label2 = val.label
						this.storeHouseId = value
						this.$emit("againHouseChange", this.storeHouseId)
					}
				})
			},

3. css代码（最重要的代码）

       .headBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 2;
		background-color: #f7f7f7;
		position: relative;
	}

	.u-dropdown.data-v-01c0c507 {
		position: static !important;
	}

	.u-search.data-v-1a326067 {
		width: 480rpx !important;
	}

	.dropdownBox {
		width: 100%;
		background-color: #fff;
	}

	.u-dropdown__content.data-v-01c0c507 {
		position: absolute !important;
		width: 100% !important;
		left: 0rpx !important;
		right: 0rpx !important;
	}

图二是自定义功能 html代码

<u-dropdown ref="uDropdown" :title-size="32">
				<u-dropdown-item v-model="sourceType" :title="label" :options="typeList">
					<view class="slot-content">
						<view class="popFlexBox">
							<scroll-view scroll-y="true" class="leftData">
								<view class="data" :class="leftId == index?'otherColor':''" v-for="(item,index) in typeList"
									:key="index" @click="getLeftId(index)">
									{{item.typeName}}
								</view>
							</scroll-view>
							<scroll-view scroll-y="true" class="rigthTime">
								<view class="data garyColor" :class="childItem.typeCode == sourceType? 'otherColor':''"
									@click="timeCon(childItem.typeName,childItem.typeCode)"
									v-for="(childItem, childIndex) in typeList[leftId].billTypeList" :key="childItem">
									{{childItem.typeName}}
								</view>
							</scroll-view>
						</view>
						<!-- <u-button type="primary" @click="closeDropdown">确定</u-button> -->
					</view>
				</u-dropdown-item>
			</u-dropdown>

在开发图二的时候遇到的问题：

加上以下这句话就好了

.u-dropdown.data-v-01c0c507 {
		position: static !important;
	}