当前位置:   article > 正文

vue3(element-plus)+多语言切换实现_vue3 多语言

vue3 多语言

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

提示:这里可以添加本文要记录的大概内容:

我们公司的客户有国内客户和国外客户,需要个国际化系统,要设置多语言,所以针对此情况在原有的基础上增加了中英文切换功能,Vue3采用的是vue-i18n来实现国际化的功能。


提示:以下是本篇文章正文内容,下面案例可供参考

一、vue-i18n是什么?

所谓的vuei18n国际化方案简而言之就是根据它的规则自己建立一套语言字典对于每一个字message都有一个统一的标识符我们直接在文中使用该标识符代替原来固定的某一语言,会自动转换为需要查看的语言。

二、使用步骤

1.安装引入

代码如下(示例):

npm install i18n
npm install i18n -save

cnpm i vue-i18n -S
  • 1
  • 2
  • 3
  • 4

2.配置

在src下新建locals文件夹,包含index.js,en.js,zh-cn.js(只做中英文切换)
在这里插入图片描述

3.使用

在中使用
要用到一个$t()的方法,或者使用v-t也行
代码如下(示例):

<div>
    {{`$t('login.userName')`}}
</div>
<div v-t="'login.password'"></div>
  • 1
  • 2
  • 3
  • 4

该处使用的url网络请求的数据。

4.切换语言

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

在这里插入图片描述

5.配置动态菜单

在这里插入图片描述
切换中文
在这里插入图片描述
在这里插入图片描述

切换英文
在这里插入图片描述
在这里插入图片描述


总结

记录点点滴滴

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/229211
推荐阅读
相关标签
  

闽ICP备14008679号