uview-plus 3.7.36 → 3.8.32

package/components/u-datetime-picker/u-datetime-picker.vue

@@ -31,7 +31,7 @@
             :toolbarRightSlot="toolbarRightSlot"
 			:pageInline="pageInline"
 			:maskClass="maskClass"
-			:maskStyle="maskStyle"
+			:maskStyle="resolvedMaskStyle"
             @close="close"
             @cancel="cancel"
             @confirm="confirm"
@@ -111,6 +111,9 @@
 		},
 		watch: {
 			show(newValue, oldValue) {
+				if (!newValue && this.hasInput) {
+					this.showByClickInput = false
+				}
 				if (newValue) {
 					// #ifdef VUE3
 					this.innerValue = this.correctValue(this.modelValue)
@@ -142,6 +145,17 @@
 			propsChange() {
 				return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter, this.modelValue]
 			},
+			resolvedMaskStyle() {
+				if (this.upHasProp('maskStyle')) {
+					return this.maskStyle || ''
+				}
+				if (this.upThemeIsDark) {
+					const topBottomStrong = 'rgba(28, 28, 30, 0.95)'
+					const topBottomWeak = 'rgba(28, 28, 30, 0.6)'
+					return `background-image: linear-gradient(180deg, ${topBottomStrong}, ${topBottomWeak}), linear-gradient(0deg, ${topBottomStrong}, ${topBottomWeak});`
+				}
+				return ''
+			},
 			// input的props
 			inputPropsInner() {
 				return {
@@ -160,6 +174,20 @@
 		emits: ['close', 'cancel', 'confirm', 'change', 'update:modelValue'],
 		// #endif
 		methods: {
+			toInt(value, fallback = 0) {
+				const num = parseInt(value, 10)
+				return Number.isFinite(num) ? num : fallback
+			},
+			// 按列安全读取 picker 值，避免快速滚动时出现越界/空值
+			safeColumnValue(values, columnIndex, optionIndex, fallback = '') {
+				const column = Array.isArray(values[columnIndex]) ? values[columnIndex] : []
+				if (!column.length) return fallback
+				let index = Number(optionIndex)
+				if (!Number.isFinite(index)) index = 0
+				index = range(0, column.length - 1, index)
+				const value = column[index]
+				return value == null ? fallback : value
+			},
 			getInputValue(newValue) {
 				if (newValue == '' || !newValue || newValue == undefined) {
 					this.inputValue = ''
@@ -214,6 +242,9 @@
 			// 关闭选择器
 			close() {
 				if (this.closeOnClickOverlay) {
+					if (this.hasInput) {
+						this.showByClickInput = false
+					}
 					this.$emit('close')
 				}
 			},
@@ -243,7 +274,13 @@
 			},
 			//用正则截取输出值,当出现多组数字时,抛出错误
 			intercept(e,type){
-				let judge = e.match(/\d+/g)
+				if (e === undefined || e === null) {
+					return type ? '0000' : '00'
+				}
+				let judge = String(e).match(/\d+/g)
+				if (!judge || judge.length === 0) {
+					return type ? '0000' : '00'
+				}
 				//判断是否掺杂数字
 				if(judge.length>1){
 					error("请勿在过滤或格式化函数时添加数字")
@@ -260,30 +297,53 @@
 			// 列发生变化时触发
 			change(e) {
 				const { indexs, values } = e
+				const safeValues = Array.isArray(values) ? values : []
 				let selectValue = ''
 				if(this.mode === 'time') {
 					// 根据value各列索引，从各列数组中，取出当前时间的选中值
-					selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}`
+					const hourText = this.safeColumnValue(safeValues, 0, indexs[0], padZero(this.minHour))
+					const minuteText = this.safeColumnValue(safeValues, 1, indexs[1], padZero(this.minMinute))
+					let hour = this.toInt(this.intercept(hourText), this.minHour)
+					let minute = this.toInt(this.intercept(minuteText), this.minMinute)
+					hour = range(this.minHour, this.maxHour, hour)
+					minute = range(this.minMinute, this.maxMinute, minute)
+					selectValue = `${padZero(hour)}:${padZero(minute)}`
 				} else {
+					const validCurrent = dayjs(this.innerValue).isValid() ? dayjs(this.innerValue) : dayjs(this.minDate)
+					const currentYear = validCurrent.year()
+					const currentMonth = validCurrent.month() + 1
+					const currentDate = validCurrent.date()
+					const currentHour = validCurrent.hour()
+					const currentMinute = validCurrent.minute()
+
+					const yearText = this.safeColumnValue(safeValues, 0, indexs[0], `${currentYear}`)
+					const monthText = this.safeColumnValue(safeValues, 1, indexs[1], padZero(currentMonth))
 					// 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
-					const year = parseInt(this.intercept(values[0][indexs[0]],'year'))
-					const month = parseInt(this.intercept(values[1][indexs[1]]))
-					let date = parseInt(values[2] ? this.intercept(values[2][indexs[2]]) : 1)
+					let year = this.toInt(this.intercept(yearText, 'year'), currentYear)
+					let month = this.toInt(this.intercept(monthText), currentMonth)
 					let hour = 0, minute = 0
+					month = range(1, 12, month)
 					// 此月份的最大天数
 					const maxDate = dayjs(`${year}-${month}`).daysInMonth()
+					const dayText = this.safeColumnValue(safeValues, 2, indexs[2], padZero(Math.min(currentDate, maxDate)))
+					let date = this.toInt(this.intercept(dayText), Math.min(currentDate, maxDate))
 					// year-month模式下，date不会出现在列中，设置为1，为了符合后边需要减1的需求
 					if (this.mode === 'year-month') {
 					    date = 1
 					}
 					// 不允许超过maxDate值
-					date = Math.min(maxDate, date)
+					date = range(1, maxDate, date)
 					if (this.mode === 'datetime') {
-					    hour = parseInt(this.intercept(values[3][indexs[3]]))
-					    minute = parseInt(this.intercept(values[4][indexs[4]]))
+						const hourText = this.safeColumnValue(safeValues, 3, indexs[3], padZero(currentHour))
+						const minuteText = this.safeColumnValue(safeValues, 4, indexs[4], padZero(currentMinute))
+					    hour = range(0, 23, this.toInt(this.intercept(hourText), currentHour))
+					    minute = range(0, 59, this.toInt(this.intercept(minuteText), currentMinute))
 					}
 					// 转为时间模式
 					selectValue = Number(new Date(year, month - 1, date, hour, minute))
+					if (!Number.isFinite(selectValue)) {
+						selectValue = this.correctValue(this.innerValue)
+					}
 				}
 				// 取出准确的合法值，防止超越边界的情况
 				selectValue = this.correctValue(selectValue)
@@ -440,6 +500,15 @@
 			            range: [minMinute, maxMinute],
 			        },
 			    ];
+				// 兜底：防止边界计算异常导致日列出现空范围（快速滚动场景）
+				if (result[2] && result[2].type === 'day') {
+					const start = Number(result[2].range[0])
+					const end = Number(result[2].range[1])
+					if (!Number.isFinite(start) || !Number.isFinite(end) || start > end) {
+						const fallbackDays = dayjs(this.innerValue).isValid() ? dayjs(this.innerValue).daysInMonth() : 31
+						result[2].range = [1, fallbackDays]
+					}
+				}
 			    if (this.mode === 'date')
 			        result.splice(3, 2);
 			    if (this.mode === 'year-month')
@@ -518,7 +587,7 @@
 				flex-direction: column;
 				justify-content: center;
 				border-radius: 4px;
-				border: 1px solid #eee;
+				border: 1px solid var(--up-border-color, #eee);
 				padding: 0 10px;
 			}
         }

package/components/u-dragsort/u-dragsort.vue

@@ -371,6 +371,9 @@ export default {
             position: relative;
             padding: 0;
             box-sizing: border-box;
+            border: 1px solid var(--up-border-color, rgba(125, 126, 128, 0.35));
+            border-radius: 8px;
+            background-color: var(--up-card-bg-color, #ffffff);
         }
     }
 

package/components/u-dropdown/u-dropdown.vue

@@ -8,13 +8,13 @@
 			<view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
 				<view class="u-flex u-flex-row">
 					<text class="u-dropdown__menu__item__text" :style="{
-						color: item.disabled ? '#c0c4cc' : (index === current || highlightIndexList.includes(index)) ? activeColor : inactiveColor,
+						color: item.disabled ? menuDisabledColor : (index === current || highlightIndexList.includes(index)) ? resolvedActiveColor : resolvedInactiveColor,
 						fontSize: addUnit(titleSize)
 					}">{{item.title}}</text>
 					<view class="u-dropdown__menu__item__arrow" :class="{
 						'u-dropdown__menu__item__arrow--rotate': index === current
 					}">
-						<up-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="addUnit(menuIconSize)" :color="index === current || highlightIndexList.includes(index) ? activeColor : '#c0c4cc'"></up-icon>
+						<up-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="addUnit(menuIconSize)" :color="index === current || highlightIndexList.includes(index) ? resolvedActiveColor : menuDisabledColor"></up-icon>
 					</view>
 				</view>
 			</view>
@@ -77,6 +77,19 @@
 			}
 		},
 		computed: {
+			resolvedActiveColor() {
+				return this.activeColor === '#2979ff'
+					? this.upThemeVar('--up-primary', '#2979ff')
+					: this.activeColor
+			},
+			resolvedInactiveColor() {
+				return this.inactiveColor === '#606266'
+					? this.upThemeVar('--up-content-color', '#606266')
+					: this.inactiveColor
+			},
+			menuDisabledColor() {
+				return this.upThemeVar('--up-disabled-color', '#c0c4cc')
+			},
 			// 下拉出来部分的样式
 			popupStyle() {
 				let style = {};

package/components/u-dropdown-item/u-dropdown-item.vue

@@ -76,8 +76,8 @@
 				if (parent) {
 					this.parent = parent;
 					// 将子组件的激活颜色配置为父组件设置的激活和未激活时的颜色
-					this.activeColor = parent.activeColor;
-					this.inactiveColor = parent.inactiveColor;
+					this.activeColor = parent.resolvedActiveColor || parent.activeColor;
+					this.inactiveColor = parent.resolvedInactiveColor || parent.inactiveColor;
 					// 将本组件的this，放入到父组件的children数组中，让父组件可以操作本(子)组件的方法和属性
 					// push进去前，显判断是否已经存在了本实例，因为在子组件内部数据变化时，会通过父组件重新初始化子组件
 					let exist = parent.children.find(val => {
@@ -115,6 +115,6 @@
 
 <style scoped lang="scss">
     .u-dropdown-item__scroll {
-        background: #ffffff;
+        background: var(--up-card-bg-color, #ffffff);
     }
 </style>

package/components/u-form-item/u-form-item.vue

@@ -36,7 +36,7 @@
 						</view>
 						<text
 							class="u-form-item__body__left__content__label"
-							:style="[parentData.labelStyle, {
+							:style="[labelDynamicStyle, parentData.labelStyle, {
 								justifyContent: parentData['labelAlign'] === 'left' ? 'flex-start' : parentData['labelAlign'] === 'center' ? 'center' : 'flex-end'
 							}]"
 						>{{ label }}</text>
@@ -122,6 +122,11 @@
 		},
 		// 组件创建完成时，将当前实例保存到u-form中
 		computed: {
+			labelDynamicStyle() {
+				return {
+					color: this.upThemeVar('--up-main-color', '#303133')
+				}
+			},
 			propsLine() {
 				return defProps.line
 			}

package/components/u-gap/u-gap.vue

@@ -24,8 +24,12 @@
 		mixins: [mpMixin, mixin, props],
 		computed: {
 			gapStyle() {
+				const defaultBg = this.upThemeIsDark ? '#111111' : 'transparent'
+				const resolvedBg = (this.bgColor && this.bgColor !== 'transparent')
+					? this.bgColor
+					: this.upThemeVar('--up-gap-bg-color', defaultBg)
 				const style = {
-					backgroundColor: this.bgColor,
+					backgroundColor: resolvedBg,
 					height: addUnit(this.height),
 					marginTop: addUnit(this.marginTop),
 					marginBottom: addUnit(this.marginBottom),

package/components/u-goods-sku/u-goods-sku.vue

@@ -149,7 +149,7 @@
 			},
 			// 是否可以购买
 			canBuy() {
-				const selectedSkuCount = Object.keys(this.selectedSku).length
+				const selectedSkuCount = Object.keys(this.selectedSku).filter((key) => this.selectedSku[key] !== '').length
 				const skuTreeCount = this.skuTree.length
 				return selectedSkuCount === skuTreeCount && this.buyNum > 0 && this.stock > 0
 			},
@@ -312,7 +312,7 @@
 
 <style lang="scss" scoped>
 	.up-goods-sku {
-		background-color: #fff;
+		background-color: var(--up-card-bg-color, #fff);
 		overflow: hidden;
 
         .up-goods-sku-container {
@@ -349,26 +349,26 @@
 					
 					&__symbol {
 						font-size: 24rpx;
-						color: #fa3534;
+						color: var(--up-error, #fa3534);
 						margin-right: 4rpx;
 					}
 					
 					&__value {
 						font-size: 36rpx;
-						color: #fa3534;
+						color: var(--up-error, #fa3534);
 						font-weight: bold;
 					}
 				}
 				
 				&__stock {
 					font-size: 26rpx;
-					color: #999;
+					color: var(--up-tips-color, #999);
 					margin-bottom: 20rpx;
 				}
 				
 				&__selected {
 					font-size: 26rpx;
-					color: #333;
+					color: var(--up-main-color, #333);
 				}
 			}
 		}
@@ -382,7 +382,7 @@
 				
 				&__title {
 					font-size: 28rpx;
-					color: #333;
+					color: var(--up-main-color, #333);
 					margin-bottom: 20rpx;
 				}
 				
@@ -393,21 +393,22 @@
 					
 					&__item {
 						padding: 10rpx 20rpx;
-						border: 2rpx solid #eee;
+						border: 2rpx solid var(--up-border-color, #eee);
 						border-radius: 10rpx;
 						margin-right: 20rpx;
 						margin-bottom: 20rpx;
 						font-size: 26rpx;
-						color: #333;
+						color: var(--up-main-color, #333);
+						background-color: var(--up-card-bg-color, #fff);
 						
 						&--active {
-							border-color: #fa3534;
-							color: #fa3534;
+							border-color: var(--up-error, #fa3534);
+							color: var(--up-error, #fa3534);
 						}
 						
 						&--disabled {
-							color: #ccc;
-							border-color: #eee;
+							color: var(--up-disabled-color, #ccc);
+							border-color: var(--up-border-color, #eee);
 						}
 					}
 				}
@@ -422,7 +423,7 @@
 				
 				&__title {
 					font-size: 28rpx;
-					color: #333;
+					color: var(--up-main-color, #333);
 				}
 			}
 		}
@@ -431,4 +432,4 @@
 			padding: 20rpx 0rpx 40rpx 0;
 		}
 	}
-</style>
+</style>

package/components/u-index-anchor/u-index-anchor.vue

@@ -8,14 +8,14 @@
 		:ref="`u-index-anchor-${text}`"
 	    :style="{
 			height: addUnit(height),
-			backgroundColor: bgColor
+			backgroundColor: resolvedBgColor
 		}"
 	>
 		<text
 		    class="u-index-anchor__text"
 		    :style="{
 				fontSize: addUnit(size),
-				color: color
+				color: resolvedColor
 			}"
 		>{{ text.name || text }}</text>
 	</view>
@@ -79,6 +79,17 @@
 			}
 		},
 		computed: {
+			resolvedColor() {
+				return this.color === '#606266'
+					? this.upThemeVar('--up-content-color', '#606266')
+					: this.color
+			},
+			resolvedBgColor() {
+				const isDefaultBgColor = this.bgColor === '#f1f1f1' || this.bgColor === '#dedede'
+				return isDefaultBgColor
+					? this.upThemeVar('--up-bg-color', '#f1f1f1')
+					: this.bgColor
+			},
         parentSticky() {
             const indexList = $parent.call(this, "u-index-list");
             return indexList ? indexList.sticky : true;

package/components/u-index-list/u-index-list.vue

@@ -60,12 +60,12 @@
 				v-for="(item, index) in uIndexList"
 				:key="index"
 				:style="{
-					backgroundColor: activeIndex === index ? activeColor : 'transparent'
+					backgroundColor: activeIndex === index ? resolvedActiveColor : 'transparent'
 				}"
 			>
 				<text
 					class="u-index-list__letter__item__index"
-					:style="{color: activeIndex === index ? '#fff' : inactiveColor}"
+					:style="{color: activeIndex === index ? activeLetterTextColor : resolvedInactiveColor}"
 				>{{ item.key || item }}</text>
 			</view>
 		</view>
@@ -172,6 +172,19 @@
 					itemHeight
 				} = this.letterInfo
 				return Math.floor(top - (height / 2) + itemHeight * this.activeIndex + itemHeight - 70 / 2)
+			},
+			resolvedInactiveColor() {
+				return this.inactiveColor === '#606266'
+					? this.upThemeVar('--up-content-color', '#606266')
+					: this.inactiveColor
+			},
+			resolvedActiveColor() {
+				return this.activeColor === '#5677fc'
+					? this.upThemeVar('--up-primary', '#5677fc')
+					: this.activeColor
+			},
+			activeLetterTextColor() {
+				return this.upThemeVar('--up-white', '#ffffff')
 			}
 		},
 		watch: {
@@ -577,8 +590,8 @@
 			height: 50px;
 			border-radius: 100px 100px 0 100px;
 			text-align: center;
-			color: #ffffff;
-			background-color: #c9c9c9;
+			color: var(--up-white, #ffffff);
+			background-color: var(--up-index-list-indicator-bg-color, var(--up-content-color, #c9c9c9));
 			transform: rotate(-45deg);
 			@include flex;
 			justify-content: center;
@@ -588,7 +601,7 @@
 				font-size: 28px;
 				line-height: 28px;
 				font-weight: bold;
-				color: #fff;
+				color: var(--up-white, #fff);
 				transform: rotate(45deg);
 				text-align: center;
 			}

package/components/u-input/input.js

@@ -14,13 +14,13 @@ export default {
 		type: 'text',
 		fixed: false,
 		disabled: false,
-		disabledColor: '#f5f7fa',
+		disabledColor: '',
 		clearable: false,
 		password: false,
 		maxlength: 140,
 		placeholder: null,
 		placeholderClass: 'input-placeholder',
-		placeholderStyle: 'color: #c0c4cc',
+		placeholderStyle: '',
 		showWordLimit: false,
 		confirmType: 'done',
 		confirmHold: false,
@@ -35,7 +35,7 @@ export default {
 		adjustPosition: true,
 		inputAlign: 'left',
 		fontSize: '15px',
-		color: '#303133',
+		color: '',
 		prefixIcon: '',
 		prefixIconStyle: '',
 		suffixIcon: '',

package/components/u-input/u-input.vue

@@ -29,7 +29,7 @@
             	    :disabled="disabled || readonly"
             	    :maxlength="maxlength"
             	    :placeholder="placeholder"
-            	    :placeholder-style="placeholderStyle"
+            	    :placeholder-style="placeholderStyleInner"
             	    :placeholder-class="placeholderClass"
             	    :confirm-type="confirmType"
             	    :confirm-hold="confirmHold"
@@ -188,6 +188,12 @@ export default {
         }
     },
     computed: {
+        placeholderStyleInner() {
+            if (this.placeholderStyle) {
+                return this.placeholderStyle;
+            }
+            return `color: ${this.upThemeVar('--up-tips-color', this.$u?.color?.tipsColor || '#909399')}`;
+        },
         // 是否密码
         isPassword() {
             let ret = false;
@@ -220,21 +226,37 @@ export default {
             let classes = [],
                 { border, disabled, shape } = this;
             border === "surround" &&
-                (classes = classes.concat(["u-border", "u-input--radius"]));
+                (classes = classes.concat(["u-input--radius"]));
             classes.push(`u-input--${shape}`);
             border === "bottom" &&
                 (classes = classes.concat([
-                    "u-border-bottom",
                     "u-input--no-radius",
                 ]));
             return classes.join(" ");
         },
+        inputBorderColor() {
+            const lightBorder = this.upThemeVar('--up-border-color', '#dadbde');
+            return this.upThemeVar(
+                '--up-input-border-color',
+                this.upThemeIsDark ? 'rgba(255, 255, 255, 0.08)' : lightBorder
+            );
+        },
         // 组件的样式
         wrapperStyle() {
             const style = {};
             // 禁用状态下，被背景色加上对应的样式
             if (this.disabled) {
-                style.backgroundColor = this.disabledColor;
+                style.backgroundColor = this.disabledColor || this.upThemeVar('--up-bg-color', this.$u?.color?.bgColor || '#f3f4f6');
+            }
+            if (this.border === "surround") {
+                style.borderWidth = "0.5px";
+                style.borderStyle = "solid";
+                style.borderColor = this.inputBorderColor;
+            }
+            if (this.border === "bottom") {
+                style.borderBottomWidth = "0.5px";
+                style.borderBottomStyle = "solid";
+                style.borderBottomColor = this.inputBorderColor;
             }
             // 无边框时，去除内边距
             if (this.border === "none") {
@@ -251,7 +273,7 @@ export default {
         // 输入框的样式
         inputStyle() {
             const style = {
-                color: this.color,
+                color: this.color || this.upThemeVar('--up-main-color', this.$u?.color?.mainColor || '#303133'),
                 fontSize: addUnit(this.fontSize),
 				textAlign: this.inputAlign
             };

package/components/u-keyboard/u-keyboard.vue

@@ -8,9 +8,7 @@
 	    :safeAreaInsetBottom="safeAreaInsetBottom"
 	    @close="popupClose"
 	    :zIndex="zIndex"
-	    :customStyle="{
-			backgroundColor: 'rgb(214, 218, 220)'
-		}"
+	    :customStyle="popupStyle"
 	>
 		<view class="u-keyboard">
 			<slot />
@@ -106,6 +104,13 @@
 			}
 		},
 		mixins: [mpMixin, mixin, props],
+		computed: {
+			popupStyle() {
+				return {
+					backgroundColor: this.upThemeVar('--up-bg-color', this.upThemeIsDark ? '#2c2c2e' : 'rgb(214, 218, 220)')
+				}
+			}
+		},
 		emits: ["change", "close", "confirm", "cancel", "backspace"],
 		methods: {
 			change(e) {
@@ -138,11 +143,11 @@
 		&__tooltip {
 			@include flex;
 			justify-content: space-between;
-			background-color: #FFFFFF;
+			background-color: var(--up-card-bg-color, #ffffff);
 			padding: 14px 12px;
 
 			&__item {
-				color: #333333;
+				color: var(--up-main-color, #303133);
 				flex: 1;
 				text-align: center;
 				font-size: 15px;
@@ -155,7 +160,7 @@
 
 			&__cancel {
 				text-align: left;
-				color: #888888;
+				color: var(--up-tips-color, #909399);
 			}
 
 			&__tips {

package/components/u-loading-page/loadingPage.js

@@ -15,7 +15,7 @@ export default {
         image: '',
         loadingMode: 'circle',
         loading: false,
-        bgColor: '#ffffff',
+        bgColor: '',
         color: '#C8C8C8',
         fontSize: 19,
         iconSize: 28,

package/components/u-loading-page/u-loading-page.vue

@@ -1,17 +1,7 @@
 <template>
     <u-transition
         :show="loading"
-        :custom-style="{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: bgColor,
-            display: 'flex',
-            zIndex: zIndex,
-            ...customStyle
-        }"
+        :custom-style="overlayStyle"
     >
         <view class="u-loading-page">
             <view class="u-loading-page__warpper">
@@ -61,7 +51,7 @@ import { addUnit } from '../../libs/function/index';
  * @property {String}			image			文字上方用于替换loading动画的图片
  * @property {String}			loadingMode		加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形 （默认 'circle' ）
  * @property {Boolean}			loading			是否加载中 （默认 false ）
- * @property {String}			bgColor			背景色 （默认 '#ffffff' ）
+ * @property {String}			bgColor			背景色，留空时跟随主题页面背景
  * @property {String}			color			文字颜色 （默认 '#C8C8C8' ）
  * @property {String | Number}	fontSize		文字大小 （默认 19 ）
  * @property {String | Number}	iconSize		图标大小 （默认 28 ）
@@ -73,6 +63,22 @@ import { addUnit } from '../../libs/function/index';
 export default {
     name: "u-loading-page",
     mixins: [mpMixin, mixin, props],
+    computed: {
+        overlayStyle() {
+            const fallbackBg = this.$u?.color?.bgColor || (this.upThemeIsDark ? '#1f1f1f' : '#f3f4f6')
+            return {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: this.bgColor || this.upThemeVar('--up-page-bg-color', fallbackBg),
+                display: 'flex',
+                zIndex: this.zIndex,
+                ...this.customStyle
+            }
+        }
+    },
     data() {
         return {};
     },