国际化语言像后端请求该语言的数据

323 阅读1分钟

lang/index

import Vue from 'vue'
import VueI18n from 'vue-i18n'

// element-ui多语言
import locale from 'element-ui/lib/locale'
import zhEl from 'element-ui/lib/locale/lang/zh-CN'
import zhTWEl from 'element-ui/lib/locale/lang/zh-TW'
import enEl from 'element-ui/lib/locale/lang/en'

// 本地多语言
import zhCN from './lang/zh-CN'
import zhTW from './lang/zh-TW'
import en from './lang/en'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: localStorage.lang || 'zhCN',
  messages: {
    zhCN: { ...zhCN, ...zhEl },
    zhTW: { ...zhTW, ...zhTWEl },
    en: { ...en, ...enEl }
  },
  silentTranslationWarn: true,
})
locale.i18n((key, value) => i18n.t(key, value))

export default i18n

多语言切换配置languageList.js

// 多语言切换配置
export default [
  { label: '简体中文', value: 'zhCN' },
  // { label: '繁體中文', value: 'zh-TW' },
  { label: 'English', value: 'en' }
]

请求头携带、request.js

var lang = localStorage.getItem('lang') || 'zhCN'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.headers['Accept-Language'] = lang == 'zhCN' || '' ? 'zh-CN' : lang

创建组件 vueLanguage.vue

<style lang="scss" scoped>
.lang{
    display: inline-block;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 6px;
    color: #fff;
}
.white {
   color: #fff;
}
.black {
  color:#2362fb
}
</style>

<template>
    <div class="language">
        <el-dropdown trigger="click" @command="changeLanguage">
            <span class="lang" :class="color">
                <span v-text="currentLanguage"></span>
                <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item v-for="(item, index) in list" :key="index" :command='item' >{{item.label}}</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
import list from './language/languageList'

export default {
  name: 'vueLanguage', /* 多语言切换 */
  props: {
    color: {
      type: String,
      default: "",
    },
  },
  data () {
    return {
      currentLanguage: '',
      list: []
    }
  },
  created () {
    console.log(this.color);
    this.currentLanguage = localStorage.langName || '简体中文'
    this.list = list
  },
  methods: {
    changeLanguage (item) {
      this.currentLanguage = item.label
      // localStorage.removeItem('checked')
      // localStorage.removeItem('zone')
      // this.bodyAddClassName(item.value);
      this.$i18n.locale = item.value
      localStorage.setItem('langName', item.label)
      localStorage.setItem('lang', item.value)
    },

    // 修改body的class
    bodyAddClassName (className) {
      const dom = document.getElementById('app')
      dom.className = `language_${className}`
    }
  }
}
</script>

页面中使用

    <vueLanguage class="language" color="black"></vueLanguage>
    //引入
    import vueLanguage from '@/components/vueLanguage'
    //注册
    components: {
    vueLanguage
  },

监听语言的变化,像后端请求该语言的数据

 watch: {
    '$i18n.locale': {
	handler: function() {
         window.location.reload()
        //  localStorage.removeItem('zone')
			},
		},
  }