升级uni-ui到最新版本1.4.23

2025-09-28 07:02:40 +00:00 · 2022-12-28 10:03:07 +08:00
parent 9bca5bebd5
commit 55fb5c5f61
52 changed files with 2907 additions and 2542 deletions
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
@@ -61,7 +61,9 @@
 	}
 </script>

-<style lang="scss" >
+<style lang="scss" >
+	$uni-primary: #007aff !default;
+
 	.uni-calendar-item__weeks-box {
 		flex: 1;
 		/* #ifndef APP-NVUE */
@@ -78,7 +80,7 @@
 		font-size: 14px;
 		// font-family: Lato-Bold, Lato;
 		font-weight: bold;
-		color: #455997;
+		color: darken($color: $uni-primary, $amount: 40%);
 	}

 	.uni-calendar-item__weeks-lunar-text {
@@ -138,7 +140,7 @@
 	}

 	.uni-calendar-item__weeks-box .uni-calendar-item--checked {
-		background-color: #007aff;
+		background-color: $uni-primary;
 		border-radius: 50%;
 		box-sizing: border-box;
 		border: 3px solid #fff;
@@ -159,7 +161,7 @@

 	.uni-calendar-item--multiple .uni-calendar-item--before-checked,
 	.uni-calendar-item--multiple .uni-calendar-item--after-checked {
-		background-color: #409eff;
+		background-color: $uni-primary;
 		border-radius: 50%;
 		box-sizing: border-box;
 		border: 3px solid #F6F7FC;
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
@@ -1,7 +1,7 @@
 <template>
 	<view class="uni-calendar" @mouseleave="leaveCale">
 		<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
-			@click="clean"></view>
+			@click="clean();maskClick()"></view>
 		<view v-if="insert || show" class="uni-calendar__content"
 			:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
 			<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
@@ -73,8 +73,10 @@
 					<time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false"
 						:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
 					</time-picker>
+				</view>
+				<view style="line-height: 50px;">
+					<uni-icons type="arrowthinright" color="#999"></uni-icons>
 				</view>
-				<uni-icons type="arrowthinright" color="#999" style="line-height: 50px;"></uni-icons>
 				<view class="uni-date-changed--time-end">
 					<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
 					<time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false"
@@ -331,12 +333,12 @@
 			},
 			okText() {
 				return t("uni-datetime-picker.ok")
-			},
-			yearText() {
-				return t("uni-datetime-picker.year")
-			},
-			monthText() {
-				return t("uni-datetime-picker.month")
+			},
+			yearText() {
+				return t("uni-datetime-picker.year")
+			},
+			monthText() {
+				return t("uni-datetime-picker.month")
 			},
 			MONText() {
 				return t("uni-calender.MON")
@@ -411,6 +413,11 @@
 				this.close()
 			},

+			// 蒙版点击事件
+			maskClick() {
+				this.$emit('maskClose')
+			},
+
 			clearCalender() {
 				if (this.range) {
 					this.timeRange.startTime = ''
@@ -538,16 +545,24 @@
 			 * 选择天触发
 			 * @param {Object} weeks
 			 */
-			choiceDate(weeks) {
+			choiceDate(weeks) {
 				if (weeks.disable) return
 				this.calendar = weeks
 				this.calendar.userChecked = true
 				// 设置多选
 				this.cale.setMultiple(this.calendar.fullDate, true)
 				this.weeks = this.cale.weeks
-				this.tempSingleDate = this.calendar.fullDate
-				this.tempRange.before = this.cale.multipleStatus.before
-				this.tempRange.after = this.cale.multipleStatus.after
+				this.tempSingleDate = this.calendar.fullDate
+				const beforeStatus = this.cale.multipleStatus.before
+				const beforeDate = new Date(this.cale.multipleStatus.before).getTime()
+				const afterDate = new Date(this.cale.multipleStatus.after).getTime()
+				if (beforeDate > afterDate && afterDate) {
+					this.tempRange.before = this.cale.multipleStatus.after
+					this.tempRange.after = this.cale.multipleStatus.before
+				} else {
+					this.tempRange.before = this.cale.multipleStatus.before
+					this.tempRange.after = this.cale.multipleStatus.after
+				}
 				this.change()
 			},
 			/**
@@ -603,7 +618,9 @@
 	}
 </script>

-<style lang="scss" >
+<style lang="scss" >
+	$uni-primary: #007aff !default;
+
 	.uni-calendar {
 		/* #ifndef APP-NVUE */
 		display: flex;
@@ -714,7 +731,7 @@
 		text-align: center;
 		width: 100px;
 		font-size: 14px;
-		color: #007aff;
+		color: $uni-primary;
 		/* #ifndef APP-NVUE */
 		letter-spacing: 3px;
 		/* #endif */
@@ -893,7 +910,7 @@
 		border-radius: 100px;
 		height: 40px;
 		line-height: 40px;
-		background-color: #007aff;
+		background-color: $uni-primary;
 		color: #fff;
 		font-size: 16px;
 		letter-spacing: 2px;
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
@@ -185,18 +185,34 @@
 			}
 		},
 		watch: {
+			// #ifndef VUE3
 			value: {
 				handler(newVal, oldVal) {
 					if (newVal) {
 						this.parseValue(this.fixIosDateFormat(newVal)) //兼容 iOS、safari 日期格式
 						this.initTime(false)
-					} else {
+					} else {
 						this.time = ''
 						this.parseValue(Date.now())
 					}
 				},
 				immediate: true
 			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				handler(newVal, oldVal) {
+					if (newVal) {
+						this.parseValue(this.fixIosDateFormat(newVal)) //兼容 iOS、safari 日期格式
+						this.initTime(false)
+					} else {
+						this.time = ''
+						this.parseValue(Date.now())
+					}
+				},
+				immediate: true
+			},
+			// #endif
 			type: {
 				handler(newValue) {
 					if (newValue === 'date') {
@@ -539,8 +555,8 @@
 			 * @param {Object} defaultTime
 			 */
 			parseValue(value) {
-				if (!value) {
-					return
+				if (!value) {
+					return
 				}
 				if (this.type === 'time' && typeof value === "string") {
 					this.parseTimeType(value)
@@ -770,7 +786,9 @@
 	}
 </script>

-<style>
+<style lang="scss">
+	$uni-primary: #007aff !default;
+
 	.uni-datetime-picker {
 		/* #ifndef APP-NVUE */
 		/* width: 100%; */
@@ -804,7 +822,7 @@

 	.uni-datetime-picker-btn-text {
 		font-size: 14px;
-		color: #007AFF;
+		color: $uni-primary;
 	}

 	.uni-datetime-picker-btn-group {
@@ -889,6 +907,7 @@

 	.uni-datetime-picker-text {
 		font-size: 14px;
+		line-height: 50px
 	}

 	.uni-datetime-picker-sign {
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
@@ -91,7 +91,7 @@
 		<calendar v-show="isPhone" ref="mobile" :clearDate="false" :date="defSingleDate" :defTime="reactMobDefTime"
 			:start-date="caleRange.startDate" :end-date="caleRange.endDate" :selectableTimes="mobSelectableTime"
 			:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :typeHasTime="hasTime" :insert="false"
-			:hideSecond="hideSecond" @confirm="mobileChange" />
+			:hideSecond="hideSecond" @confirm="mobileChange" @maskClose="close" />
 	</view>
 </template>
 <script>
@@ -126,23 +126,23 @@
 	} = initVueI18n(messages)

 	export default {
-		name: 'UniDatetimePicker',
-		options: {
-			virtualHost: true
+		name: 'UniDatetimePicker',
+		options: {
+			virtualHost: true
 		},
 		components: {
 			calendar,
 			timePicker
-		},
-		inject: {
-			form: {
-				from: 'uniForm',
-				default: null
-			},
-			formItem: {
-				from: 'uniFormItem',
-				default: null
-			},
+		},
+		inject: {
+			form: {
+				from: 'uniForm',
+				default: null
+			},
+			formItem: {
+				from: 'uniFormItem',
+				default: null
+			},
 		},
 		data() {
 			return {
@@ -399,10 +399,10 @@
 			}
 		},
 		created() {
-			// if (this.form && this.formItem) {
-			// 	this.$watch('formItem.errMsg', (newVal) => {
-			// 		this.localMsg = newVal
-			// 	})
+			// if (this.form && this.formItem) {
+			// 	this.$watch('formItem.errMsg', (newVal) => {
+			// 		this.localMsg = newVal
+			// 	})
 			// }
 		},
 		mounted() {
@@ -515,7 +515,8 @@
 			close() {
 				setTimeout(() => {
 					this.popup = false
-					this.$emit('maskClick', this.value)
+					this.$emit('maskClick', this.value)
+					this.$refs.mobile.close()
 				}, 20)
 			},
 			setEmit(value) {
@@ -541,7 +542,7 @@
 						}
 					}
 				}
-				
+				
 				
 				this.$emit('change', value)
 				this.$emit('input', value)
@@ -706,15 +707,15 @@
 					} else {
 						this.$refs.pcSingle && this.$refs.pcSingle.clearCalender()
 					}
-					if (needEmit) {
-						// 校验规则
-						// if(this.form  && this.formItem){
-						// 	const {
-						// 		validateTrigger
-						// 	} = this.form
-						// 	if (validateTrigger === 'blur') {
-						// 		this.formItem.onFieldChange()
-						// 	}
+					if (needEmit) {
+						// 校验规则
+						// if(this.form  && this.formItem){
+						// 	const {
+						// 		validateTrigger
+						// 	} = this.form
+						// 	if (validateTrigger === 'blur') {
+						// 		this.formItem.onFieldChange()
+						// 	}
 						// }
 						this.$emit('change', '')
 						this.$emit('input', '')
@@ -782,12 +783,14 @@
 	}
 </script>

-<style>
-	.uni-date {
-		/* #ifndef APP-NVUE */
-		width: 100%;
-		/* #endif */
-		flex: 1;
+<style lang="scss">
+	$uni-primary: #007aff !default;
+	
+	.uni-date {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+		flex: 1;
 	}
 	.uni-date-x {
 		display: flex;
@@ -798,8 +801,8 @@
 		border-radius: 4px;
 		background-color: #fff;
 		color: #666;
-		font-size: 14px;
-		flex: 1;
+		font-size: 14px;
+		flex: 1;
 	}

 	.uni-date-x--border {
@@ -808,15 +811,15 @@
 		border: 1px solid #e5e5e5;
 	}

-	.uni-date-editor--x {
-		display: flex;
+	.uni-date-editor--x {
+		display: flex;
 		align-items: center;
 		position: relative;
 	}

-	.uni-date-editor--x .uni-date__icon-clear {
-		padding: 0 5px;
-		display: flex;
+	.uni-date-editor--x .uni-date__icon-clear {
+		padding: 0 5px;
+		display: flex;
 		align-items: center;
 		/* #ifdef H5 */
 		cursor: pointer;
@@ -825,14 +828,14 @@

 	.uni-date__x-input {
 		padding: 0 8px;
-		/* #ifndef APP-NVUE */
-		width: auto;
-		/* #endif */
-		position: relative;
-		overflow: hidden;
-		flex: 1;
-		line-height: 1;
-		font-size: 14px;
+		/* #ifndef APP-NVUE */
+		width: auto;
+		/* #endif */
+		position: relative;
+		overflow: hidden;
+		flex: 1;
+		line-height: 1;
+		font-size: 14px;
 		height: 35px;
 	}

@@ -941,14 +944,14 @@
 	}

 	.popup-x-footer text:hover {
-		color: #007aff;
+		color: $uni-primary;
 		cursor: pointer;
 		opacity: 0.8;
 	}

 	.popup-x-footer .confirm {
 		margin-left: 20px;
-		color: #007aff;
+		color: $uni-primary;
 	}

 	.uni-date-changed {
@@ -1009,4 +1012,4 @@
 		border-top-width: 0;
 		border-bottom-color: #fff;
 	}
-</style>
+</style>