修复dropdown组件某些情况可能会错位的问题

README.md

@@ -17,7 +17,9 @@
 
 uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
 
-## [点击加群交流反馈：1129077272](https://qm.qq.com/cgi-bin/qm/qr?k=1FfucLpozYbnb7FWo_KsqAdEi1mE3Qrf&jump_from=webapi)
+## [官方文档：https://www.uviewui.com](https://www.uviewui.com)
+
+### [点击加群交流反馈：1129077272](https://qm.qq.com/cgi-bin/qm/qr?k=1FfucLpozYbnb7FWo_KsqAdEi1mE3Qrf&jump_from=webapi)
 
 ## 特性
 
@@ -39,8 +41,6 @@ uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全
 
 ## 友情链接
 
-<br>
-
 #### **vue-admin-beautiful** —— [企业级、通用型中后台前端解决方案（基于vue/cli 4 最新版，同时支持电脑，手机，平板）](https://github.com/chuzhixin/vue-admin-beautiful)
 
 #### **vue-admin-beautiful** —— [在线演示](http://beautiful.panm.cn/vue-admin-beautiful/#/index)

pages/componentsB/waterfall/index.vue

@@ -3,13 +3,8 @@
 		<u-waterfall v-model="flowList" ref="uWaterfall">
 			<template v-slot:left="{ leftList }">
 				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
-					<!-- 警告：微信小程序不支持嵌入lazyload组件，请自行如下使用image标签 -->
-					<!-- #ifndef MP-WEIXIN -->
+					<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
 					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
-					<!-- #endif -->
-					<!-- #ifdef MP-WEIXIN -->
-					<view class="demo-img-wrap"><image class="demo-image" :src="item.image" mode="widthFix"></image></view>
-					<!-- #endif -->
 					<view class="demo-title">{{ item.title }}</view>
 					<view class="demo-price">{{ item.price }}元</view>
 					<view class="demo-tag">
@@ -17,7 +12,6 @@
 						<view class="demo-tag-text">放心购</view>
 					</view>
 					<view class="demo-shop">{{ item.shop }}</view>
-					<!-- 微信小程序无效，因为它不支持在template中引入组件 -->
 					<view class="u-close">
 						<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
 					</view>
@@ -25,12 +19,7 @@
 			</template>
 			<template v-slot:right="{ rightList }">
 				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
-					<!-- #ifndef MP-WEIXIN -->
 					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
-					<!-- #endif -->
-					<!-- #ifdef MP-WEIXIN -->
-					<view class="demo-img-wrap"><image class="demo-image" :src="item.image" mode="widthFix"></image></view>
-					<!-- #endif -->
 					<view class="demo-title">{{ item.title }}</view>
 					<view class="demo-price">{{ item.price }}元</view>
 					<view class="demo-tag">
@@ -38,7 +27,6 @@
 						<view class="demo-tag-text">放心购</view>
 					</view>
 					<view class="demo-shop">{{ item.shop }}</view>
-					<!-- 微信小程序无效，因为它不支持在template中引入组件 -->
 					<view class="u-close">
 						<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
 					</view>

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

@@ -74,7 +74,7 @@
 /**
  * card 卡片
  * @description 卡片组件一般用于多个列表条目，且风格统一的场景
- * @tutorial https://www.uviewui.com/components/line.html
+ * @tutorial https://www.uviewui.com/components/card.html
  * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
  * @property {String} title 头部左边的标题
  * @property {String} title-color 标题颜色（默认#303133）

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

@@ -21,6 +21,18 @@
 </template>
 
 <script>
+	/**
+	 * dropdown-item 下拉菜单
+	 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+	 * @tutorial http://uviewui.com/components/dropdown.html
+	 * @property {String | Number} v-model 双向绑定选项卡选择值
+	 * @property {String} title 菜单项标题
+	 * @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效
+	 * @property {Boolean} disabled 是否禁用此选项卡（默认false）
+	 * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+	 * @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
+	 * @example <u-dropdown-item title="标题"></u-dropdown-item>
+	 */
 	export default {
 		name: 'u-dropdown-item',
 		props: {

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

@@ -21,7 +21,8 @@
 		</view>
 		<view class="u-dropdown__content" :style="[contentStyle, {
 			transition: `opacity ${duration / 1000}s linear`,
-			top: $u.addUnit(height)
+			top: $u.addUnit(height),
+			height: contentHeight + 'px'
 		}]"
 		 @tap="maskClick" @touchmove.stop.prevent>
 			<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
