1、 vue3.0中英切换使用步骤
1.1 在项目根目录下:(如:minfneg_projects)
npm install --save vue-i18
1.2 创建文件夹i18n:(如图)
1.3 en.js文件内容:
module.exports = {
headDrop: {
login: 'Login',
changepassword: 'changePassword',
dropout: "dropOut",
welcome: "Welcome",
switchZhOrEn: "Chinese-English switch"
},
}
1.4 zh.js文件内容:
module.exports = {
headDrop: {
login: '登录',
changepassword: '修改密码',
dropout: "退出",
welcome: "欢迎您",
switchZhOrEn: "中英切换"
}
}
1.5 cookie.js文件内容
function getCookie(name, defaultValue) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return defaultValue;
}
export {
getCookie
}
1.6 index.js文件内容
import VueI18n from 'vue-i18n'
import Vue from 'vue'
import {
getCookie
} from "./cookie"
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: getCookie('language', 'zh'), // 语言标识
messages: {
'zh': require('./lang/zh'),
'en': require('./lang/en')
}
})
export default i18n
1.7 main.js中引入并使用:
import store from './store'
import i18n from "./i18n"
new Vue({
router,
store,
i18n,
render: function (h) {
return h(App)
},
mounted() {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
2、使用vuex进行状态管理
2.1 我创建的文件目录结构如图:
2.2 app.js文件内容
import Cookies from 'js-cookie' //先下载:npm install js-cookie
const app = {
state: {
// 中英文
language: Cookies.get('language') || 'zh',
},
mutations: {
// 中英文
SET_LANGUAGE: (state, language) => {
state.language = language
Cookies.set('language', language)
},
},
actions: {
// 中英文
setLanguage({ commit }, language) {
commit('SET_LANGUAGE', language)
},
}
}
export default app
2.3 index.js文件内容(此文件须在main.js中引入并使用)
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
Vue.use(Vuex)
const store = new Vuex.Store({
getters,
modules: {
app
}
})
export default store
3、应用(headDrop.vue文件下)
<template>
<el-dropdown
@command="handleSetLanguage"
trigger="click"
style="padding-left:10px;cursor: pointer;"
>
<span class="el-dropdown-link">
{{$t("headDrop.switchZhOrEn")}}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
<el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
export default {
data(){
return {}
},
computed: {
language() {
return this.$store.state.app.language;
}
},
methods: {
// 中英文切换
handleSetLanguage(lang) {
this.$i18n.locale = lang;
this.$store.dispatch("setLanguage", lang);
this.$message({
message: "switch language success",
type: "success"
});
},
}
}
4、最终效果图