记录一次使用 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 定位; 这个属性是用来定位弹框出现的位置的
关于 gpuAcceleration 属性的解释

我遇到的问题

当我使用 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;
}

popper.js 文档