我们在日常需求中肯定会遇到多层ui组件嵌套却只显示一层遮罩层的情况,如下图,它实际上是有两个组件u-popup弹出层上有一个日历组件u-calendar,这个时候我们正常应该显示两层遮罩层,但是会发现只显示了一个,如下图 虽然功能没什么影响 但是看起来不美观

研究了很长时间,我这里提供一种解决方法,在最高层级显示的组件上套上一层遮罩层,设置z-index代码如下, 注意:zIndex需要设置大一些,我这里设置的是10000。

	<u-overlay :show="showDatePicker" @click="showTimePicker = false" :zIndex="100000">
			<u-calendar :show="showDatePicker" :mode="'range'" :minDate="minDate" :maxDate="maxDate"
				:defaultDate="defaultDateRange" :startText="startText" :endText="endText" :confirmText="confirmText"
				:showMark="false" :monthNum="monthNum" :color="primaryColor" @confirm="onDateConfirm" @close="closeDatePicker"
				@change="onCalendarChange" :defaultSelect="defaultDateRange">
				<view slot="day" slot-scope="{date, info, week, day, selected, disabled}" class="custom-day">
					<view class="custom-day-inner" :class="{
					'selected': selected,
					'range-left': info.rangeStatus === 'start',
					'range-right': info.rangeStatus === 'end',
					'range-between': info.rangeStatus === 'middle'
				}" v-if="isValidDate(date)">
						{{ day }}
						<text v-if="selected" class="day-status">{{ info.rangeStatus === 'start' ? startText : endText }}</text>
					</view>
				</view>
			</u-calendar>


		</u-overlay>

修改后运行结果如下,完美解决。