分享一個自己寫的vue多語言插件smart-vue-i18n
阿新 • • 發佈:2019-04-05
https 實現 template contain 解析 前言 了解 pre prot
前言
目前有比較成熟的方案(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