element-ui语言切换

首先安装i18n和js-cookie

npm i vue-i18n js-cookie

1.在src下创建以下文件

en.js

export default{
    text:{
        langToggle:'language-toggle',
        test1:'ceshi1',
        test2:'ceshi2',
        test3:'chose date'
    }
}

zh.js

export default{
    text:{
        langToggle:'语言切换',
        test1:'测试1',
        test2:'测试2',
        test3:'请填写日期'
    }
}

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
export function getLanguage() {
  const chooseLanguage = Cookies.get('language')
  if (chooseLanguage) return chooseLanguage

  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  return 'zh'
}
const i18n = new VueI18n({
  locale: getLanguage(),
  messages
})

export default i18n

2.main.js中导入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import i18n from './lang/index'
Vue.config.productionTip = false
Vue.use(ElementUi,{
  i18n:(key,value)=>i18n.t(key,value)
})
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

3.使用及语言切换

<template>
  <div class="selectLanguage">
    <!-- 语言切换 -->
    <el-dropdown
      @command="handleSetLanguage"
    >
      <div>
        <span>{{ $t("text.langToggle")}}</span>
        <i class="el-icon-arrow-down"></i>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :disabled="language === 'zh'" command="zh">
          中文
        </el-dropdown-item>
        <el-dropdown-item :disabled="language === 'en'" command="en">
          English
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!-- 在标签中使用 -->
    <h1>{{ $t("text.test1") }}</h1>
    <!-- 在属性中使用 -->
    <input type="text" :placeholder="$t('text.test2')" />
    <!-- elementui插件 -->
    <el-date-picker v-model="dateValue" type="date" :placeholder="$t('text.test3')"></el-date-picker>
  </div>
</template>
<script>
import {getLanguage} from'@/lang/index'
export default {
  name:'selectLanguage',
  data(){
    return{
      dateValue:'',
      language:getLanguage()
    }
  },
  methods:{
    handleSetLanguage(command){
      this.language = command;
      this.$i18n.locale = command;
      Cookies.set('language',command)
    }
  }
};
</script>

4.效果