u-picker和u-datetime-picker显示问题

u-picker和u-datetime-picker嵌入在input展示后,点击input会先召唤出键盘,关闭键盘才会显示对应的u-picker和u-datetime-picker事件,通过以下方案解决

<!-- 套壳使用事件,增加pointer-events: none;让input事件失效,然后套一层view添加tap事件 -->
<uni-forms-item class="item" required label="年级/班级/科目:" name="subjectId">
	<!-- 套壳使用事件,增加pointer-events: none;让input事件失效 -->
	<view @tap="showCascade = true">
		<input
			class="input"
			style="pointer-events: none;"
			v-model="recordsInfo.cascadeValue" 
			placeholder="请选择年级/班级/科目"
		/>
	</view>
	<u-picker :show="showCascade" ref="uPicker" 
		:columns="columns" 
		@confirm="confirm" 
		@cancel="showCascade = false"
		@change="changeHandler">
	</u-picker>
</uni-forms-item>

u-picker和u-datetime-picker嵌入在u-search展示后,点击会先召唤出键盘,关闭键盘才会显示对应的u-picker和u-datetime-picker事件,通过调试找到u-search的class,下钻增加样式:pointer-events: none;

<view @tap="searchFocus">
	<u-search
		placeholder="请假年月检索" 
		margin="0px 12px 10px 12px" 
		:showAction="false" 
		v-model="leaveDate"
		bgColor="#FFFFFF">
	</u-search>
	<u-datetime-picker
		ref="datetimePicker"
		:show="leaveDateShow"
		:minDate="1704038400000"
		mode="year-month"
		:formatter="formatter"
		@cancel="leaveDateShow = false"
		@confirm="dateConfirm"
	></u-datetime-picker>
</view>

// 禁用u-search的鼠标事件
/deep/ .u-search__content__input.data-v-2d141374 {
	pointer-events: none;
}
posted @ 2024-05-30 00:27  幸运刘  阅读(661)  评论(0编辑  收藏  举报