vue google translate download - vue google translate Source Code Download

Vue-google-translate

แพ็คเกจ vue.js ที่อนุญาตให้มีการแปลเว็บแอพ

สารบัญ

ปัญหา
การสาธิต
การติดตั้ง
การใช้งาน
- อุปกรณ์ประกอบฉาก
ภาษาเริ่มต้น
ใบอนุญาต

ปัญหา

แพ็คเกจนี้ได้รับแรงบันดาลใจอย่างมากจาก Vue-Gtranslate

แพ็คเกจนี้ช่วยให้การแปลเว็บแอพที่ทำด้วย Vue โดยใช้ Google Translate เมื่อเว็บไซต์และแอพของคุณเติบโตขึ้นคุณอาจจำเป็นต้องขยายไปยังตลาดอื่น ๆ นอกประเทศบ้านเกิดของคุณ

หากตลาดเป้าหมายของคุณอาศัยอยู่ข้ามทะเลและพูดภาษาที่แตกต่างกันคุณอาจไม่มีทางเลือกใด ๆ อย่างไรก็ตามหากคนเหล่านั้นสามารถพูดภาษาของคุณให้พิจารณาแง่มุมอื่น ๆ (วัฒนธรรมและ/หรือกฎหมาย) เพื่อทำการตัดสินใจอย่างชาญฉลาดว่าจะแปลหรือไม่

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการโลคัลไลเซชั่นและผลประโยชน์ที่อาจเกิดขึ้นให้ชำระเงินบทความนี้

การสาธิต

หากต้องการดูแพ็คเกจที่ดำเนินการให้ตรวจสอบในรหัส Sandbox

การติดตั้ง

 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 เพิ่มเติมเพิ่มเติม นี่คือสถานที่ที่ดีในการจัดหาไอคอนเหล่านี้ ตรวจสอบให้แน่ใจว่ารหัสการแปลเป็นรหัสที่ถูกต้องเช่นกัน คุณสามารถรับภาษาที่รองรับและรหัสของพวกเขาจากเว็บไซต์นี้

นอกจากนี้คุณสามารถส่งข้อความ ALT เป็นคีย์ในวัตถุการแปล สิ่งนี้มีประโยชน์สำหรับการเข้าถึง การแปลที่กำหนดเองของคุณจะมีลักษณะเช่นนี้

 [
  {
    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 ส่วนกลางและนำเข้าไฟล์นี้ในไฟล์หลัก/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' ,
  } ,
] ;