标签: popper.js

我正在尝试编辑下拉元素的位置，但我似乎无法让它工作。我正在将 Bootstrap 4 与 Popper.js 一起使用，我只是在页面中添加了一个没有任何替代样式的默认下拉列表，但它会自动将以下内容添加到下拉列表的 style 属性中：

position: absolute;
transform: translate3d(4px, 90px, 0px);
top: 0px;
left: 0px;
will-change: transform;

现在我想更改转换后的位置，我尝试使用自定义样式并添加 '!important' 但到目前为止没有结果。

我的触发器+下拉列表：

<a href="#" class="account_nav_link" role="button" id="dropdownAccount" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <i class="account_nav_icon fab fa-accessible-icon"></i>                 
</a>

<div class="dropdown-menu dropdown_account" id="dropdownAccount-menu" aria-labelledby="dropdownAccount">
<span class="dropdown_arrow"></span>
   <div class="dropdown_wrap">
      <ul class="dropdown_nav">
         <li class="content_item"></li>
         <li class="content_item"></li>
      </ul>
   </div>
</div>

我还使用我在 github 上找到的 JS 尝试了以下解决方案，但也没有任何结果。任何人都可以帮我解决这个问题吗？

var reference = $('#dropdownAccount');
    var popper = $('#dropdownAccount-menu');
    var anotherPopper = new Popper(
        reference,
        popper,
        {
            modifiers: {
                computeStyle: {enabled: …

当我npm update为现有的 React 项目放置命令时，会显示：

npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

我正在使用Popper.js在我的页面上放置各种弹出窗口。本质上，我试图在一个小弹出窗口中显示所有文件输入字段，因为正常、丑陋、不可自定义的 HTML 文件输入会破坏页面的布局。

我通过以下方式让它工作得相当好：

1. 使用 JQuery迭代每个元素input[type=file]并查找关联的按钮元素，
2. 使用以下命令为每个文件输入创建一个新的 Popper 实例：

const popper = createPopper(buttonElement, fileInputElement, {
  // Various options including a modifier that adjusts the offset of the popover
})

3. 将“单击”事件处理程序附加到切换弹出窗口可见性的按钮元素。

然而，我在 Popper.js 文档（特别是“教程”）中指出，每当隐藏弹出窗口时我应该销毁每个 Popper 实例，并在显示弹出窗口时重建每个 Popper 实例；这样，Popper.js 就不会不断更新隐藏元素的位置。但由于我不只有一个弹出窗口，因此我并没有真正跟踪 Popper 实例，因此不能只调用.destroy()它们。

一种可能的解决方案是，是否有一种方法可以基于 popover 元素（在本例中为该元素input[type=file]）访问 Popper 实例。有没有办法做到这一点？我有时在互联网上看到过这种想法；例如，有一页似乎表明我可以fileInputElement.popperInstance访问 Popper 实例。不幸的是，这不起作用（也没有起作用fileInputElement._popperInstance）。

有任何想法吗？

在使用NPM安装Bootstrap 4(最新测试版)时:`npm install bootstrap@4.0.0-beta,我收到此消息:

+-- bootstrap@4.0.0-beta
+-- font-awesome@4.7.0
+-- UNMET PEER DEPENDENCY jquery@>=3.0.0
`-- UNMET PEER DEPENDENCY popper.js@^1.11.0

npm WARN bootstrap@4.0.0-beta requires a peer of jquery@>=3.0.0 but none was installed.
npm WARN bootstrap@4.0.0-beta requires a peer of popper.js@^1.11.0 but none was installed.
npm WARN b4starter@1.0.0 No repository field.

要删除此警告: npm i --save jquery popper.js

但是,为什么第一个命令没有一次安装Bootstrap 4,Jquery和Popper.js？通常NPM应该安装依赖!!

有解释吗？

谢谢

我正在使用Bootstrap 4下拉菜单,大约有18个下拉项目.由于高度太高,popper.js会自动将下拉列表从其原始位置移动到屏幕顶部.我该如何防止这种情况？我总是希望下拉菜单显示在切换它的按钮下方.谢谢

按要求发布代码 - (我正在使用C#,但代码应传达我希望的观点)

             <div class="dropdown">
                <span class="p-2 text-uppercase font-weight-semi-bold pointer dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    @topMenu.Name
                </span>
                <div class="dropdown-menu"  style="font-size:0.9rem" aria-labelledby="dropdownMenuButton">
                    @foreach (var subMenu in topMenu.SubMenu)
                    {
                        <a class="dropdown-item" href="@Url.Content("~/" + subMenu.Url)">@subMenu.Name</a>

                    }
                </div>
            </div>

我正在尝试将 Popper.js 设置为使用 angular 5，而无需引导程序或 jquery。我尝试按照此https://github.com/FezVrasta/popper.js/#react-vuejs-angular-angularjs-emberjs-etc-integration 进行操作，但这并不是角度应用程序的 A 到 B 点描述。

我通过 npm 安装了 Popper.js

npm install popper.js --save

然后我选择将 esm 模块捆绑到我的 angular-cli 脚本中

"scripts": [
                   (...)
        "../node_modules/popper.js/dist/esm/popper.js"
      ],

由于 esm/popper.js 导出 Popper 变量如下。

var Popper = function () {

我想我会像这样在我的角度模板中声明 popper 变量

declare var Popper;

唉，我运气不好。

有人对如何正确实现这一点有想法吗？

我正在学习使用此命令安装 popper: 的教程 npm install popper --save。但是当我尝试它时收到此错误消息：致命错误 - 检测到 cygheap base mismatch - 0x13A1410/0x13D1410

所以我搜索找到这个库的github页面并找到了这个页面：https : //github.com/FezVrasta/popper.js但我看到它建议使用这个命令来安装它：npm install popper.js --save它与我的教程不同。现在我想知道这些对图书馆有什么不同吗？如果它们不同，那么poppenot的 github 页面popper.js是什么？

我还必须提到，我没有说 python popper 库。我想要 .js 使用的 javascript 版本bootstrap4。

我正在使用 React cytoscape 库。尝试集成到 cytoscape 的 popper 插件。popper“content”属性期望返回一个 div 元素，描述附加到“body”元素的 popper。由于上下文提供者位于根元素下，因此该 div 不能成为该上下文的使用者。如何在根外部定义的 popper 元素中使用相同的上下文。

使用 cytoscape 的 React 组件，但 cytoscape 的插件是纯 js 的。

<body>
 <div id=root>
  <Style_Provider>
      .
      .
      .
  </Style_Provider>
 </div>
 <div id="popper">
    // need to access to style context
 </div>
</body>

我正在使用 material-ui (v 4.9.5)Popper作为上面的“弹出”菜单。它anchorElement是ListItem在左侧选择的。我希望Popper与主菜单的顶部齐平。但是它看起来短了 5px。

如果我查看 Chrome Dev Tools，我会看到以下内容，参数中的5px值translate3d就是问题所在。如果我将值更改为0pxDev Tools 中的值，问题就解决了。

我的问题是如何通过代码实现这一点。我已经尝试了以下modifiers用于底层popper.js 的方法，但它什么也没做。

 <Popper
    modifiers={{
        offset: {
         enabled: true,
         offset: '-5, 0'
    },
    }}
    className={globalMenuStyle.popperStyle}
    placement="right-end"
    open={isPopoverOpen}
    onClose={handleHidingGlobalMenu}
    anchorEl={anchorElement}>
    {popoverMenuItems}
 </Popper>

更奇怪的是，如果我尝试这样的事情并尝试 x 轴，modifiers它会沿着 x 轴移动。为什么 x 轴有效而 y 轴无效？

modifiers={{
   offset: {
    enabled: true,
    offset: '0, 50'
},
}}

我的页面中有多个下拉菜单。位于导航内部工作正常，但页面内部不起作用

位于导航内

页面内部

问题是什么？谢谢你。