zoukankan      html  css  js  c++  java
  • 记一次诡异的bug

    问题描述: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边缘自动隐藏。

  • 相关阅读:
    【JMeter_22】JMeter逻辑控制器__录制控制器<Recording Controller>
    【JMeter_21】JMeter逻辑控制器__模块控制器<Module Controller>
    【JMeter_20】JMeter逻辑控制器__事务控制器<Transaction Controller>
    【JMeter_19】JMeter逻辑控制器__简单控制器<Simple Controller>
    【JMeter_18】JMeter逻辑控制器__吞吐量控制器<Throughput Controller>
    【JMeter_17】JMeter逻辑控制器__随机顺序控制器<Random Order Controller>
    【JMeter_16】JMeter逻辑控制器__随机控制器<Random Controller>
    【JMeter_15】JMeter逻辑控制器__仅一次控制器<Once Only Controller>
    Golang错误和异常处理的正确姿势
    用beego开发服务端应用
  • 原文地址:https://www.cnblogs.com/yangAL/p/13022451.html
Copyright © 2011-2022 走看看