分享一个自己写的vue多语言插件smart-vue-i18n
前言
目前有比较成熟的方案(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的更多相关文章
- 分享一个以前写的基于C#语言操作数据库的小框架
一:前言 这个是以前写的操作MySQL数据库的小型框架,如果是中小型项目用起来也是很不错的,里面提供Filter.ModelPart.Relationship等机制实现操作数据库时的SQL语句的拼接和 ...
- 分享一个c#写的开源分布式消息队列equeue
分享一个c#写的开源分布式消息队列equeue 前言 equeue消息队列中的专业术语 Topic Queue Producer Consumer Consumer Group Broker 集群消费 ...
- 分享一个自己写的MVC+EF “增删改查” 无刷新分页程序
分享一个自己写的MVC+EF “增删改查” 无刷新分页程序 一.项目之前得添加几个组件artDialog.MVCPager.kindeditor-4.0.先上几个效果图. 1.首先建立一个数 ...
- vue中使用时间插件、vue使用laydate
<input id="time1" readonly="readonly" placeholder="这里选择时间" v-model= ...
- 分享一个nodejs写的小论坛
引言:作为一个前端小菜鸟,最近迷上了node,于是乎空闲时间,为了练练手写了一个node的小社区,关于微信小程序的,欢迎大家批评指导. 项目架构部分 一.前端架构 作为一个写样式也得无聊的前端狮,我偷 ...
- 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)
需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...
- 分享一个自己写的基于TP的关系模型
为了说明问题,假设现在有表test1,test1有从表test2:test1属于test3,test1和test4多对多,关联表test1_test4. 1.定义关系 class Test1Model ...
- 分享一个自己写的基于JQuery的一个Web背景切换的Demo
这个效果主要有两个特点: 1. 背景切换的渐变 2. 背景大小自适应 3. 背景自适应保持比例同时, 相对居中 js源码: (function ($) { $.fn.bgChange = functi ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
随机推荐
- CF960G Bandit Blues 【第一类斯特林数 + 分治NTT】
题目链接 CF960G 题解 同FJOI2016只不过数据范围变大了 考虑如何预处理第一类斯特林数 性质 \[x^{\overline{n}} = \sum\limits_{i = 0}^{n}\be ...
- 解题:BZOJ 3884 上帝与集合的正确用法
题面 好久以前写的,发现自己居然一直没有写题解=.= 扩展欧拉定理:在$b>φ(p)$时有$a^b \equiv a^{b\%φ(p)+φ(p)}(mod$ $p)$ 然后每次递归那个$a^{b ...
- 2018.9.21 Codeforces Round #511(Div.2)
只写了AB,甚至还WA了一次A题,暴露了蒟蒻的本质=.= 感觉考的时候有好多正确或和正解有关的思路,但是就想不出具体的解法或者想的不够深(长)(怕不是过于鶸) 话说CF的E题怎么都这么清奇=.= A. ...
- Python之旅:数据类型、字符编码、文件处理
一 引子 1 什么是数据? x=10,10是我们要存储的数据 2 为何数据要分不同的类型 数据是用来表示状态的,不同的状态就应该用不同的类型的数据去表示 3 数据类型 以下每个类型都是有详细介绍链接的 ...
- bzoj 4919 [Lydsy1706月赛]大根堆 set启发式合并+LIS
4919: [Lydsy1706月赛]大根堆 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 599 Solved: 260[Submit][Stat ...
- 一、初识java
理论性的东西就不在笔记中作为纪录了. 先来解释下java安装过程中的一些问题,java安装和环境配置不多做强调,可以参考http://www.cnblogs.com/JianXu/p/5158404. ...
- 3 Kafka两个版本在Zookeeper的元数据存储
0.8 [consumers, admin, config, controller, brokers, controller_epoch] 这些节点都归于谁管理 consumers: 0.8版本的客户 ...
- Eclipse使用小结
一.Eclipse新建工作空间设置默认编码格式UTF-8 1.windows->Preferences...打开"首选项"对话框,左侧导航树,导航到general->W ...
- python学习笔记2-字符串操作
一.字符串切片 #切片也能适合字符串 tittle='今 天 发 苹 果' for i t in enumerate(tittle): #enumerate可以同时循环下标和值 print('%s:% ...
- springboot+mybatis使用PageHelper分页
项目结构和spring搭建mybatis请参考springboot整合mybatis.在这个基础上配置分页. 一:导入PageHelper依赖 <dependency> <group ...