Arco Design Vue 组件库中同时使用<a-popover>和<a-tooltip>出现闪动问题

410 阅读1分钟

原因:tooltip 组件和 Popover 组件都使用了相对定位来确定它们的位置,可能会导致它们之间的定位冲突。

鼠标移入时展示:

1689329147857.jpg

点击按钮时展示:(这里的明显往左移动了一段距离,鼠标移出再移入时再点击又显示正常了)

1689329368818.png

这里题主使用样式解决了:

force-render={true}    加了这条属性貌似没啥作用

      <a-popover 
    trigger="click"
    position="br"
    content-class="FilterColumn"
    force-render={true}
    @popup-visible-change="handleShow"
  >
    <a-tooltip content="列设置" position="tr" class="aTooltip" arrow-class="aTooltipArrow">
      <icon-settings size="16" />
    </a-tooltip>
    <template #content>
      <div class="">
        需要展示的内容。。。。。。
      </div>
    </template>
  </a-popover >
 
 
<style lang="less">
  .FilterColumn{
    height: 300px;
    width: 200px;
    overflow: auto;
    .title{
      border-bottom: 1px solid #dcdfe6;
      padding-bottom: 8px;
    }
  }
  .aTooltip{
    width: 66px;
    left: auto !important;
    right:25px;
  }
  .aTooltipArrow{
    width: 10px;
    left: auto !important;
    right:5px;
  }
</style>
 
<style scoped>
  .arco-checkbox{
    margin: 5px 0;
  }
  .arco-checkbox-group{
    display: flex;
    flex-direction: column;
  }
</style>

解决完后的展示:

1689329407077.jpg