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