数字媒体应用 网站开发,网站建设的方法和技术,图片在线设计平台,wordpress后台添加新的文章类别Vue3Ts#xff1a;使用i18n实现国际化与全局动态下拉框框切换语言 一、下载依赖#xff1a;二、创建ts文件并配置main.ts三#xff0c;如何使用1.在template中使用2.在setup中使用 四、全局下拉框动态切换 一、下载依赖#xff1a;
npm install vue-i18nnex二、创… Vue3Ts使用i18n实现国际化与全局动态下拉框框切换语言 一、下载依赖二、创建ts文件并配置main.ts三如何使用1.在template中使用2.在setup中使用 四、全局下拉框动态切换 一、下载依赖
npm install vue-i18nnex二、创建ts文件并配置main.ts
在 src 目录下新建 lang 文件夹再创建3个ts文件lang / index.ts , lang / en.ts , lang / zh.ts
index.ts
// index.ts
import { createI18n } from vue-i18n
import zh from ./zh
import en from ./enconst messages {en,zh,
}console.log(localStorage.getItem, localStorage.getItem(language));const language (navigator.language || en).toLocaleLowerCase() // 获取浏览器的语言
console.log(language.split, language.split(-)[0]);const i18n createI18n({locale: localStorage.getItem(language) || language.split(-)[0] || en, // 先从缓存里拿没有的话就用浏览器语言fallbackLocale: zh, // 设置备用语言messages,legacy: false,globalInjection:true,
})export default i18nen.ts
export default {login: {login: login,userName: userName,password: password,},captcha: Captcha,forgetPassword: Forget Password?,loginTip: The login result is random. Just fill in the captcha,editpassword: Edit Password,logout: Logout,errMsg: {inputRequired: Please Input {cont},selectRequired: Please Select {cont},},
}zh.ts
export default {login: {login: 登录,userName: 用户名,password: 密码,},captcha: 验证码,forgetPassword: 忘记密码了,loginTip: 当前登录结果随机。验证码随便填,editpassword: 修改密码,logout: 退出登录,errMsg: {inputRequired: 请输入{cont},selectRequired: 请选择{cont},},
}main.ts
import i18n from ./lang/index
app.use(i18n)三如何使用
1.在中使用 div{{ $t(login.userName) }}/divdiv v-tlogin.password/div2.在setup中使用
script setup langts
import { useI18n } from vue-i18nconst { t } useI18n()console.log(t(login.useName))
/script四、全局下拉框动态切换
这边我是在stores下创建了一个langConversion.ts文件。src\stores\modules\langConversion.ts langConversion.ts
export enum LangOption {EN en,ZH zh}// 语言可选项
export const langOptions [{ label: English, value: LangOption.EN},{ label: 中文, value: LangOption.ZH},]export async function langConversionEvent(lang:string){// let langs localStorage.getItem(language) en?zh:enlocalStorage.setItem(language, lang);window.location.reload();
}需要调用该方法的vue页面这里用的NaiveUI组件
n-select sizesmall stylewidth: 120px; v-model:valueoptionsValue :optionsoptions update:valuehandleUpdateValue/script langts
import { langConversionEvent, langOptions } from /stores/modules/langConversionexport default defineComponent({setup(){const optionsValue ref(localStorage.getItem(language) || language.split(-)[0])return{optionsValue,options:langOptions,handleUpdateValue (value: string) {langConversionEvent(value)},}}
})script官网I18n
