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