vue2+vue-i18n+element-ui国际化(中英文切换)

记录下中英文切换的功能:

1.首先导入:vue2 最好指定版本,最新的版本报错

npm install vue-i18n@6

2.在src下面创建lang/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en' // 饿了么的英文包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 饿了么的中文包
Vue.use(VueI18n)
const messages = {
  en: {
    menus: {
      users: 'Users',
      rights: 'Rights',
      roles: 'Roles',
      goods: 'Goods',
      params: 'Params',
      categories: 'Categories',
      orders: 'Orders',
      reports: 'Reports'
    },
    ...enLocale
  },
  zh: {
    menus: {
      users: '用户管理',
      rights: '权限列表',
      roles: '角色列表',
      goods: '商品管理',
      params: '参数设置',
      categories: '商品分类',
      orders: '订单列表',
      reports: '数据统计'
    },
    ...zhLocale
  }
}
const i18n = new VueI18n({
  locale: sessionStorage.getItem('locale') || 'zh', // 设置地区
  messages // 设置地区信息
})

Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})

export default i18n

3.在main.js下面引用

import i18n from './lang/index.js'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(VXETable)

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

4.顶部切换的时候,使用的是dropdown 直接黏贴方法:

handleCommand (val) {
      sessionStorage.setItem('locale', val)
      this.$i18n.locale = val
    }

自此,功能实现。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue2实现全局中英文切换可以通过以下步骤进行: 1. 创建语言文件:首先,创建两个语言文件,一个用于存储文文本,另一个用于存储英文文本。可以使用JSON格式来存储键值对,其键表示页面上的文本标识符,值表示对应的中英文文本。 例如,文语言文件(zh.json)可以如下所示: ```json { "welcome": "欢迎", "hello": "你好" } ``` 英文语言文件(en.json)可以如下所示: ```json { "welcome": "Welcome", "hello": "Hello" } ``` 2. 创建语言切换组件:在Vue,可以创建一个语言切换组件,用于显示当前的语言,并提供切换语言的功能。 ```vue <template> <div> <span>当前语言: {{ currentLanguage }}</span> <button @click="toggleLanguage">切换语言</button> </div> </template> <script> export default { data() { return { currentLanguage: '文', }; }, methods: { toggleLanguage() { // 切换语言逻辑 }, }, }; </script> ``` 3. 实现语言切换逻辑:在语言切换组件的`toggleLanguage`方法,可以通过改变当前语言的值来实现中英文切换。可以使用Vue的全局事件总线来实现组件之间的通信。 在`main.js`,可以创建一个全局事件总线对象,并将其挂载到Vue的原型上: ```javascript // main.js import Vue from 'vue'; Vue.prototype.$bus = new Vue(); ``` 然后,在语言切换组件,通过`this.$bus.$emit`方法触发一个自定义事件,表示切换语言的动作: ```vue <script> export default { methods: { toggleLanguage() { this.$bus.$emit('toggle-language'); }, }, }; </script> ``` 在需要切换语言的组件,通过`this.$bus.$on`方法监听这个自定义事件,并在回调函数进行语言切换的逻辑: ```vue <script> export default { created() { this.$bus.$on('toggle-language', this.changeLanguage); }, beforeDestroy() { this.$bus.$off('toggle-language', this.changeLanguage); }, methods: { changeLanguage() { // 切换语言逻辑 }, }, }; </script> ``` 4. 在语言切换逻辑,可以使用Vue的全局混入(mixin)功能来实现对所有组件的文本进行替换。 在语言切换逻辑,可以根据当前语言加载对应的语言文件,并将其存储在Vue的原型上: ```javascript // main.js import Vue from 'vue'; import zh from './zh.json'; import en from './en.json'; Vue.prototype.$languages = { zh, en, }; ``` 然后,在语言切换逻辑,可以通过`Vue.mixin`方法全局混入一个`languageMixin`,用于替换组件的文本: ```javascript // main.js import Vue from 'vue'; Vue.mixin({ computed: { language() { return this.$languages[this.currentLanguage]; }, }, methods: { t(key) { return this.language[key] || key; }, }, }); ``` 最后,在需要显示文本的组件,可以使用`this.t`方法来获取对应的文本,例如: ```vue <template> <div> <span>{{ t('welcome') }}</span> <span>{{ t('hello') }}</span> </div> </template> <script> export default { // ... }; </script> ``` 现在,当点击语言切换按钮时,触发切换语言的动作,然后所有使用了`this.t`方法的组件的文本会根据当前语言进行替换,从而实现全局中英文切换

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

m0_45925246

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值