Vue.js-如何访问外部Javascript / Jquery函数

我正在Vue.js中创建灯箱/模式组件.我已经大部分工作了,现在我想使用另一个用Javascript / Jquery编写的文件中的现有功能.此时,要在Vue中重写它们是一项艰巨的任务,因此我们只需要立即使用它们即可.但是我挂在如何访问它们上.我不确定是否需要像mixin或其他东西导入它.@H_502_2@

就像现在的代码一样,我收到错误消息：[Vue警告]：属性或方法“ lightBox”未在实例上定义,但在渲染期间被引用.@H_502_2@

这是我的Vue组件中的相关代码：@H_502_2@

@H_502_2@

<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中的相关代码@H_502_2@

@H_502_2@

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

我确实尝试将导出默认的{showBasketHelpLightBox,closeBasketHelpLightBox}添加到lightBox.js的底部,然后将这些函数名称作为mixins导入Vue组件中.但是它抱怨该文件中的默认单词.

最佳答案

您可以通过计算属性访问灯箱：
https://jsfiddle.net/L3fjdwuh/@H_502_2@

@H_502_2@

// lodash.js example
new Vue({
  el: '#app',data: {
    arr: [1,2,3,4],},computed: {
    LODASH() {
        return _;
    },});

UPD(通过评论)：@H_502_2@

@H_502_2@

// in your legacy/static/js/lightBox
export default {
  showBasketHelpLightBox,};


// in your component
import { default as lightBox } from '...';

...
computed: {
  lightBox() {
    return lightBox;
  },...

Vue.js-如何访问外部Javascript / Jquery函数

猜你在找的jQuery相关文章