iView DatePicker 组件 选择年/月 下拉框异常收缩

引言

上头新分给我一个之前延期处理的 bug，就是标题描述的 bug，iView 的 DatePicker 组件，在选择年或者月的情况会异常收缩起来。正常不应该收缩起来，因为选择年后还要选择月份，选择月份后还要选择天数。参照 iView 的 demo 发现用法并无问题，第一想到的就是当前这个项目有 iView 的全局配置 或者 某些插件功能冲突（项目是前同事写的，我不知道有哪些全局配置），最后发现是一个全局配置影响的，而且这算是iView 的一个bug，下面用图说明一下。

bug 详细信息

从动图很明显能看到bug。

bug 出现原因

解释一个 :capture="false" 这个capture 是 iView 4.x 新加的全局配置属性，原话是

默认值是 true ，所以官方 Demo 并无问题，而是在项目中（一般是在main.js）配置了 iView 的全局配置

Vue.use(iView, {
	capture: false
})

这算是一个 iView 的bug，解决方案是 全局的删除（因为默认就是true），或者在每个DatePicker 使用处添加 :capture="false"

<DatePicker type="date" :capture="trie" placeholder="Select date" style="width: 200px"></DatePicker>

DatePicker 源码是这样的最外层标签添加了这些属性，虽然其他下拉也用到了，但是我并没有测出问题（有兴趣可以去看）。

<div
	v-click-outside:[capture].mousedown="handleClose"
	v-click-outside:[capture].touchstart="handleClose"
	v-click-outside:[capture]="handleClose">
</div>

DatePicker 的 props 添加了

 // 4.0.0
 capture: {
     type: Boolean,
     default () {
         return !this.$IVIEW ? true : this.$IVIEW.capture;
     }
 }

结语

好了以上就这么多，小伙伴们在使用插件时定位不到问题，可以去看源码，其实源码并不复杂，跟你自己写的代码一样。解决bug就是要了解他出问题的地方，等我有空就去 iView 上提 issuse，今天工作记录就分享到这里，有问题，欢迎留言询问。嘿嘿

本文地址：https://blog.csdn.net/rudy_zhou/article/details/107481683