vue3-ts-vite：Google 多语言调试 / 网页中插入谷歌翻译元素 / 翻译

2023-09-26 86

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue3-ts-vite：Google 多语言调试 / 网页中插入谷歌翻译元素 / 翻译

一、实现目标

969af9c164197013a6ca113be1ef3fa6_0399c5df0db04acb941ca4d674fc440f.png

51f17c6059629c2481d2c15c3a75ecb4_8dd5e0ca239c4103aee46c312b549f66.png

二、代码实现

2.1、项目vue3 - ts - vite

2.2、index.html 引入文件

<script>
  window.onload = function () {
      const script = document.createElement('SCRIPT')
      script.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'
      script.onerror = () => {
          console.log('google load error')
          window.googleScriptLoadError = false
      }
      document.head.appendChild(script)
  }
</script>

2.3、src/views/translate/index.vue

<template>
  <div class="container">
    <div id="google_translate_element" style="position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7"></div>
    <div>google_translate_element</div>
  </div>
</template>
<script setup lang="ts" name="keepalive">
const translate = () => {
  new google.translate.TranslateElement(
    {
        // pageLanguage: 'zh-CN',
        // 需要翻译的语言，比如你只需要翻译成英语，这里就只写en
        includedLanguages: 'en,zh-CN,hr,cs,da,nl,fr,de,el,iw,hu,ga,it,ja,ko,pt,ro,ru,sr,es',
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
        // 自动显示翻译横幅，就是翻译后顶部出现的那个
        autoDisplay: true,
        // 还有些其他参数
    },
    'google_translate_element' // 触发元素的id
  );
}
setTimeout(()=>{
  translate()
},3000)
</script>
<style scoped lang="less">
</style>

2.4、测试成功

三、代码集成在一个页面

<template>
  <div class="container">
    <div id="google_translate_element" style="position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7"></div>
    <div>google_translate_element</div>
  </div>
</template>
<script setup lang="ts" name="keepalive">
// 加载script
const loadScript = () => {
  let script = document.createElement('script')
  script.setAttribute("language", "javascript")
  script.setAttribute("type", "text/javascript")
  script.setAttribute("src", 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit')
  document.getElementsByTagName('head')[0].appendChild(script)
  script.onload = script.onreadystatechange = ((res:any)=>{
    check()
  })
}
loadScript()
// 检测是否获取到google
const check = () => {
  console.log("10", google.translate.TranslateElement)
  if(!google.translate.TranslateElement){
    setTimeout(()=>{
      check()
    }, 200)
  } else {
    translate()
  }
}
// 翻译
const translate = () => {
  new google.translate.TranslateElement(
    {
        // pageLanguage: 'zh-CN',
        // 需要翻译的语言，比如你只需要翻译成英语，这里就只写en
        includedLanguages: 'en,zh-CN,hr,cs,da,nl,fr,de,el,iw,hu,ga,it,ja,ko,pt,ro,ru,sr,es',
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
        // 自动显示翻译横幅，就是翻译后顶部出现的那个
        autoDisplay: true,
        // 还有些其他参数
    },
    'google_translate_element' // 触发元素的id
  )
}
</script>
<style scoped lang="less">
</style>