标签：lang 插件 vue 自定义 welcome Vue message id locales

实现方式：类似于在数据字典中查找对应的翻译

 <script src="./vue.js"></script>
  <div id="app">
    <h1>{{$t('welcome-message')}}</h1>
    <button @click="changeLang('en')">English</button>
    <button @click="changeLang('zh')">中文</button>
    <button @click="changeLang('nl')">Dutch</button>
  </div>
  <script>
    const i18nPlugin={
      install(Vue,locales){//locales是传入的options
　　　　

 　　　//Vue.mixin({        //  methods:{        //     $t(id){        //       return locales[this.$root.lang][id]        //     }        //   }        // }) mixin混入

        Vue.prototype.$t=function(id){//全局注册$t函数
          return locales[this.$root.lang][id]//返回id对应的内容，this.$root.lang访问根组件的响应数据，也可以使用vuex管理数据
        }
      }
    }

    Vue.use(i18nPlugin,{
      en:{'welcome-message':'hello'},//类似于数据字典
      zh:{'welcome-message':'你好'},
      nl: { 'welcome-message': 'Hallo' },
    })

    new Vue({
      el:'#app',
      data:{
        lang:'en'
      },
      methods:{
        changeLang(lang){
          this.lang = lang
        }
      }
    })
  </script>

 

标签：lang,插件,vue,自定义,welcome,Vue,message,id,locales
来源： https://www.cnblogs.com/lijun12138/p/16366530.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。