我想重用我在vue.js组件中做过的javascript库。
js库的工作方式如下：
该库提供了一个构造函数，因此需要一个具有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为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)
}
};
在你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将无法正常工作。您将需要通过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>
现在，您可以将a作为对象直接传递element给perpetual_calendaras，而不必使用document.querySelector：
pCalendar.prototype.initializeElement = function (element) {
this.element = element.
return true;
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句