vue elementui 切换语言 -凯发ag旗舰厅登录网址下载

1.安装插件:npm install vue-i18n  --save

2.src下新建i18n文件夹,

　　i18n文件夹下创建langs文件夹和i18n.js文件

　　langs文件夹下创建cn.js; en.js; index.js

如图:

3.  i18n.js:

import vue from "vue"; import locale from 'element-ui/lib/locale' import vuei18n from "vue-i18n"; import messages from "./langs";vue.use(vuei18n); const i18n = new vuei18n({locale: localstorage.lang || "cn",messages }); locale.i18n((key, value) => i18n.t(key, value))export default i18n;

4. cn.js:

import zhlocale from "element-ui/lib/locale/lang/zh-cn"; const cn = {message: {login: "登录",password: "密码不可为空",upassword: "密码",uname: "账户",},...zhlocale };export default cn;

5. en.js:

import enlocale from 'element-ui/lib/locale/lang/en' const en = {message: {login: "login",password: "password is required",upassword: "password",uname: "account"},...enlocale };export default en;

6.index.js:

import en from "./en"; import cn from "./cn"; export default {en,cn };

7. main.js:

import vue from 'vue' import app from './app' import store from './store' import i18n from './i18n/i18n' vue.config.productiontip = falsewindow.app = new vue({store,i18n,render: h => h(app) }).$mount('#app')

以上就是配置好了,可以使用了

8. 使用:

//data()中声明 data() {return {lang: "",};}, //作为文本内容,绑定在标签中 //作为属性绑定 //作为elementui 中的校验规则,要放在computed中computed: {rules() {return {password: [{required: true,message: this.$t("message.password"),trigger: "blur"},{pattern: /^(?=.*\d)(?=.*[a-za-z])(?=.*[\w_]).{6,16}$/,message: "输入6-16位包含数字、字母、特殊字符的密码",trigger: "blur"}],};}}, //切换中英文 中英文切换中文英文 //切换语言的事件methods: {// 根据下拉框的中被选中的值切换语言handlecommand(command) {// this.$message("click on item " command);switch (command) {case "cn": {this.lang = "cn";this.$i18n.locale = this.lang;break;}case "en": {this.lang = "en";this.$i18n.locale = this.lang;break;}default:break;}}, }

 

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的vue elementui 切换语言的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。