vue使用vue-i18n实现国际化的实现代码


Posted in Javascript onApril 08, 2018

需求

公司项目需要国际化,点击按钮切换中文/英文

1、安装

npm install vue-i18n --save

2、注入 vue 实例中,项目中实现调用 api 和 模板语法

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 }
})

3、对应语言包

zh.js中文语言包:

export const lang = {
 homeOverview:'首页概览',
 firmOverview:'公司概述',
 firmReports:'财务报表',
 firmAppendix:'更多附录',
 firmIndex:'主要财务指标',
 firmAnalysis:'对比分析',
 firmNews:'新闻事件档案',
 firmOther:'其他功能',
}

en.js 英文语言包:

export const lang = {
 homeOverview:'Home overview',
 firmOverview:'firmOverview',
 firmReports:'firmReports',
 firmAppendix:'firmAppendix',
 firmIndex:'firmIndex',
 firmAnalysis:'firmAnalysis',
 firmNews:'firmNews',
 firmOther:'firmOther'
}

4、按钮控制切换语言

this.$i18n.locale,当你赋值为‘zh-CN'时,导航栏就变成中文;当赋值为 ‘en-US'时,就变成英文:

<div class="top_btn" @click="changeLangEvent">中文</div>
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',
   });
  });
 }

5、模板渲染

静态渲染:

<span v-text="$t('lang .homeOverview')"></span>
<span>{{$t('lang .homeOverview')}}</span>

如果是element-ui 的,在要翻译的前面加上冒号

比如:label="用户姓名" 就改成 :label="$t('order.userName')"

动态渲染:

<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);
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 #Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 #Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 #Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 #Javascript
Js面试算法详解
Apr 08 #Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 #Javascript
详解vue表单——小白速看
Apr 08 #Javascript
You might like
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
提问的智慧
2006/10/09 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
js控制table合并具体实现
2014/02/20 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JSONP之我见
2015/03/24 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
python操作MongoDB基础知识
2013/11/01 Python
Python单链表的简单实现方法
2014/09/23 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
python 实现多线程下载视频的代码
2019/11/15 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Python无损压缩图片的示例代码
2020/08/06 Python
澳大利亚相机之家:Camera House
2017/11/30 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
培训班主持词
2014/03/28 职场文书
开工典礼策划方案
2014/05/23 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2015年组织部工作总结
2015/04/03 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
关于教师节的广播稿
2015/08/19 职场文书
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis
nginx rewrite功能使用场景分析
2022/05/30 Servers