feat: dropdown component style

components/NormalTabs/NormalTabs.vue

@@ -34,9 +34,20 @@
 			</view>
 		</template>
 		
-		<u-dropdown v-if="elementInfo.option.tabs.type === 'dropdown'" :title-size="getFontSize()" 
-			:active-color="elementInfo.option.tabs.activeColor" :inactive-color="elementInfo.option.tabs.color">
-			<u-dropdown-item v-model="tabsValue" :title="getSelectLabel(tabsValue)" :options="tabsMenu"></u-dropdown-item>
+		<u-dropdown v-if="elementInfo.option.tabs.type === 'dropdown'" :title-size="getFontSize()" ref="uDropdown"
+		 :active-color="elementInfo.option.tabs.color" :inactive-color="elementInfo.option.tabs.color">
+			<u-dropdown-item v-model="tabsValue" :title="getSelectLabel(tabsValue)">
+				<view class="slot-content" :style="{'background-color': elementInfo.option.tabs.itemBackgroundColor}" v-for="(item, index) in elementData.dataList.series" :key="index">
+					<view class="drop-item" @click="handleDropdownValue(item)"
+						:style="{
+							'color':tabsValue === item.value ? elementInfo.option.tabs.activeColor : elementInfo.option.tabs.color, 
+							'background-color':tabsValue === item.value ? elementInfo.option.tabs.backgroundColor : elementInfo.option.tabs.itemBackgroundColor, 
+							'font-size':`${elementInfo.option.tabs.fontSize}px`,
+						}">
+						{{item.name}}
+					</view>
+				</view>
+			</u-dropdown-item>
 		</u-dropdown>
 	</view>
 </template>
@@ -181,6 +192,12 @@
 				this.tabsValueChange()
 			},
 			
+			handleDropdownValue(item) {
+				this.tabsValue = item.value
+				this.tabsValueChange()
+				this.$refs['uDropdown'].close()
+			},
+			
 			/** 清除值 */
 			handleClearValue() {
 				this.tabsValue = ''
@@ -294,17 +311,13 @@
 		align-items: center;
 		justify-content: center;
 	}
-	// 需要根据配置下拉的字体大小，字体颜色和高亮颜色，不要右边的icon
-	::v-deep {
-		.u-dropdown__menu__item  {
-			background-color: #fff !important;
-		}
-		.u-cell-item-box {
-			background-color: aquamarine !important;
-		}
-		.u-cell_title {
-			font-size: var(--font-size) !important;
-		}
-	}
 
+	.drop-item {
+		padding: 5px 8px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		text-align: center;
+		cursor: pointer;
+	}
 </style>

uview-ui/components/u-dropdown/u-dropdown.vue

 <template>
-	<view class="u-dropdown">
+	<view class="u-dropdown" :style="dropDownShow ? '' :'overflow:hidden'">
 		<view class="u-dropdown__menu" :style="{
 			height: $u.addUnit(height)
 		}" :class="{
@@ -28,7 +28,7 @@
 			<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
 				<slot></slot>
 			</view>
-			<view class="u-dropdown__content__mask"></view>
+			<view class="u-dropdown__content__mask" :style="dropDownShow ? 'width: 100%' :'width:0'"></view>
 		</view>
 	</view>
 </template>
@@ -125,7 +125,8 @@
 				},
 				// 让某个菜单保持高亮的状态
 				highlightIndex: 99999,
-				contentHeight: 0
+				contentHeight: 0,
+				dropDownShow:false
 			}
 		},
 		computed: {
@@ -172,6 +173,7 @@
 			},
 			// 打开下拉菜单
 			open(index) {
+				this.dropDownShow = true
 				// 重置高亮索引，否则会造成多个菜单同时高亮
 				// this.highlightIndex = 9999;
 				// 展开时，设置下拉内容的样式
@@ -190,6 +192,7 @@
 			},
 			// 设置下拉菜单处于收起状态
 			close() {
+				this.dropDownShow = false
 				this.$emit('close', this.current);
 				// 设置为收起状态，同时current归位，设置为空字符串
 				this.active = false;
@@ -221,7 +224,7 @@
 					// H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离
 					// 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成
 					// 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动
-					this.contentHeight = windowHeight - res.bottom;
+					this.contentHeight = Math.abs(windowHeight - res.bottom);
 				})
 			}
 		}
@@ -276,10 +279,10 @@
 			
 
 			&__mask {
-				position: absolute;
+				position: fixed;
 				z-index: 9;
 				background: rgba(0, 0, 0, .3);
-				width: 100%;
+				// width: 100%;
 				left: 0;
 				top: 0;
 				bottom: 0;