Vue.js - 如何访问外部JavaScript / jQuery函数

问题描述 投票:3回答:2

我的工作在Vue.js.创建灯箱/模态分量我知道了大部分的工作,现在我想使用一些现有的功能,从被写在Javascript / jQuery的另一个文件。这是太大的在这一点上在Vue公司重写这些任务,所以我们只需要使用它们的是现在。但我如何获得访问它们挂了。我不知道我是否需要导入它像一个混合或不同的东西。

由于代码现在,我得到的错误:[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的底部,然后只导入这些功能名称作为Vue的成分混入。但是,抱怨该文件中的default字。

javascript vue.js
2个回答
1
投票

您可以通过计算螺旋桨访问收藏夹: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;
  },
},
...

1
投票

你应该能够只是将其添加到数据属性:

import lightbox from '../../../legacy/static/js/lightbox';

export default {
  name: "AddToCartModal",
  components: {.....},
  data: () => ({
    lightbox,
  }),
}

你不应该包括它的混入,除非它是一个实际的VUE混入。它添加到数据的道具应该让你在模板中引用它。

© www.soinside.com 2019 - 2024. All rights reserved.