Question

我想将Google翻译小部件添加到我的页面。当我尝试将其添加到这样的普通网页中时，它起作用了：

<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和webpack。

在我的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');
}
}

Answer 1

将Google翻译功能移至“方法”。在此处应放置所有函数，并在需要时在模板或已挂载的地方调用它们：

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>

Answer 2

功能googleTranslateElementInit供Google翻译窗口小部件使用，因此您必须使其作用域可访问。这意味着您应该具有以下内容：

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>

无法将外部JavaScript添加到Vue.js页面

2 个答案: