Maison > interface Web > js tutoriel > Étapes pour utiliser la norme vue-i18n

Étapes pour utiliser la norme vue-i18n

php中世界最好的语言
Libérer: 2018-05-02 09:38:47
original
3182 Les gens l'ont consulté

Cette fois, je vais vous présenter les étapes pour utiliser le standard vue-i18n. Quelles sont les précautions lors de l'utilisation du standard vue-i18n. Voici des cas réels, jetons un coup d'œil.

Exigences

Les projets de l'entreprise doivent être internationalisés, cliquez sur le bouton pour changer de chinois/anglais

1 Installation<.>

npm install vue-i18n --save
Copier après la connexion

2. Injectez dans l'instance de vue et implémentez l'API d'appel et la syntaxe du modèle dans le projet

import VueI18n from 'vue-i18n'
Vue.use(VueI18n) ;
const i18n = new VueI18n({
  locale: 'zh-CN',  // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale 
  messages: {
   'zh-CN': require('./common/lang/zh'),  // 中文语言包
   'en-US': require('./common/lang/en')  // 英文语言包
  }
})
new Vue({
 el: '#app',
 i18n, // 最后
 router,
 template: '<App/>',
 components: { App }
})
Copier après la connexion

3. .Pack de langue correspondant

zh.js Pack de langue chinois :

export const lang = {
 homeOverview:'首页概览',
 firmOverview:'公司概述',
 firmReports:'财务报表',
 firmAppendix:'更多附录',
 firmIndex:'主要财务指标',
 firmAnalysis:'对比分析',
 firmNews:'新闻事件档案',
 firmOther:'其他功能',
}
Copier après la connexion
en.js Pack de langue anglais :

export const lang = {
 homeOverview:'Home overview',
 firmOverview:'firmOverview',
 firmReports:'firmReports',
 firmAppendix:'firmAppendix',
 firmIndex:'firmIndex',
 firmAnalysis:'firmAnalysis',
 firmNews:'firmNews',
 firmOther:'firmOther'
}
Copier après la connexion

4. Contrôle des boutons pour changer de langue

this.$i18n.locale, lorsque vous attribuez la valeur à 'zh-CN', la colonne

Navigation deviendra chinoise lorsque la valeur est ; à 'en-US', il sera en anglais :

<p class="top_btn" @click="changeLangEvent">中文</p>
Copier après la connexion
changeLangEvent() {
  console.log('changeLangEvent');
  this.$confirm('确定切换语言吗?', '提示', {
   confirmButtonText: '确定',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   if ( this.$i18n.locale === 'zh-CN' ) {
    this.$i18n.locale = 'en-US';//关键语句
    console.log('en-US')
   }else {
    this.$i18n.locale = 'zh-CN';//关键语句
    console.log('zh-CN')
   }
  }).catch(() => {
   console.log('catch');
   this.$message({
    type: 'info',
   });
  });
 }
Copier après la connexion

5 Rendu du modèle

Statique. rendu :

<span v-text="$t(&#39;lang .homeOverview&#39;)"></span>
<span>{{$t('lang .homeOverview')}}</span>
Copier après la connexion
S'il s'agit d'un élément-ui, ajoutez deux points devant ce que vous souhaitez traduire

Par exemple : label="user name" doit être modifié to : label="$t('order.userName' )"

Rendu dynamique :

<span class="el-dropdown-link">{{navCompany}}</span>
 computed:{
   navCompany:function(){
    if(this.nav_company){
     let str = 'lang'+this.nav_company;
     return this.$t(str);
    }
   }
},
    
 <el-submenu
      v-for="(value, title1, one) in navList"
      :key="one+1"
      :index="(one+1).toString()">
   <template slot="title">
    <router-link :to="linkList[title1]">{{ getTitle(title1) }}</router-link>
   </template>
       
</el-submenu>
methods: {
  getTitle(title){
    let str = 'lang.'+title;
    return this.$t(str);
  }
}
Copier après la connexion
Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Conseils pour utiliser l'authentification de connexion à l'applet WeChat

Utilisation en échafaudage de vue-router

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal