vue + element ui实现多语言切换

vue + element ui实现多语言切换

首先我们创建一个lang的文件 ，里面创建三个文件index.js(引入使用i18n模块)， en.js（英文包）， zh.js（中文包）… 其他语言的包

index.js 文件：

import Vue from 'vue' // 引入vue
import VueI18n from 'vue-i18n' // 引入i18n模块
import Cookies from 'js-cookie' // 封装了获取，设置，删除cookie的方法
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui英文包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui中文包
import locale from 'element-ui/lib/locale' // 引入elementuiui语言包模块
import enLocale from './en' // 本地英文包
import zhLocale from './zh' // 本地中文包
 
Vue.use(VueI18n) // vue使用i18n模块
// 引入本地
const messages = {
  en: {
    ...enLocale, // es6的拓展运算符，相当于解析出每个对象
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
// 创建国际化实例
const i18n = new VueI18n({
  locale: Cookies.get('language') || 'zh', // set locale，默认中文
  messages // set locale messages。语言包
})
locale.i18n((key, value) => i18n.t(key, value))
export default i18n

en.js文件：

export default {
message：{
 title: 'hello',
 theme: 'Theme'
},
skin: {
    Blue: 'Blue',
    Green: 'Green'
  }
}

zh.js文件

export default {
message：{
 title: '你好',
 theme: '主题'
},
skin: {
    Blue: '蓝色',
    Green: '绿色'
  }
}

之后main.js中使用编写的i18n模块的index.js文件

import i18n from './lang'
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

切换语言模块

<template>
  <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
      <!--<el-tooltip class="item" effect="dark" content="select language" placement="left-start">-->
      	<!--不能包裹el-tooltip,会报错-->
      	<div>
        <!-- 语言选择图标 -->
        <nx-svg-icon class-name='international-icon' icon-class="language" />
        </div>
      <!--</el-tooltip>-->
    <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>
 
<script>
import nxSvgIcon from '@/components/nx-svg-icon/index'
export default {
  name: 'nx-lang-select',
  components: { nxSvgIcon },
  computed: {
    language() {
      return this.$store.getters.language
    }
  },
  methods: {
    handleSetLanguage(lang) {
      // 选择语言
      this.$i18n.locale = lang
      // 保存vuex
      this.$store.dispatch('setLanguage', lang)
      this.$message({
        message: 'switch language success',
        type: 'success'
      })
      // 触发重新加载事件
      this.$emit('handerevent')
    }
  }
}
</script>
 
<style scoped>
.international-icon {
  font-size: 22px;
  cursor: pointer;
  vertical-align: -5px!important;
  color:#fff;
}
.el-dropdown{
  color:#5a5e66;
}
</style>

使用

//作为文本内容,绑定在标签中
<div class="manage_tip">
    <span class="title">{{$t('message.title')}}</span>
 </div>

//作为属性绑定
  <el-form-item :label="$t('message.uname')" prop="pnone">
        <el-input v-model="loginUser.pnone" placeholder="请输入手机或邮箱"></el-input>
 </el-form-item>

//作为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"
          }
        ],
      };
    }
  },

// 用于elemenui表单自定义检验中
<template>
 <div></div>
</template>
 <script>
  export default{
    data() {
      // 用户名自定义验证规则
    const validateUsername = (rule, value, callback) => {
      // 国际化处理
      if (value === '') {
        callback(new Error(this.$t('login.user.userPlaceholder')))
      } else {
        console.log('user', value)
        callback()
      }
    return {   }
    }
}
</script>