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
上一篇: GO基础之流程控制语句