如何在 vue.js 組件中使用導入的 javascript 庫構造函數？

Question

我想重用我前段時間在 vue.js 組件中所做的 javascript 庫。

js 庫是這樣工作的：

1. 帶標簽的主腳本的簡單參考
2. css加載

該庫提供了一個構造函數，所以需要的是一個帶有 ID 的元素，並且要在 javascript 中初始化組件，我只需要：

var divelement = new pCalendar("#divelement", {
    ... various options
});

我正在嘗試創建一個能夠執行相同操作的 .vue 組件（加載 js 庫、init css、帶有構造函數和選項的 init 組件），但我不知道什么是正確的方法。

這就是我正在做的事情，但在這種情況下，我收到一個錯誤，因為 pCalendar 未被識別為構造函數。

<template>
    <div id="myelement"></div>
</template>
<script>
    import perpetual_calendar from '../../../assets/js/perpetual-calendar/perpetual_calendar.js'
  export default {
    data () {
      return {
        myelement: '',
      }
    },
    mounted(){
          var myelement = new pCalendar("#myelement",{
        ... various options
});        
      } ,  

 }
</script>
<style lang="css">
    @import '../../../assets/js/perpetual-calendar/pcalendar_style.css';
</style>

編輯 1 （回答@Daniyal Lukmanov 問題）：

perpetual_calendar.js 看起來像這樣：

var pCalendar = function (element, options) {
    this.options = {};
    this.initializeElement(element);
    this.initializeOptions(options || {});
    this._create();
}
...

pCalendar.prototype.initializeElement = function (element) {
    var canCreate = false;
    if (typeof HTMLElement !== "undefined" && element instanceof HTMLElement) {
        this.element = element;
        canCreate = true;
    } else if (typeof element === "string") {
        this.element = document.querySelector(element);
        if (this.element) {
            canCreate = true;
        } else {
            canCreate = false;
        }
    } else {
        canCreate = false;
    }

    if (canCreate === true) {
        if (document.getElementsByName(this.element.id+"_store").length!=0) {
            canCreate = false;
        }    
    }
    return canCreate;
};

and so on ...

編輯 2 ：這是 initializeOptions 函數，即拋出 TypeError: "this.element is null" 錯誤。

pCalendar.prototype.initializeOptions = function (options) {
    // begin hardcoded options, don't touch!!!
    this.options['objectId'] = this.element.id;
    this.options['firstMonth'] = null;
       (... various options)
    // end hardcoded options

    for (var key in this.defaultOptions) {
       ( ... loop to load options - default one or defined by user in the constructor)
    }
};

Answer 1

在perpetual_calendar.js文件中，您需要export pCalendar才能使用它。 在perpetual_calendar.js文件的底部，添加：

export {
  pCalendar
};

現在，您應該可以像這樣導入和使用它：

import { pCalendar } from './perpetual_calendar.js';
let calendar = new pCalendar({ /* parameters*/ });

編輯添加initializeElement方法后

代碼中有幾處錯誤：

1. 似乎並非initializeElement所有代碼路徑都設置了this.element變量。
2. document.querySelector在 vue 中不起作用。 您需要通過this.$refs變量傳遞元素：

<template>
    <div id="myelement" ref="myelement"></div>
</template>
<script>
    import perpetual_calendar from '../../../assets/js/perpetual-calendar/perpetual_calendar.js'
  export default {
    data () {
      return {
        myelement: '',
      }
    },
    mounted(){
          var myelement = new pCalendar(this.$refs["myelement"], { /* various options */ });        
    }

 }
</script>
<style lang="css">
    @import '../../../assets/js/perpetual-calendar/pcalendar_style.css';
</style>

現在，您可以將element作為對象直接傳遞給perpetual_calendar ，而不必使用document.querySelector ：

pCalendar.prototype.initializeElement = function (element) {
    this.element = element.
    return true;
};