为什么会说到这个呢？是我觉得没有识别出来，然后就导致了这样的问题，这种情况不应该发生。我写了如下这样一段代码，但是发现当自己选择时间的时候无法选择。然后就发现变成了光标在闪烁。这样其实就是因为我选择到了这个input框的鼠标事件，而没有触发u-picker的鼠标事件，所以导致了不能弹出时间选择器。

<template v-if="isTime(item.fieldType)"><u-picker mode="time" v-model="item.calendarShow" startYear="1922":params="params(item.fieldTypeTime)"@confirm="confirm($event, index, item.fieldTypeTime)"></u-picker><u-input class="date-holder" :placeholder="`请选择${item.fieldValue}`" v-model="detail[item.fieldKey]" type="text" disabled@click="item.calendarShow = true"></u-input></template>

依靠这个解决了，其实就是很简单，就是取消与input的鼠标交互的事件，然后能直接去触发别的的鼠标事件

<style lang="scss" scoped>.form-fields {::v-deep {.date-holder input {pointer-events: none;}}}
</style>

总结知识：
一、鼠标穿透 ： pointer-events: none;
pointer-events:none； 是 CSS3 中的一个属性，主要用于控制元素是否响应鼠标或触摸事件。当元素的 pointer-events 属性被设置为 none 时，该元素及其子元素将无法与鼠标或触摸设备产生交互作用，即无法触发事件。

二、使用场景
1、实现特殊效果
在一个元素上覆盖一个透明的层，同时禁用用户对下面元素的操作

2、实现视差滚动效果
通过使滚动层无法响应交互，实现粘性效果

3、实现遮罩层
使下层元素无法响应事件，产生遮蔽遮罩的效果

4、修复点击穿透问题
在一个元素的子元素上设置 pointer-events: none，可以防止点击事件穿透到父层元素上

5、改变鼠标事件的触发对象
可以在一个元素上设置 pointer-events: none，然后在它的子元素上绑定事件，这样鼠标交互会直接在子元素上触发事件，跳过中间元素