vue google translate Unduh - vue google translate Sumber Code Unduh

Vue-google-translate

Paket Vue.js yang memungkinkan pelokalan aplikasi web.

Daftar isi

Masalah
Demo
Instalasi
Penggunaan
- Alat peraga
Bahasa default
Lisensi

masalah

Paket ini sangat terinspirasi oleh vue-gtranslate.

Paket ini memungkinkan lokalisasi aplikasi web yang dibuat dengan VUE dengan menggunakan Google Translate. Saat situs web dan aplikasi Anda tumbuh, Anda mungkin menemukan kebutuhan untuk memperluas ke pasar lain di luar negara asal Anda.

Jika target pasar Anda hidup di seberang laut dan berbicara bahasa yang berbeda, Anda mungkin tidak punya pilihan selain melokalisasi. Namun, jika orang -orang itu dapat berbicara bahasa Anda, pertimbangkan aspek lain (budaya dan/atau hukum) untuk membuat keputusan berdasarkan informasi tentang apakah akan menerjemahkan.

Untuk detail lebih lanjut tentang apa itu lokalisasi dan potensi manfaatnya, checkout artikel ini.

Demo

Untuk melihat paket yang sedang beraksi, periksa di Code Sandbox.

Instalasi

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

Penggunaan

//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 >

Gunakan dalam komponen apa pun

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

export default {
  components: {
    Translator
  }
}

alat peraga

melewati berbagai negara dalam format berikut

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

Daftar lengkap bahasa default ada di bagian bawah dokumen ini. Jika Anda ingin menambahkan bahasa baru yang tidak ada dalam daftar default, berikan bahasa baru dengan dan properti tambahan flagIconUrl . Inilah tempat yang bagus untuk mencari ikon -ikon ini. Pastikan kode terjemahan juga valid. Anda bisa mendapatkan bahasa yang didukung dan kode mereka dari situs web ini.

Selain itu, Anda dapat melewati teks alt sebagai kunci dalam objek terjemahan. Ini berguna untuk aksesibilitas. Terjemahan khusus Anda akan terlihat seperti ini.

 [
  {
    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' ,
  } ,
] ;

Acara emit opsional juga tersedia sebagai

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

gaya

Jika Anda ingin menyingkirkan spanduk Google, masukkan CSS berikut ke dalam file CSS global dan impor file ini di file utama/index.js Anda di dalam 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 ;
}

Bahasa default

 [
  {
    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' ,
  } ,
] ;