欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 12:18:54
iView DatePicker 组件 选择年/月 下拉框异常收缩引言bug 详细信息bug 出现原因结语引言上头新分给我一个之前延期处理的 bug,就是标题描述的 bug,iView 的 DatePicker 组件,在选择年或者月的情况会异常收缩起来。正常不应该收缩起来,因为选择年后还要选择月份,选择月份后还要选择天数。参照 iView 的 demo 发现用法并无问题,第一想到的就是当前这个项目有 iView 的全局配置 或者 某些插件功能冲突(项目是前同事写的,我不知道有哪些全局配置),最后发现是一...

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

引言

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

bug 详细信息

iView DatePicker 组件 选择年/月 下拉框异常收缩
从动图很明显能看到bug。

bug 出现原因

解释一个 :capture="false" 这个captureiView 4.x 新加的全局配置属性,原话是
iView DatePicker 组件 选择年/月 下拉框异常收缩
默认值是 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>

DatePickerprops 添加了

 // 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