记录一次使用 Popper.js 编写弹框遇到的问题

当前使用的 vue-popperjs 组件是基于 popper.js 开发的

使用方法

1. 安装 npm i vue-popperjs
2. 导入使用

<template>
  <popper
    trigger="clickToOpen"
    :options="{
          
   
      placement: top,
      modifiers: {
          
    offset: {
          
    offset: 0,10px } }
    }">
    <div class="popper">
      Popper Content
    </div>
 
    <button slot="reference">
      Reference Element
    </button>
  </popper>
</template>
 
<script>
  import Popper from vue-popperjs;
  import vue-popperjs/dist/vue-popper.css;
 
  export default {
          
   
    components: {
          
   
      popper: Popper
    },
  }
</script>

修改配置

如果你需要修改弹框的偏移量需要通过 options 传值进去, 你大部分需要修改的属性可能都需要 options.modifiers 传入

:options="{
          
   
        placement: bottom,
        modifiers: {
          
   
          offset: {
          
    offset: 73px,-5px },
          computeStyle: {
          
   
            gpuAcceleration: false // 用2D变换。
          }
        }
      }"

解释:

gpuAcceleration 如果为true Popper将在高PPI显示上使用3D transform，在低PPI显示上使用 2D transform; 如果为 false的话将会使用 position 定位; 这个属性是用来定位弹框出现的位置的

我遇到的问题

当我使用 vue transition 给这个弹框添加一个 transform 动画时, 导致会出现一个不正常的现象, 弹框的位置会先在理想位置的下方出现, 进而回弹到正确位置 原因是因为 transform 会让元素 Popper-wrapper 具有 position:relative 的性质, 导致内容盒子的定位出现差错

动画代码(element-ui 的内置动画)

.popper-wrapper.zoom-in-top-enter-active,
.popper-wrapper.zoom-in-top-leave-active {
          
   
  transform: scaleY(1);
  opacity: 1;
  transition: transform 300ms cubic-bezier(0.23, 1, 0.72, 1),
    opacity 300ms cubic-bezier(0.23, 1, 0.72, 1);
  transform-origin: center top;
}

.popper-wrapper.zoom-in-top-leave-to,
.popper-wrapper.zoom-in-top-enter {
          
   
  transform: scaleY(0);
  opacity: 0;
}