[英]Vue.js - how to access external Javascript/Jquery functions
我正在努力在Vue.js中創建一個燈箱/模態組件。 我已經得到它主要工作,現在我想使用另一個用Javascript / Jquery編寫的文件中的一些現有函數。 這時在Vue中重寫這些是太大的任務,所以我們現在只需要按原樣使用它們。 但我已經掛斷了如何訪問它們。 我不確定我是否需要像mixin或其他東西那樣導入它。
由於代碼現在,我收到錯誤: [Vue warn]: Property or method "lightbox" is not defined on the instance but referenced during render.
以下是我的Vue組件的相關代碼:
<template>
...
<i
class="fa fa-info-circle"
name="moreInfo"
aria-hidden="true"
@click="lightbox.showBasketHelpLightbox('servicePlan', true, 3)"
/>
...
</template>
<script>
...
import lightbox from '../../../legacy/static/js/lightbox';
export default {
name: "AddToCartModal",
components: {.....},
mixins: [....., lightbox],
....
}
</script>
以及來自lightbox.js的相關代碼
const accessories = [];
let selectedServicePlanSku = selectedServicePlanSku || undefined;
var APPLICATION_STATE = APPLICATION_STATE || (function () {
try {
return JSON.parse(__VUEX_STATE__);
} catch (e) { }
return {uri: {}, machine: {}};
})();
var staticURL = staticURL || APPLICATION_STATE.uri.application;
var staticMediaURL = staticMediaURL || APPLICATION_STATE.uri.static;
var INTERNAL = INTERNAL || APPLICATION_STATE.machine.internal ? "true" : "false";
var KIOSK = KIOSK || APPLICATION_STATE.machine.kiosk ? "true" : "false";
// whole bunch of other functions
function showBasketHelpLightbox(content, returnToCartLightbox, additionalParam, returnToWishlistLightbox){
let helpTextCategoryId;
if (content === "rebates") {
helpTextCategoryId = 13170;
} else if (content === "projects") {
helpTextCategoryId = 1508847718230;
} else if (content === "servicePlan") {
if(additionalParam === 3){
helpTextCategoryId = 12811;
} else if (additionalParam === 4){
helpTextCategoryId = 12812;
} else if (additionalParam === 6){
helpTextCategoryId = 12813;
} else if (additionalParam === 8){
helpTextCategoryId = 12927;
} else if (additionalParam === 10 || additionalParam === 12 || additionalParam === 14
|| additionalParam === 18 || additionalParam === 20 || additionalParam === 22){
helpTextCategoryId = 12814;
} else if (additionalParam === 16){
helpTextCategoryId = 12815;
} else if(additionalParam === 24){
helpTextCategoryId = 1483373312360;
} else if(additionalParam === 26) {
helpTextCategoryId = 1483373312361;
}
}
closeBasketLightboxPopUp();
$(document).ready(function(){
$("div#basketHelpLightbox-panel").show(function(){
$("#basketHelpLightbox-panel").fadeIn(300);
});
$("div#basketHelpLightbox").fadeTo(300, .6);
$("div#skipTab").click(function(){
$("#basketHelpLightbox, #basketHelpLightbox-panel").fadeOut(300);
});
});
jQuery("div#basketHelpLightboxPopUp").empty();
jQuery("div#basketHelpLightboxPopUp").show();
if(content === "learnMore"){
let lightboxmsg = '<div id="basketHelpLightboxPopUp"" class="" style="display: block;">';
lightboxmsg += '<div id="popupMainDiv">';
lightboxmsg += '<div id="flexibleLightboxPopUp"> <center> <span id="descriptiveTitle"> text </span> <span id="skipTabitemTempDisclaimFlexLightbox" onclick="closeBasketHelpLightbox(' + returnToCartLightbox + ', ' + returnToWishlistLightbox + ')" class="btn_SF btnClose gradient rightFloat" tabindex="0" onkeypress="checkClickOnEnterEvent(event, this);"><strong>X</strong></span> </center></div>';
lightboxmsg += ' <div id="bodyOfPopup" style="padding:5px;z-index:5501;"><div style="padding:10px;">more text</div></div></div></div>';
jQuery('#basketHelpLightboxPopUp').replaceWith(lightboxmsg);
} else{
let text = '<div id="basketHelpLightboxheaderPopUp">';
text += '<span id="descriptiveTitle">Additional Information</span>';
text += '<a href="javascript:void(0)" onclick="closeBasketHelpLightbox(' + returnToCartLightbox + ', ' + returnToWishlistLightbox + ');return false;" class="btn_SF btnClose gradient rightFloat"><strong>X</strong></a>';
text += '</div>';
text += "<iframe scrolling='auto' id='basketHelpLightboxIframe' src='content.html?cid=" + helpTextCategoryId + "'></iframe>";
jQuery('#basketHelpLightboxPopUp').append(text);
jQuery('#basketHelpLightboxPopUp .btnClose').focus();
$(document).ready(function(){
$("div#basketHelpLightbox-panel").show(function(){
$("#basketHelpLightbox-panel").fadeIn(300);
$("div#basketHelpLightbox").fadeTo(300, .6);
});
$("div#basketHelpLightbox").fadeTo(300, .6);
$("div#skipTab").click(function(){
$("#basketHelpLightbox, #basketHelpLightbox-panel").fadeOut(300);
});
});
jQuery("div#basketHelpLightboxPopUp").show();
}
}
function closeBasketHelpLightbox(returnToCartLightbox, returnToWishlistLightbox){
jQuery("div#basketHelpLightboxPopUp").hide();
$("#basketHelpLightbox, #basketHelpLightbox-panel").fadeOut(300);
if(returnToCartLightbox){
showCartLightbox();
} else if (returnToWishlistLightbox) {
showWishlistLightbox();
}
}
// lots more functions
我嘗試將export default {showBasketHelpLightbox, closeBasketHelpLightbox}
到lightbox.js的底部,然后將這些函數名稱作為mixin導入到Vue組件中。 但它抱怨該文件中的default
單詞。
您可以通過computed-prop訪問lightbox: https : //jsfiddle.net/L3fjdwuh/
// lodash.js example
new Vue({
el: '#app',
data: {
arr: [1,2,3,4],
},
computed: {
LODASH() {
return _;
},
},
});
UPD(評論):
// in your legacy/static/js/lightbox
export default {
showBasketHelpLightbox,
};
// in your component
import { default as lightbox } from '...';
...
computed: {
lightbox() {
return lightbox;
},
},
...
您應該只需將其添加到數據屬性:
import lightbox from '../../../legacy/static/js/lightbox';
export default {
name: "AddToCartModal",
components: {.....},
data: () => ({
lightbox,
}),
}
你不應該把它包含在mixins中,除非它是一個真正的vue mixin。 將其添加到數據道具應該允許您在模板中引用它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.