vue-multilang v1.0.4

vue-multilang: 前端多语言加载器

control of languages in vue2

Installation

# npm
npm install vue-multilang --save-dev

Example

cd vue-multilang
npm install
npm run dev

Get Started

in main.js

import Vue from 'vue'
import App from './App.vue'
import VueMultiLang from "vue-multilang"

Vue.use(VueMultiLang)

let multiLang = new VueMultiLang({
    path: './example/lang',
    version: 1,
    lang: ['ar', 'vi', 'th', 'id']
})
new Vue({
    el: '#app',
    multiLang, // 实例名约定 必须multiLang 参考router(vue-router)、store(vuex)
    render: h => h(App)
})

in HTML

<script src="/assets/js/vue.min.js"></script>
<script src="/assets/js/vue-multilang.js"></script>

let multiLang = new VueMultiLang({
    path: './example/lang',
    version: 1,
    lang: ['ar', 'vi', 'th', 'id']
})
new Vue({
    el: '#app',
    multiLang, // 实例名约定 必须multiLang 参考router(vue-router)、store(vuex)
    render: h => h(App)
})

More details:

• langCode: 语言码
• countryCode: 国家码
• langObj: 语言包数据
• onReady: 语言包加载完毕后的回调函数 可写多个
  • @param fn(data): data是语言包数据
• template: 模板内容替换 动态替换语言包的内容 匹配规则为%s
  • @param key: 语言包字段

  • @param args: 动态参数列表

use in components - this.$lang inside of any component

export default {
    ...,
    data() {
        return {
            langObj: {},
            lang: ''
        }
    },
    computed: {
        text() {
            /**
             * {'rank': 'my name is %s'} from langObj 
             */
             
            // result: 'my name is dongshaohan'
            return this.$lang.template('rank', ['dongshaohan'])
        }
    },
    created() {
        this.$lang.onReady(() => {
            this.langObj = this.$lang.langObj
            this.langCode = this.$lang.langCode
            this.countryCode = this.$lang.countryCode
        });
    },
    ...
}

use in window - window.$multiLang

window.$multiLang.langCode
window.$multiLang.countryCode
window.$multiLang.langObj
window.$multiLang.onReady
window.$multiLang.template

Config