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 相关文章推荐
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
vue webpack实用技巧总结
Apr 24 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
php学习之运算符相关概念
2011/06/09 PHP
php调整服务器时间的方法
2015/04/03 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
layui实现给某一列加点击事件
2019/10/26 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python2 与python3的print区别小结
2018/01/16 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
机电工程学生自荐信范文
2013/12/07 职场文书
办公室副主任职责范本
2014/03/08 职场文书
会议主持词结束语
2015/07/03 职场文书
话题作文之自信作文
2019/11/15 职场文书