[英]Cannot import Popper.js in VueJS
我正在关注本教程,以了解如何在我的 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
如下图所示并通过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>
我不知道还能做什么。 任何帮助表示赞赏!
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 而不是 ids(我在这里没有使用它们以避免混淆你),这将确保没有冲突,因为你的应用程序可以有多个具有相同 Id 的元素,例如 #button。 当使用像 popper js 这样的 UI 库时,总是尝试将它们的代码放在已安装的钩子中,已安装的钩子可确保您所针对的元素(例如 #button)在 dom 中
我认为你应该这样做
import { createPopper } from '@popperjs/core';
而不是像你上面那样
import Popper from "@popperjs/core";
见这里:模块捆绑器
您必须添加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);
});
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.