u-picker和u-datetime-picker顯示問題

幸运刘發表於2024-05-30

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;
}

相關文章