使用vuex进行状态管理

首先需要下载vue-i18n以及js-cookie：

    npm i vue-i18n 

    npm i js-cookie

目录文件：

|-- src

    |-- components  //组件

        |-- changeLang.vue

    |-- store

        |-- index.js

        |--modules

            |-- routes.js

    |-- lang // 语言库

        |-- en.js // 英文

        |-- zh.js // 中文

        |-- index.js  // 入口文件

    |-- main.js

    |-- app.vue

在main.js里面配置：

import i18n from './lang'
Vue. use( ElementUI, {
i18n : ( key, value) => i18n. t( key, value)
})
new Vue({
el: '#app',
router,
store,
i18n,
template: '<App/>',
components: { App}
})

lang--index.js


en.js: 

export default {
version: {
info: 'authorization info',
email: 'EMaill',
vs: 'version number '
}
}


zh.js:

export default {
version: {
info: '授权信息',
email: '邮箱',
vs: '版本号'
}
}

routes.js：

import Cookies from 'js-cookie'
const routes = {
state: {
language: Cookies. get( 'language') || 'zh'
    },
getters: {
language : state => {
return state. language
}
},
mutations: {
set_language : ( state, language) => {
state. language = language
Cookies. set( 'language', language)
}
}
}
export default routes


语言切换组件changeLang.vue：


在相应位置引用此组件即可。

在页面上绑定：

<span>{{ $t( 'version.email')}}</span>
< el-form-item :label=" $t( 'table.license_no')" prop= "license" >
< el-input v-model=" dataform. license" :disabled=" disabled" :placeholder=" $t( 'table.license_no')" ></ el-input >
</ el-form-item >

如果某些js中含有字符需要切换语言（包括rules），需要写在computed中。 

js中语言切换：

computed: {
rules1 () {
return {
upImg: [
{ required: true, message: this. $t( 'table.face_idnotEmpty'), trigger: 'blur'}
]
}
}
  }

语言切换参考项目： http://panjiachen.github.io/vue-element-admin/#/dashboard

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue