记一次诡异的bug

Posted 2020-12-23 yangal

问题描述：el-dialog里有一个el-select 两者都被插到了body上，这就导致了当el-select获得焦点并滚动el-dialog 时 ，el-select的下拉框滚出el-dialog 时，并不会消失，因为他们得层级一样，都直接被插到的body上。

• 尝试方法1（失败）：给el-select加上:popper-append-to-body=false 让它插到父级上。但是这样的话，el-select的下拉框莫名其妙的出现在el-dialog的外部，element组件自动计算的element.style把位置计算到了一个莫名其妙的位置上，从来没遇到过这种情况

---

• 尝试方法2（失败）：加正确的样式 并加上!important强制使用，但是这样的话每次滚动一点，element.style的自动计算就又将位置搞飞了，这就导致只有focus时，下拉框第一次出现时的位置是正确的，一旦滚动就不对了

---

• 尝试方法3（失败）：给el-dialog的el-body添加滚动监听事件，每次滚动后都用js将下拉框拉回到正确位置，但这样就导致了滚动时下拉框不停的闪烁，这是因为他不停的在正确和错误的位置切换

---

• 尝试方法4（失败）：查找如何禁用element自动计算， 查找无结果

---

• 尝试方法5（失败）：思考是不是某些熟悉导致的位置计算错误，将el-dialog不插到body上，无效果，下拉框位置仍然计算错误。将el-select注释，因为上面绑定太多属性、方法和数值了，拿最简单的数据写一个新的el-select,并将其从el-form中提出来直接放到el-dialog下面，无效果，下拉框位置仍然计算错误

---

• 尝试方法6（失败）：使用js的cloneNode(true) 深度克隆 将正确的下拉框克隆一份放到正确位置，克隆方法不起作用，查找不起作用的原因：未找到。

---

• 尝试方法7（失败）：写两个el-select，第一个拉到错误的位置，但使其下拉框在正确的位置，并将第一个隐藏。这样的话就用第二个选择框和第一次下拉框拼成一个正确的。第二个下拉框出现时触发的方法中 手动触发第一个下拉框的焦点，使第一个下拉框出现。结果：失败，一个页面同一时间只能一个地方获取焦点。

---

• 尝试方法8（失败）：自己写一个list，数据和错误位置的下拉框的数据绑定一致，考虑到下拉框的三角样式，准备用el-tooltip，但el-tooltip只能hover，不能click，遂用el-popover,而且发现el-popover和el-tooltip都只能插到body上，遂放弃。而el-dialog无自带三角样式

---

• 尝试方法9（成功）：自己写list，自己写三角样式，数据和错误位置的下拉框的数据绑定一致，在下拉框出现时触发的方法中，显示list，下拉框隐藏时触发的方法中，隐藏list。结果：位置正确，不闪烁，滑到el-dialog边缘自动隐藏。

---