vue google translate Скачать - vue google translate Source Code Скачать

Vue-Google-Translate

Пакет Vue.js, который позволяет локализации веб -приложений.

проблема

Этот пакет был сильно вдохновлен Vue-Gtranslate.

Этот пакет обеспечивает локализацию веб -приложений, изготовленных с Vue с использованием Google Translate. По мере роста вашего веб -сайта и приложения вы можете найти необходимость расширения на других рынках за пределами вашей страны.

Если ваш целевой рынок живет по всему морю и говорит на другом языке, у вас может не быть никакого выбора, кроме как локализовать. Однако, если эти люди могут говорить на вашем языке, рассмотрите другие аспекты (культурные и/или законные), чтобы принять обоснованное решение о том, переводить ли.

Для получения более подробной информации о том, что такое локализация, и о потенциальных преимуществах, проверьте эту статью.

Демо

Чтобы просмотреть пакет в действии, проверьте его в кодовой песочнице.

Установка

 yarn add vue-google-translate
npm i vue-google-translate

Использование

//index.html

< head >
  < script type =" text/javascript " >
    function googleTranslateElementInit ( ) {
      new google . translate . TranslateElement (
        { pageLanguage : 'en' , autoDisplay : false } ,
        'app'
      ) ;
    }
    // app can be changed to the default id of your vue app available in App.vue or an id section of where
    // you need translated
  </ script >
  < script
    type =" text/javascript "
    src =" https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit "
  > </ script >
  < script
    type =" text/javascript "
    src =" https://cdn.jsdelivr.net/gh/lewis-kori/vue-google-translate@main/src/utils/translatorRegex.js "
  > </ script >
</ head >

Используйте в любом компоненте

import { Translator } from 'vue-google-translate';
< template >
< div >
< Translator />
< div >
</ template >

export default {
  components: {
    Translator
  }
}

реквизит

пройти множество стран в следующем формате

 [
  {
    code : 'en|af' ,
    title : 'Afrikaans' ,
  } ,
  {
    code : 'en|ar' ,
    title : 'Arabic' ,
  } ,
  {
    code : 'en|ko' ,
    title : 'Korean' ,
  } ,
  {
    code : 'en|lt' ,
    title : 'Lithuanian' ,
  } ,
] ;

Полный список языков по умолчанию находится в нижней части этого документа. Если вы хотите добавить новый язык, не в списке по умолчанию, передайте новый язык и дополнительное свойство flagIconUrl . Вот хорошее место для поиска этих значков. Убедитесь, что код перевода также является действительным. Вы можете получить поддерживаемые языки и их коды с этого сайта.

Кроме того, вы можете передавать альтернативный текст в качестве ключа в объекте перевода. Это полезно для доступности. Ваши индивидуальные переводы будут выглядеть примерно так.

 [
  {
    code : 'en|iw' ,
    title : 'Hebrew' ,
    flagIconUrl : 'https://flagicons.lipis.dev/flags/4x3/il.svg' ,
    altText : 'Hebrew language translation' ,
  } ,
  {
    code : 'ga|pl' ,
    title : 'Polish' ,
    flagIconUrl : 'https://flagicons.lipis.dev/flags/4x3/pl.svg' ,
    altText : 'Poland flag Icon' ,
  } ,
] ;

Дополнительное событие Emit также доступно как

< template >
  < div >
    < Translator @ on-country-click = " customEvent " : countries = " arrayOfCountries " />
  </ div >
</ template >

стиль

Если вы хотите избавиться от баннеров Google, вставьте следующий CSS в глобальный файл CSS и импортируйте этот файл в ваших файлах Main/index.js внутри src

 /* gets rid of the banner at the top of the page */
body {
  top : 0 !important ;
}
/* get rids of the banner at the bottom of the web page */
. skiptranslate {
  display : none !important ;
}

Языки по умолчанию

 [
  {
    code : 'en|af' ,
    title : 'Afrikaans' ,
  } ,
  {
    code : 'en|sq' ,
    title : 'Albanian' ,
  } ,
  {
    code : 'en|ar' ,
    title : 'Arabic' ,
  } ,
  {
    code : 'en|hy' ,
    title : 'Armenian' ,
  } ,
  {
    code : 'en|az' ,
    title : 'Azerbaijani' ,
  } ,
  {
    code : 'en|eu' ,
    title : 'Basque' ,
  } ,
  {
    code : 'en|be' ,
    title : 'Belarusian' ,
  } ,
  {
    code : 'en|bg' ,
    title : 'Bulgarian' ,
  } ,
  {
    code : 'en|ca' ,
    title : 'Catalan' ,
  } ,
  {
    code : 'en|zh-CN' ,
    title : 'Chinese (Simplified)' ,
  } ,
  {
    code : 'en|zh-TW' ,
    title : 'Chinese (Traditional)' ,
  } ,
  {
    code : 'en|hr' ,
    title : 'Croatian' ,
  } ,
  {
    code : 'en|cs' ,
    title : 'Czech' ,
  } ,

  {
    code : 'en|da' ,
    title : 'Danish' ,
  } ,
  {
    code : 'en|nl' ,
    title : 'Dutch' ,
  } ,
  {
    code : 'en|en' ,
    title : 'English' ,
  } ,
  {
    code : 'en|et' ,
    title : 'Estonian' ,
  } ,
  {
    code : 'en|tl' ,
    title : 'Filipino' ,
  } ,
  {
    code : 'en|fi' ,
    title : 'Finnish' ,
  } ,
  {
    code : 'en|fr' ,
    title : 'French' ,
  } ,

  {
    code : 'en|de' ,
    title : 'German' ,
  } ,
  {
    code : 'en|el' ,
    title : 'Greek' ,
  } ,
  {
    code : 'en|hu' ,
    title : 'Hungarian' ,
  } ,
  {
    code : 'en|id' ,
    title : 'Indonesian' ,
  } ,
  {
    code : 'en|ga' ,
    title : 'Irish' ,
  } ,
  {
    code : 'en|it' ,
    title : 'Italian' ,
  } ,
  {
    code : 'en|ja' ,
    title : 'Japanese' ,
  } ,
  {
    code : 'en|ko' ,
    title : 'Korean' ,
  } ,
  {
    code : 'en|lt' ,
    title : 'Lithuanian' ,
  } ,
  {
    code : 'en|ms' ,
    title : 'Malay' ,
  } ,
  {
    code : 'en|no' ,
    title : 'Norwegian' ,
  } ,
  {
    code : 'en|pl' ,
    title : 'Polish' ,
  } ,
  {
    code : 'en|pt' ,
    title : 'Portuguese' ,
  } ,
  {
    code : 'en|ro' ,
    title : 'Romanian' ,
  } ,
  {
    code : 'en|ru' ,
    title : 'Russian' ,
  } ,
  {
    code : 'en|es' ,
    title : 'Spanish' ,
  } ,
  {
    code : 'en|sv' ,
    title : 'Swedish' ,
  } ,
  {
    code : 'en|th' ,
    title : 'Thai' ,
  } ,
  {
    code : 'en|tr' ,
    title : 'Turkish' ,
  } ,
  {
    code : 'en|uk' ,
    title : 'Ukrainian' ,
  } ,
] ;