javascript - 带有自定义类的语义 UI 弹出箭头位置

Question

我正在为弹出窗口使用单个 div，并动态共享内容。我实现了自定义类以根据触发元素的内容更改边框颜色。

当类改变时箭头无法正确定位，但在随后的揭示中，在不改变类的情况下，箭头是正确的。查看屏幕截图。

1. 左图:第一次出现时带有绿色边框，“绿色箭头”大概在默认位置
2. 中间:第二次出现，带绿色边框，“绿色箭头”在正确位置指向目标
3. 右:下一个显示，红色边框触发，“红色箭头”再次出现在默认(不正确)位置:

随后在红色目标上显示会导致正确的箭头定位。变为绿色或黄色会再次破坏它。

当类没有改变时，这似乎不是问题。

您可以提供的任何见解都将非常有帮助。

这些是我的类定义:

.q-tip .box-success {
    border-color: rgb(96,173,93);
    box-shadow: 0 2px 4px 0 rgb(96,173,93,.12), 0 2px 10px 0 rgb(96,173,93,.15) !important;
  }

  .q-tip .box-success:before {
    -webkit-box-shadow: 1px 1px 0px 0px rgb(96,173,93,1);
            box-shadow: 1px 1px 0px 0px rgb(96,173,93,1);
  }

  .q-tip .box-caution {
    border-color: rgb(254,231,168);
    box-shadow: 0 2px 4px 0 rgb(254,231,168,.12), 0 2px 10px 0 rgb(254,231,168,.15) !important;
  }

  .q-tip .box-caution:before {
    -webkit-box-shadow: 1px 1px 0px 0px rgb(254,231,168,1);
            box-shadow: 1px 1px 0px 0px rgb(254,231,168,1);
  }

  .q-tip .box-danger {
    border-color: rgb(166,7,30);
    box-shadow: 0 2px 4px 0 rgb(166,7,30,.12), 0 2px 10px 0 rgb(166,7,30,.15) !important;
  }

  .q-tip .box-danger:before {
    -webkit-box-shadow: 1px 1px 0px 0px rgb(166,7,30,1);
            box-shadow: 1px 1px 0px 0px rgb(166,7,30,1);
  }

更新
同样的现象发生在滚下然后回到目标时，即第一次展示，坏箭，第二次展示，好箭。

谢谢!

Answer 1

此问题已解决。

错误的配置依赖于 Vue.js动态 :class 属性绑定(bind)，根据触发元素的值更改附加到语义弹出 div 的类:

<div id="qt-default" 
     :class="'box-'+status" 
     class="ui wide popup" 
     data-variation="very wide"> 

这就是行不通——不知道为什么。在逐步执行语义代码后，类名更改似乎在弹出动画之前始终如一地应用，但定位算法可能会影响上游。我没有继续详细研究这个问题，而是假设解决方案位于弹出组件的事件处理 API 中。

解决方案是更改弹出窗口中的类 onShow触发的处理程序 当弹出窗口被“请求”时(当 show 被调用时)但在它可见之前:

  conf.onShow = (e) => {
    const elem = document.getElementById('qt-default')
    elem.classList.remove('box-success','box-caution','box-danger')
    elem.classList.add('box-'+status)
  }
  $(conf.trigger).popup(conf)
  $(conf.trigger).popup('show')