当前位置: 首页 > news >正文

Uniapp实现多语言切换

前言

之前做项目过程中,也做过一次多语言切换,大致思想都是一样的,想了解的可以看下之前的文章C#WinForm实现多语言切换

使用i18n插件

安装插件
npm install vue-i18n --save
Main.js配置
// 引入 多语言包
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载
// 引入语言包,注意路径
import Chinese from '@/common/lang/cn.js'; //简体中文
import English from '@/common/lang/en.js'; //英文
import Deutsch from '@/common/lang/gd.js'; //德文// 构造i18n对象
const i18n = new VueI18n({// 默认语言,这里的local属性,对应message中的cn、en属性locale: uni.getStorageSync('locale') || 'zh_CN',// 引入语言文件messages: {// 这里的属性名是任意的,您也可以把zh设置为cn等,只是后续切换语言时// 要标识这里的语言属性,如:this.$i18n.locale = zh|en|cn|xxx'zh_CN': Chinese,'en_US': English,'de-DE':Deutsch}
})Vue.prototype._i18n = i18n;
语言文件

在COMMON下创建个文件夹,然后把语言文件放到这个下面,可以看到上述配置引用的语言文件
在这里插入图片描述

//语言文件写法
export default {login: {title:'WMS',zhanghao:'账号',mima:'密码',qingshuruzhanghao:'请输入账号'},userdetail:{fanhui:'返回',xuanze:'语言选择'}
}
语言切换

首先看下效果图:
在这里插入图片描述
页面实现代码放下面了,注意的是切换的时候不是切换这一个页面,是所有配置好的页面都会切换。

<template><view class="content"><scroll-view scroll-y class="page"><cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">{{$t('userdetail.fanhui')}}</block><block slot="content">{{$t('userdetail.xuanze')}}</block></cu-custom><view class="radioInfo"><view class="dataInfo"><!-- 列表内容开始 --><radio-group @change="radioChange"><view class="dataList" v-for="(item,index) in dataList" :key='index'@click="listClick(item.titleId)" :class="index === radioCurrent?'radiOn':''"><view class="textImg"><view class="img"><image :src="item.imgUrl" mode="widthFix"></image></view><view class="text"><text>{{item.title}}</text><text>{{item.url}}</text></view></view><view class="radioBox"><radio color="#2DCF8C" :value="item.titleId + ''" :checked="index === radioCurrent" /></view></view></radio-group><!-- 列表内容结束 --></view></view>	</scroll-view></view>
</template><script>import api from '@/api/api.js'export default {data() {return {dataList: [{imgUrl: '../../static/icon/cn.png',title: '中文',titleId: 1}, {imgUrl: '../../static/icon/vn.png',title: 'English',titleId: 2}, {imgUrl: '../../static/icon/dg.png',title: 'Deutsch',titleId: 3}],radioCurrent: null,dataFrom: {titleId: null //传的id}};},methods: {radioChange(evt) { //单个选择框点击this.dataFrom.titleId = parseInt(evt.detail.value) //如果需要通过点击来知道选择的是哪个商品的idconsole.log('选中',this.dataFrom.titleId)if(this.dataFrom.titleId == 1){this._i18n.locale = "zh_CN"}if(this.dataFrom.titleId == 2){this._i18n.locale = "en_US"}if(this.dataFrom.titleId == 3){this._i18n.locale = "de-DE"}},listClick(titleId) { //整个数据点击this.dataFrom.titleId = titleId //如果需要通过点击来知道选择的是哪个商品的idfor (let i = 0; i < this.dataList.length; i++) {if (this.dataList[i].titleId == titleId) {this.radioCurrent = i;break;}}}	}}
</script><style>.page {height: 100Vh;width: 100vw;}.page.show {overflow: hidden;}.switch-sex::after {content: "\e716";}.switch-sex::before {content: "\e7a9";}.switch-music::after {content: "\e66a";}.switch-music::before {content: "\e6db";}
</style>
<style lang="scss">.content {.radioInfo {.dataInfo {width: 80%;margin: auto;.checkAll {display: flex;justify-content: space-between;}.radiOn {border: 1px solid #2DCF8C !important;}.dataList {width: 170%;display: flex;align-items: center;justify-content: space-between;border: 1px solid #E7E9EE;padding: 20rpx;margin-bottom: 20rpx;.textImg {display: flex;align-items: center;.img {border: 1px solid #E7E9EE;padding: 10rpx;image {width: 90rpx;height: 90rpx;display: block;}}.text {padding-left: 20rpx;text {display: block;font-size: 30rpx;color: #000;font-weight: bold;}}}}}}}
</style>
http://www.lryc.cn/news/220785.html

相关文章:

  • 企业数字化转型与供应链效率-基准回归复刻(2007-2022年)
  • 支持向量机 (SVM):初学者指南
  • UnityShader(五)
  • Java中的类和对象
  • 多测师肖sir_高级金牌讲师_jenkins搭建
  • Ps:色彩范围
  • 基于SSM的宠物医院管理系统
  • 华为政企园区网络交换机产品集
  • NVMe FDP会被广泛使用吗?
  • [黑马程序员Pandas教程]——Pandas数据结构
  • AI 绘画 | Stable Diffusion 提示词
  • tomcat默认最大线程数、等待队列长度、连接超时时间
  • 本地部署 CogVLM
  • bff层解决了什么痛点
  • 面试经典150题——Day33
  • 再谈Android重要组件——Handler(Native篇)
  • Javaweb之javascript的详细解析
  • Linux常用命令——cd命令
  • VHDL基础知识笔记(1)
  • volatile-日常使用场景
  • 策略模式在数据接收和发送场景的应用
  • 学习LevelDB架构的检索技术
  • Docker Swarm实现容器的复制均衡及动态管理:详细过程版
  • Proteus仿真--1602LCD显示仿手机键盘按键字符(仿真文件+程序)
  • Rust语言和curl库编写程序
  • FSDiffReg:心脏图像的特征和分数扩散引导无监督形变图像配准
  • 音视频技术开发周刊 | 318
  • asp.net docker-compose添加sql server
  • uniapp 微信小程序 uni-file-picker上传图片报错 chooseAndUploadFile
  • 《向量数据库指南》——用 Milvus Cloud和 NVIDIA Merlin 搭建高效推荐系统结论