亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

無法在 VueJS 中導入 Popper.js

無法在 VueJS 中導入 Popper.js

臨摹微笑 2023-02-17 10:29:51
我遵循本教程是為了學習如何在我的 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>我不知道還能做什么。任何幫助表示贊賞!
查看完整描述

3 回答

?
莫回無

TA貢獻1865條經驗 獲得超7個贊

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 中


查看完整回答
反對 回復 2023-02-17
?
侃侃爾雅

TA貢獻1801條經驗 獲得超16個贊

我認為你應該這樣做

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

而不是像上面那樣

import Popper from "@popperjs/core";

看這里:模塊捆綁器


查看完整回答
反對 回復 2023-02-17
?
拉莫斯之舞

TA貢獻1820條經驗 獲得超10個贊

您必須添加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);

    });

  }

};


查看完整回答
反對 回復 2023-02-17
  • 3 回答
  • 0 關注
  • 366 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號