无法在 VueJS 中导入 Popper.js

Question

我遵循本教程是为了学习如何在我的 VueJS 应用程序中制作弹出窗口。当我编译项目时，我收到一条错误消息：[Vue warn]: Error in data(): "TypeError: _popperjs_core__WEBPACK_IMPORTED_MODULE_0__.default is undefined"我将问题追溯到BasePopover.vue组件 - 第一<script>行说import Popper from "popper.js"; 在我的应用程序中我将其更改为import Popper from "@popperjs/core";但错误仍然出现。所以我按照官方Popper.js 教程来简化事情。我通过安装npm i @popperjs/core（也尝试使用VueCLI如下图所示和 via npm install @popperjs/core --save）。这是我当前的代码：<template>  <div id="app">    <button id="button" aria-describedby="tooltip">My button</button>    <div id="tooltip" role="tooltip">My tooltip</div>  </div></template><script>//import Popper from "@popperjs/core/lib/popper";import Popper from "@popperjs/core";export default {  name: "TestView",  components: {  },  data() {          const button = document.querySelector('#button');      const tooltip = document.querySelector('#tooltip');      Popper.createPopper(button, tooltip);        return {    };  },};</script><style>#app {  font-family: "Avenir", Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  padding: 350px 0;  background-color: #C4DFD1;}</style>我不知道还能做什么。任何帮助表示赞赏！

Answer 1

import { createPopper } from '@popperjs/core';

export default {

name: "TestView",

components: {

},

data() {

return {

};

},

mounted(){

  const button = document.querySelector('#button');

  const tooltip = document.querySelector('#tooltip');

  createPopper(button, tooltip);

}

};

你应该使用 refs 而不是 id（我在这里没有使用它们以避免混淆你），这将确保没有冲突，因为你的应用程序可以有多个具有相同 Id 的元素，例如#button。当使用像 popper js 这样的 UI 库时，总是尝试将它们的代码放在 mounted 钩子中，mounted 钩子确保你定位的元素（例如 #button）在 dom 中

Answer 2

我认为你应该这样做

import { createPopper } from '@popperjs/core';

而不是像上面那样

import Popper from "@popperjs/core";

看这里：模块捆绑器

Answer 3

您必须添加this.$nextTick仅在呈现整个视图后才会运行的代码（https://vuecomponent.com/integrations/popperjs.html）

import { createPopper } from '@popperjs/core';

      

export default {

  name: "TestView",

  components: {

  },

  data() {

    return {

    };

  },

  mounted(){

    this.$nextTick(() => {

      const button = document.querySelector('#button');

      const tooltip = document.querySelector('#tooltip');

      createPopper(button, tooltip);

    });

  }

};