带有自定义类的语义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属性绑定，根据触发元素的值来更改附加到语义弹出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')