javascript - 如何在 vue.js 组件中使用导入的 javascript 库构造函数？

Question

我想重用我前段时间在 vue.js 组件中做的一个 javascript 库。

js 库的工作方式如下:

带有标签

的主脚本的简单引用

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方法

代码中有几处错误:

似乎并非initializeElement 的所有代码路径设置this.element多变的。

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;
};