如何在 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;
};