优化 弹出层在超出视窗边缘定位不准确的问题

Author: Fasttian

pages/nvue/datetime-picker/datetime-picker.nvue

@@ -2,7 +2,7 @@
 	<view class="page">
 		<text class="example-info">可以同时选择日期和时间的选择器</text>
 		<uni-section :title="'日期用法：' + single" type="line"></uni-section>
-		<view class="example-body" style="margin-left: 500px;">
+		<view class="example-body">
 			<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" @maskClick="maskClick" />
 		</view>
 		<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
@@ -35,7 +35,7 @@
 				rangeSeparator="至" />
 		</view>
 		<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
-		<view class="example-body" style="margin-left: 500px;">
+		<view class="example-body">
 			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
 		</view>
 	</view>

pages/vue/datetime-picker/datetime-picker.vue

@@ -2,7 +2,7 @@
 	<view class="page">
 		<text class="example-info">可以同时选择日期和时间的选择器</text>
 		<uni-section :title="'日期用法：' + single" type="line"></uni-section>
-		<view class="example-body" style="margin-left: 500px;">
+		<view class="example-body">
 			<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" @maskClick="maskClick" />
 		</view>
 		<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
@@ -35,7 +35,7 @@
 				rangeSeparator="至" />
 		</view>
 		<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
-		<view class="example-body" style="margin-left: 500px;">
+		<view class="example-body">
 			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
 		</view>
 	</view>

uni_modules/uni-datetime-picker/changelog.md

@@ -1,3 +1,5 @@
+## 2.0.11（2021-07-08）
+- 优化 弹出层在超出视窗边缘定位不准确的问题
 ## 2.0.10（2021-07-08）
 - 修复 范围起始点样式的背景色与今日样式的字体前景色融合，导致日期字体看不清的 bug
 - 优化 弹出层在超出视窗边缘被遮盖的问题

uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue

@@ -377,7 +377,7 @@
 				const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor")
 				dateEditor.boundingClientRect(rect => {
 					if (systemInfo.windowWidth - rect.left < this.datePopupWidth) {
-						this.popover.left = `${systemInfo.windowWidth - rect.left - this.datePopupWidth - 20}px`
+						this.popover.right = 0
 					}
 				}).exec()
 				setTimeout(() => {
@@ -694,9 +694,7 @@
 		/* padding: 0 8px; */
 		position: absolute;
 		top: 0;
-		left: 0;
 		z-index: 999;
-		/* width: 375px; */
 		border: 1px solid #e4e7ed;
 		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
 		border-radius: 4px;
@@ -706,10 +704,8 @@
 		padding: 0 8px;
 		background-color: #fff;
 		position: absolute;
-		top: 110;
-		left: 110;
+		top: 0;
 		z-index: 999;
-		/* width: 733px; */
 		border: 1px solid #e4e7ed;
 		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
 		border-radius: 4px;

uni_modules/uni-datetime-picker/package.json

@@ -1,7 +1,7 @@
 {
   "id": "uni-datetime-picker",
   "displayName": "uni-datetime-picker 日期选择器",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择",
   "keywords": [
     "uni-datetime-picker",