@@ -33,6 +34,23 @@
 </template>
 
 <script>
+	/**
+	 * dropdown 下拉菜单
+	 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+	 * @tutorial http://uviewui.com/components/dropdown.html
+	 * @property {String} active-color 标题和选项卡选中的颜色（默认#2979ff）
+	 * @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266）
+	 * @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true）
+	 * @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true）
+	 * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+	 * @property {String | Number} height 标题菜单的高度，单位任意（默认80）
+	 * @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0）
+	 * @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false）
+	 * @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
+	 * @event {Function} open 下拉菜单被打开时触发
+	 * @event {Function} close 下拉菜单被关闭时触发
+	 * @example <u-dropdown></u-dropdown>
+	 */
 	export default {
 		name: 'u-dropdown',
 		props: {
@@ -75,6 +93,11 @@
 			titleSize: {
 				type: [Number, String],
 				default: 28
+			},
+			// 下拉出来的内容部分的圆角值
+			borderRadius: {
+				type: [Number, String],
+				default: 0
 			}
 		},
 		data() {
@@ -91,7 +114,8 @@
 					opacity: 0
 				},
 				// 让某个菜单保持高亮的状态
-				highlightIndex: 99999
+				highlightIndex: 99999,
+				contentHeight: 0
 			}
 		},
 		computed: {
@@ -101,6 +125,7 @@
 				// 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏
 				style.transform = `translateY(${this.active ? 0 : '-100%'})`
 				style['transition-duration'] = this.duration / 1000 + 's';
+				style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
 				return style;
 			}
 		},
@@ -108,6 +133,9 @@
 			// 引用所有子组件(u-dropdown-item)的this，不能在data中声明变量，否则在微信小程序会造成循环引用而报错
 			this.children = [];
 		},
+		mounted() {
+			this.getContentHeight();
+		},
 		methods: {
 			init() {
 				// 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
@@ -171,6 +199,20 @@
 			// 外部手动设置某个菜单高亮
 			highlight(index = undefined) {
 				this.highlightIndex = index !== undefined ? index : 99999;
+			},
+			// 获取下拉菜单内容的高度
+			getContentHeight() {
+				// 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度
+				// 才能让遮罩占满菜单一下，直到屏幕底部的高度
+				// this.$u.sys()为uView封装的获取设备信息的方法
+				let windowHeight = this.$u.sys().windowHeight;
+				this.$uGetRect('.u-dropdown__menu').then(res => {
+					// 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本)
+					// H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离
+					// 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成
+					// 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动
+					this.contentHeight = windowHeight - res.bottom;
+				})
 			}
 		}
 	}
@@ -182,6 +224,7 @@
 	.u-dropdown {
 		flex: 1;
 		width: 100%;
+		position: relative;
 
 		&__menu {
 			@include vue-flex;
@@ -221,6 +264,7 @@
 			bottom: 0;
 			overflow: hidden;
 			
+
 			&__mask {
 				position: absolute;
 				z-index: 9;
@@ -236,6 +280,7 @@
 				z-index: 10;
 				transition: all 0.3s;
 				transform: translate3D(0, -100%, 0);
+				overflow: hidden;
 			}
 		}
 

uview-ui/components/u-message-input/u-message-input.vue

@@ -100,7 +100,7 @@
 			// 激活样式
 			activeColor: {
 				type: String,
-				default: 'red'
+				default: '#2979ff'
 			},
 			// 未激活的样式
 			inactiveColor: {