【前端神奇bug记录单.2】element的日期时间选择器在切换type时的ui错误

element的时间选择器在切换type时的ui错误

今天测试提了一个bug单，element的时间选择器在切换type时的ui布局混乱问题。

• 复现步骤

1. 点开日期时间选择器

2. 选择弹窗展开的情况下点击单选按钮切换type

3. 再点击选择器

单选按钮，选择器图标，弹窗的z-index全部出现混乱。

• 原代码

• 排查解决 通过多次测试，发现问题布局混乱时的css等代码并没有出现异常。问题大概率type切换上，遂通过监听dateType的切换，进行各种尝试，包括不限于转移焦点，重置弹窗状态等，但依然未解决问题。最后把一个组件分为两个组件，通过dateType的值进行隐藏和显示，依然无效。但这个操作给了我一个想法，很可能是打开弹窗的时，切换类型会复用当前弹窗的dom，但当前时间选择器本身的dom节点已经变了，从而导致的一系列问题。那解决方式立马浮现在脑海里：增加key。成功！

• 成功代码