赞
踩
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
提示:这里可以添加本文要记录的大概内容:
我们公司的客户有国内客户和国外客户,需要个国际化系统,要设置多语言,所以针对此情况在原有的基础上增加了中英文切换功能,Vue3采用的是vue-i18n来实现国际化的功能。
提示:以下是本篇文章正文内容,下面案例可供参考
所谓的vuei18n国际化方案简而言之就是根据它的规则自己建立一套语言字典对于每一个字message都有一个统一的标识符我们直接在文中使用该标识符代替原来固定的某一语言,会自动转换为需要查看的语言。
代码如下(示例):
npm install i18n
npm install i18n -save
cnpm i vue-i18n -S
在src下新建locals文件夹,包含index.js,en.js,zh-cn.js(只做中英文切换)
在中使用
要用到一个$t()的方法,或者使用v-t也行
代码如下(示例):
<div>
{{`$t('login.userName')`}}
</div>
<div v-t="'login.password'"></div>
<template> <el-dropdown style='line-height:50px;' ref="localePicker" trigger="click" @command="changeLocale"> <div class="local-label"> {{currentLocaleLabel}}<el-icon class="el-icon--right"><ArrowDown /></el-icon> </div> <template #dropdown> <el-dropdown-menu> <template v-for="item in localeList" :key="item.key"> <el-dropdown-item :command="item.key" v-if="item.key!=currentLocaleKey"> {{item.label}} </el-dropdown-item> </template> </el-dropdown-menu> </template> </el-dropdown> </template> <script setup> import { computed, nextTick } from 'vue' import { useStore } from 'vuex' import {localeList} from '@/locale' import { useRoute } from 'vue-router' import config from '@/config' import i18n from '@/locale' const store=useStore() const currentLocaleKey=computed(()=>store.state.locale.key); const currentLocaleLabel=computed(()=>{ return localeList.find(a=>a.key==currentLocaleKey.value).label }) const route=useRoute() function changeLocale(key) { store.commit('setLocale',key) nextTick().then(()=>{ setTimeout(()=>{ document.title = route.meta.title ? `${i18n.global.t(route.meta.title,key)} - ${config.system.APP_NAME}` : `${config.system.APP_NAME}` },10) }) } </script>
切换中文
切换英文
记录点点滴滴
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。