前言

目前有比较成熟的方案(vue-i18n)了解了下,并且实用了一下感觉对于我在使用的项目来说略显臃肿,功能比较多,所以压缩的会比较大,在移动端不太适合所以自己花一天时间撸了一个vue多语言插件,压缩后大小不超过2kb

使用方法

通过Vue.js公开方法install安装,参数 lang 为初始化默认语言,参数 messages 为初始语言库,也可以在组件中新增多语言,语言库格式参照其他开源的国际化项目

安装

github地址: smart-vue-i18n

yarn add smart-vue-i18n

初始化

// 插件方式引用
// messages 为语言库
import { messages } from '@/utils/i18n-message/open-account/apply/index.js'
import i18n from 'smart-vue-i18n' Vue.use(i18n, {
lang: 'zhCHT',
messages
})

语言库格式

// 语言库格式
import { zhCHS } from './zh-chs'
import { zhCHT } from './zh-cht' export const messages = {
//简体中文
zhCHS,
//繁体中文
zhCHT
} // './zh-chs'
export const zhCHS = {
personalInfo: '个人资料',
} // './zh-cht'
export const zhCHT = {
personalInfo: '個人資料',
}

组件内使用

直接在组件内定义i18n多语言源 然后可以在页面使用切换语言可以不用刷新页面 方法 this.$i18n.setLang('zhCHS')组件内js使用 this.$t('personalInfo')组件内html使用 $t('personalInfo')

<template lang="pug">
yx-container.apply-home
.apply-main(slot="main")
.personalInfo {{$t('personalInfo')}}
.apply-main-add-credit(@click="testHandler") {{$t('test.a')}}
</template> <script>
export default {
i18n: {
zhCHS: {
test: {
a: '简体'
}
},
zhCHT: {
test: {
a: '简体'
}
}
},
methods: {
testHandler() {
this.$i18n.setLang(this.$i18n.lang === 'zhCHS' ? 'zhCHT' : 'zhCHS')
console.log(this, this.$i18n.lang)
}
}
}
</script>

原理解析

核心代码

const _vm = new Vue({
data: options
})
Object.defineProperty(Vue.prototype.$i18n, 'lang', {
get() {
return _vm.lang
}
})

将多语言挂载到vue原型上

然后 Object.defineProperty 监听Vue.prototype.$i18n变化

通过new Vue() 创建实例来实现语言切换实时渲染,可以不需要刷新页面

其他

时间仓促,一些常用的功能暂时没有,后续加上

欢迎使用并提出意见

分享一个自己写的vue多语言插件smart-vue-i18n的更多相关文章

  1. 分享一个以前写的基于C#语言操作数据库的小框架

    一:前言 这个是以前写的操作MySQL数据库的小型框架,如果是中小型项目用起来也是很不错的,里面提供Filter.ModelPart.Relationship等机制实现操作数据库时的SQL语句的拼接和 ...

  2. 分享一个c#写的开源分布式消息队列equeue

    分享一个c#写的开源分布式消息队列equeue 前言 equeue消息队列中的专业术语 Topic Queue Producer Consumer Consumer Group Broker 集群消费 ...

  3. 分享一个自己写的MVC+EF “增删改查” 无刷新分页程序

    分享一个自己写的MVC+EF “增删改查” 无刷新分页程序 一.项目之前得添加几个组件artDialog.MVCPager.kindeditor-4.0.先上几个效果图.      1.首先建立一个数 ...

  4. vue中使用时间插件、vue使用laydate

    <input id="time1" readonly="readonly" placeholder="这里选择时间" v-model= ...

  5. 分享一个nodejs写的小论坛

    引言:作为一个前端小菜鸟,最近迷上了node,于是乎空闲时间,为了练练手写了一个node的小社区,关于微信小程序的,欢迎大家批评指导. 项目架构部分 一.前端架构 作为一个写样式也得无聊的前端狮,我偷 ...

  6. 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)

    需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...

  7. 分享一个自己写的基于TP的关系模型

    为了说明问题,假设现在有表test1,test1有从表test2:test1属于test3,test1和test4多对多,关联表test1_test4. 1.定义关系 class Test1Model ...

  8. 分享一个自己写的基于JQuery的一个Web背景切换的Demo

    这个效果主要有两个特点: 1. 背景切换的渐变 2. 背景大小自适应 3. 背景自适应保持比例同时, 相对居中 js源码: (function ($) { $.fn.bgChange = functi ...

  9. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

随机推荐

  1. 洛谷 P1199 三国游戏 解题报告

    P1199 三国游戏 题目描述 小涵很喜欢电脑游戏,这些天他正在玩一个叫做<三国>的游戏. 在游戏中,小涵和计算机各执一方,组建各自的军队进行对战.游戏中共有\(N\)位武将(\(N\)为 ...

  2. java堆溢出

    java堆是用来存储对象实例的:只要不断创建对象,GC Roots到对象之间有可达路径来避免垃圾回收机制清除这些对象,当对象数量达到最大堆的容量限制的时候就会产生内存溢出异常.异常对战信息为OutOf ...

  3. ButterKnife注入注解框架用法

    Android 依赖注入 ButterKnife 基本使用 - 渐行渐远渐无声 - 博客园http://www.cnblogs.com/fansen/p/5653887.html ButterKnif ...

  4. 题解 P2486 【[SDOI2011]染色】

    写在前面 对于刚学树剖的同学比如我这种大大大蒟蒻来说,做这题会给你带来很大的提升:不仅可以对树剖有更深刻的理解,还可以更好的理解线段树,所以这是一道好题哦 为了更好懂,我一点一点说说思路吧 思路 首先 ...

  5. Java基础-字符串(String)常用方法

    Java基础-字符串(String)常用方法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.java的API概念 Java的API(API:Application(应用) Pr ...

  6. SQL Server 2008定期的备份数据库--差异+完整

    https://www.cnblogs.com/l1pe1/p/7885207.html https://www.cnblogs.com/tylerflyn/p/8051398.html https: ...

  7. 科学计算三维可视化---Mlab基础(基于Numpy数组的绘图函数)

    Mlab了解 Mlab是Mayavi提供的面向脚本的api,他可以实现快速的三维可视化,Mayavi可以通过Mlab的绘图函数对Numpy数组建立可视化. 过程为: .建立数据源 .使用Filter( ...

  8. NO.11天作业

    打印uid在30~40范围内的用户名.awk -F: '$3>=30 && $3<=40{print $1,$3}' /etc/passwd 打印第5-10行的行号和用户名 ...

  9. bzoj千题计划121:bzoj1033: [ZJOI2008]杀蚂蚁antbuster

    http://www.lydsy.com/JudgeOnline/problem.php?id=1033 经半个下午+一个晚上+半个晚上 的 昏天黑地调代码 最终成果: codevs.洛谷.tyvj上 ...

  10. Storm实现实时大数据分析

    当今世界,公司的日常运营经常会生成TB级别的数据.数据来源囊括了互联网装置可以捕获的任何类型数据,网站.社交媒体.交易型商业数据以及其它商业环境中创建的数据.考虑到数据的生成量,实时处理成为了许多机构 ...