标签：vue top transform 弹框 popper 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 文档

标签：vue,top,transform,弹框,popper,Popper,js
来源： https://www.cnblogs.com/shiazhen/p/16294341.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。