VUE+Element国际化(vue-il8n)实现多语言

橘子橙 等级 944 1 1
标签: elementjs前端

1.安装:npm install vue-i18n 2.在main.js引入i18n,注册,并设置element语言

import i18n from './lang' 
// set ElementUI lang ,兼容elementui写法
Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) })
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

3.src/lang/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')
  // const chooseLanguage = localStorage.get('language')
  if (chooseLanguage) return chooseLanguage

  // if has not choose language
  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 'en'
}
const i18n = new VueI18n({
  // set locale
  // options: en | zh | es
  locale: 'zh',
  // set locale messages
  messages
})

export default i18n

4.准备语言包 VUE+Element国际化(vue-il8n)实现多语言

VUE+Element国际化(vue-il8n)实现多语言 5.使用方式 (1)双括号{{$t('xxx.yyy')}}

<p @click="showWarning">{{$t('login.username')}}

(2)绑定到属性上 :prop="$t('xxx.yyy')"

:placeholder="$t('placeholder.date')">

(3)在js中使用${this.$t('xxx.yyy')}//注意使用反引号

`${this.$t('xxx.yyy')}`
收藏
评论区

相关推荐

🎉无人维护?官方打脸:Element UI for Vue 3.0 来了!🎊
Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是 Element 对 Vue 3.0 的升级适配。此前网上有传言称 Element 无人维护,Element UI 也不会支持 Vue 3.0,这次官方出来打脸了。 image(https://imghelloworld.ossc
element-ui Dialog组件的close-on-click-modal属性
element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog,即点击空白处弹框可关闭。 单功能设置如下: <eldialog :closeonclickmodal"false" </eldialog 全局修改默认配置,点击空白处不能关闭弹窗: //在组件注册.js文件中 Dialog.props.cl
VUE+Element国际化(vue-il8n)实现多语言
1.安装:npm install vuei18n 2.在main.js引入i18n,注册,并设置element语言 import i18n from './lang' // set ElementUI lang ,兼容elementui写法 Vue.use(ElementUI, { i18n: (key, value) i18n.t(key, v
【Flutter实战】布局类组件简介
4.1 布局类组件简介布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排版(layout)方式不同。我们在前面说过Element树才是最终的绘制树,Element树是通过Widget树来创建的(通过Widget.createElement()),Widget其实就是Element的配置数据。在Flutter中,根据Widget是否
go语言坑之list删除所有元素
go提供了一个list包 类似python的list,可以存储任意类型的数据,并提供了相应的API,如下:type Element func (e Element) Next() Element func (e Element) Prev() Elementtype List func New() List func (l List)
DOM解析XML案例Demo(一)
### **一、Java中操作DOM中常用的类** * Node  数据类型基类 * Element  最常用的类 * Attr  Element的属性 * Text  Element or Attr的内容 * Document  代表整个XML文档,代表DOM tree #
ELementUI 树形控件tree 获取子节点同时获取半选择状态的父节点ID
使用element-ui  tree树形控件的时候,在选择一个子节点后,使用getCheckedKeys 后,发现只能返回子节点的ID,但是其父节点ID没有返回。 解决办法有三种: 1.element-ui 有一个获取半选择状态值ID得方法   getHalfCheckedKeys   这个方法用来获取父节点半选择状态ID值 2.修改源码   找到
Element header
方式1:     直接在标签上添加上属性值: <el-table :header-cell-style="{background:'#F3F4F7',color:'#555'}" ></el-table> 方式2:     在method里面写上方法: rowClass({ row, rowIndex}) {
Phalcon7发布1.1.0版
合并 `Phalcon\Mvc\Model\Validator\*` 到 `Phalcon\Validation\Validator\` 统一验证类。 优化表单类,更加方便的创建新的表单元素,并支持转换为数组,提供给前端JS动态生成表单。 内置支持 `HMVC`。强化 Model,更加方便的自定义字段和映射字段。 完善了文档。 <?php
React的Element的创建和render
React的Element是React应用程序的最小构建块,它是用来描述我们在屏幕上看到的浏览器页面上的内容。 在React中构建 Element 有两种方式: 1、JSX的方式,JSX不是React的必用技术,但它可以用来产生一个 React “element”. const element = ( <h1 className="
The root element is missing 解决方法
**The root element is missing 解决方法** 参考文章: [(1)The root element is missing 解决方法](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.codeprj.com%2Fblog%2F23ed7a1.html)
VUE +element el
Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) ![](https://img2018.cnblogs.com/blog/1022288/201809/1022288-20180928101029146-110495051.png) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了so
vue element
1.真正理解v-model input元素上的v-model其实是一个语法糖,其真正作用有两个:(1)创建一个props,其键为value;(2)监听input事件,改变value。键名与事件名都可以另外设置。 当定义一个组件时,v-model是绑定在input的外层的,所以需要手动实现v-model。 2.provide / inject prov
vue element
工作中遇到后台给的表格数据里时间是一个13位的时间戳,需要转换成时间显示在表格里, 可以用element-ui表格自带的:formatter函数,来格式化表格内容: 1 // 时间戳转换成时间 2 // 使用element table组件中的formatter属性,传入一个函数 3 timestampToTime
vue+element
页面展示: ![](https://oscimg.oschina.net/oscnet/46b9f7c40a7aedbcc30f2c107ca22129439.jpg) vue组件中分页代码: <div class="pagination"> <el-pagination

热门文章

vue-element-admin项目打包后,iconfont图标出现乱码

最新文章

vue-element-admin项目打包后,iconfont图标出现乱码