下载il8n插件
cnpm i il8n -S
全局引入il8n
import i18n from './i18n/i18n'
new Vue({
el: '#app',
router,
store,
i18n,
render: c => c(App)
})
il8n.js内容
import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)//从localStorage获取语言选择。
const i18n = new VueI18n({
locale: localStorage.lang || 'cn',
//默认 cn 中文
messages,
})
locale.i18n((key, value) => i18n.t(key, value))
//兼容element
export default i18n
cn.js和en.js文件结构属性名要一一对应
================cn.js====
export default {
basic: {
welcome:'欢迎',
guide: '有关如何配置/自定义此项目的指南和方法,请查看vue-cli文档。'
}
}
==========en.js=========
export default {
basic: {
welcome:'Welcome',
guide: 'For a guide and recipes on how to configure / customize this project,check out the vue-cli documentation.'
}
}
使用通过下拉菜单实现切换
<el-select v-model="selectValue" @change="langChange" placeholder="请选择语言" class="lang">
<el-option
v-for="item in langtrigger"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
//data数据,默认是cn
selectValue:'cn',
langtrigger: [
{ value: 'cn', label: '中文' },
{ value: 'en', label: 'English' }
],
//methods中的change事件
langChange (e) {
localStorage.setItem('lang', e)
this.$i18n.locale = e
this.langtrigger = e
},
使用en.js和en.js的属性值 $t()固定写法就可以实现了
<div>欢迎</div> //原来的写法,写死
<div>{
{ $t("basic.welcome") }}</div>//现在可以中英文切换
记录一个面包屑导航的中英文切换,
首先在router中给每个路由设置中英文版本,例如:
{
name: [['Project', 'Create']],
path: '/project/config/add',
component: () => import('../pages/project/addproject.vue'),
meta: ['项目管理', '新建项目']
},
其次在面包屑导航中跳转获取
<el-breadcrumb separator="/" style="font-size: 14px" class="bread">
<!-- <el-breadcrumb-item :to="{ path: '/homepage' }">首页</el-breadcrumb-item> -->
<el-breadcrumb-item
v-for="(item) in selectValue=='cn'?$route.meta:$route.name[0]"
:key="item"
:to="$route.path"
>
<a href="#">{
{item}}</a>
</el-breadcrumb-item>
</el-breadcrumb>
selectValue这个值是上面根据下拉菜单的双向绑定后选择中英文切换。点击下拉选择后
效果如下:
如果是在el-table的内容也想实现中英文的话(固定的写法,不用后台传输的数据实现)
思路:通过后台传入的值判断当前行的某一列是什么值,值为il8n的自己编辑好的值。这样在实现中英切换的时候就能动态显示了
this.tabledata=[]
res.data.forEach(item=>{
var obj={}
if(item.cc==1){
obj.date=this.$t(en.js文件的属性)
}
this.tabledata.pus(obj)
})
侧边导航中英文切换
在语言包里面定义好侧边导航
在路由里单独导入封装好的语言包
路由中使用title:`${i18n.t("common.quanbu")}`
import i18n from "@/utils/i18n/index";
{path: '/about',meta:{title:`${i18n.t("common.quanbu")}`,icon:'el-icon-present',level:1,roles:['super','normal']},component: About,children:[
{path:"",component: () => import("../views/vue-calendar.vue")}
]},
效果如下,测试已成功
不刷新页面实现中英文切换
<div class="right_lang">
<!---中英文切换-->
<i
v-show="selectValue=='cn'"
class="font_family el-icon-s-flag en-click-css"
@click="langChange('en')"
/>
<i
v-show="selectValue=='en'"
class="font_family el-icon-s-promotion e en-click-css"
@click="langChange('cn')"
/>
</div>
//data数据
selectValue: 'cn',
//methods数据
// 不刷新页面中英文切换
langChange (e) {
console.log(e)
this.selectValue = e
this.$local.set('lang', e)
this.$i18n.locale = e
this.LangChange = e
var oriSetItem = this.$local.set
this.$local.set = function (key, value) {
// 这里抛出自定义事件
var event = new Event('setLangEvent')
event.new_lang = value
window.dispatchEvent(event)
// 实现原方法
oriSetItem.apply(this, arguments)
}
}
文章到此结束,希望对你有所帮助~