Невозможно добавить внешний javascript на страницу vuejs - PullRequest
Новая
       1

Невозможно добавить внешний javascript на страницу vuejs

0 голосов
/ 23 октября 2018

Я хочу добавить виджет google translate на мою страницу.Когда я пытаюсь добавить его на обычную веб-страницу, например, это работает: 

<div class="google_translate" id="google_translate_element"></div>

<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
}

Но когда я перемещаю его в свой проект VueJs, он больше не работает.Я подумал, что это может быть из-за того, что внешний скрипт, который я добавил выше, не работает, поэтому я создал локальный javascript и пытаюсь связать его со своей страницей.Но это тоже не работа.Так что же я тут не так сделал?Я использую VueJS и веб-пакет для своего приложения.

На своей странице VueJS я поместил функцию googleTranslateElementInit в mounted () и продолжаю вызывать внешний скрипт, как на обычной странице 

mounted () {

setTimeout(function (){ 
  $('.article-list').masonry({
    columnWidth: 208,
    itemSelector: '.article-box',
    fitWidth: true
  });
},0)
$("#menu-pagetop").on("click", function () {
  $('body,html').animate({
    scrollTop: 0
  }, 800);
  return false;
});
window.onscroll = function () {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > $("#menu").offset().top || document.documentElement.scrollTop > $("#menu").offset().top) {
    $("#menu-pagetop").is(".shown") || $("#menu-pagetop").stop().fadeIn(180).addClass("shown")
  } else {
    $("#menu-pagetop").is(".shown") && $("#menu-pagetop").stop().fadeOut(180).removeClass("shown");
  }
}
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
}
}

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

функция googleTranslateElementInit предназначена для использования виджетом гугл-перевода, поэтому вы должны сделать его доступным.Это означает, что у вас должно быть что-то вроде ниже: 

mounted () {
  window.googleTranslateElementInit = function () {
    new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
  }
},

Вот пример кода, он показывает некоторую перекрестную ошибку источника.Но это работает на моем местном 

new Vue({
  el: '#example',
  mounted () {
    window.googleTranslateElementInit = function () {
      new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Example</title>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  </head>
  <body>
    <div id="example">
      <div id="google_translate_element"></div>
    </div>

  </body>
</html>
0 голосов
/ 23 октября 2018

Переместите функцию Google Translate на «методы».Здесь вы должны поместить все свои функции и вызывать их, когда они вам нужны, либо в шаблоне, либо в монтированном виде:

https://jsfiddle.net/eywraw8t/429588/ 

new Vue({
  el: "#app",
  data: {
  },
  methods: {
    googleTranslateElementInit: function() {
      new google.translate.TranslateElement({
        pageLanguage: 'en'
      }, 'google_translate_element');
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.googleTranslateElementInit();
    });
  }
})
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<div id="app">
  <div class="google_translate" id="google_translate_element">Translate</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...