网站代搭建维护,wordpress免费教育机构主题,网站建设中要多使用图片,做美食视频网站前言
之前做项目过程中#xff0c;也做过一次多语言切换#xff0c;大致思想都是一样的#xff0c;想了解的可以看下之前的文章C#WinForm实现多语言切换
使用i18n插件
安装插件
npm install vue-i18n --saveMain.js配置
// 引入 多语言包
import VueI18n from vue-i18n…前言
之前做项目过程中也做过一次多语言切换大致思想都是一样的想了解的可以看下之前的文章C#WinForm实现多语言切换
使用i18n插件
安装插件
npm install vue-i18n --saveMain.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|xxxzh_CN: Chinese,en_US: English,de-DE:Deutsch}
})Vue.prototype._i18n i18n;语言文件
在COMMON下创建个文件夹然后把语言文件放到这个下面可以看到上述配置引用的语言文件
//语言文件写法
export default {login: {title:WMS,zhanghao:账号,mima:密码,qingshuruzhanghao:请输入账号},userdetail:{fanhui:返回,xuanze:语言选择}
}语言切换
首先看下效果图 页面实现代码放下面了注意的是切换的时候不是切换这一个页面是所有配置好的页面都会切换。
templateview classcontentscroll-view scroll-y classpagecu-custom bgColorbg-gradual-pink :isBacktrueblock slotbackText{{$t(userdetail.fanhui)}}/blockblock slotcontent{{$t(userdetail.xuanze)}}/block/cu-customview classradioInfoview classdataInfo!-- 列表内容开始 --radio-group changeradioChangeview classdataList v-for(item,index) in dataList :keyindexclicklistClick(item.titleId) :classindex radioCurrent?radiOn:view classtextImgview classimgimage :srcitem.imgUrl modewidthFix/image/viewview classtexttext{{item.title}}/texttext{{item.url}}/text/view/viewview classradioBoxradio color#2DCF8C :valueitem.titleId :checkedindex radioCurrent //view/view/radio-group!-- 列表内容结束 --/view/view /scroll-view/view
/templatescriptimport api from /api/api.jsexport 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;}}} }}
/scriptstyle.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 langscss.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
