zoukankan      html  css  js  c++  java
  • 修改elementUI组件自带的提示文字并支持国际化

    前言

      有时候我们开发的网站需要支持国际化,这个可以使用VueI18n来解决,但是遇到要求到每一个文字都必须按照她的意思走的领导,这种时候我们就不能用组件原先的文字了,而是要换成自定义的文字。

    执行方式

      第一步:安装项目依赖包

        cnpm install vue-i18n --save-dev

      第二步:在main.js中引入

    // 配置语言
    import ElementLocale from 'element-ui/lib/locale'
    import VueI18n  from 'vue-i18n'
    Vue.use(VueI18n)
    const messages = {
      'zh_CN': require('../static/lang/chinese.json'),
      'en_US': require('../static/lang/english.json'),
    }
    const i18n = new VueI18n({
      locale: 'en_US',
      messages, 
      silentTranslationWarn: true
    })
    ElementLocale.i18n((key, value) => i18n.t(key, value));

      第三步:配置对应的中文或者英文的json/js文件

     

       注意:这里要把原先elementUI的文字也拿过来,如elementUI原本的英文语言配置:

     

        加入到我们的json文件中:

      第四步:页面中获取

      

     

        $t就是直接获取数据,$tc(‘SignIn-via’,2)是json文件中的"SignIn-via": "Sign in via mobile number | Sign in via email",获取Sign in via email,下标是从1开始。

      第五步:写中英文切换的方法(下面两句代码直接放到方法里即可)

    this.$i18n.locale = e;
    localStorage["lang"] = e;

      在App.vue的created()或mounted()里面加上判断,下次直接读取缓存即可

    if (this.$i18n.messages[localStorage["lang"]]) this.$i18n.locale = localStorage["lang"];

    效果图

     

  • 相关阅读:
    spring 循环依赖问题
    spring data jpa 关键字 命名
    mongodb 添加字段并设置默认值
    java mongoTemplate的group统计
    java8 从对象集合中取出某个字段的集合
    springboot12-zuul
    springboot11-01-security入门
    springboot项目怎么部署到外部tomcat
    springboot10-springcloud-eureka 服务注册与发现,负载均衡客户端(ribbon,feign)调用
    UML
  • 原文地址:https://www.cnblogs.com/zxd66666/p/13479755.html
Copyright © 2011-2022 走看看