fsdgq-i18n
This is an international language pack based on vuejs!
use
download package
npm install xqi18n --savecreate
Create a new folder locale
+ locale
- config
- zhCn.js
- zhHk.js
- enUs.js
...
- index.jsFor example: the following method of use
// zh-cn.js
const zhCn = {
name: '快乐'
}
export default zhCn;
// zh-hk.js
const zhHk = {
name: '快樂'
}
export default zhHk;
// en-us.js
const enUs = {
name: 'happy'
}
export default enUs;create a file index.js
// index.js
import xqi18n from 'xqi18n'
import zhCn from './config/zh-cn'
import zhHk from './config/zh-hk'
import enUs from './config/en-us'
const xqI18n = new xqi18n({
lang: localStorage.getItem('locale') || 'zhCn';
messages: {
zhCn,
zhHk,
enUs
}
})
export default xqI18n;Mount to main.js
// main.js
import xqI18n from './locale/index'
Vue.prototype.$xqI18n = xqI18n;
Vue.prototype.$tns = xqI18n.tns;
window.$tns = xqI18n.tns;Use in components
<template>
<div>
{{ $tns('name') }}
<input type="text" :placeholder="$tns('name')">
</div>
</template>
<script>
export default {
methods: {
showLang () {
let currentLang = localStorage.getItem('locale') || 'zhCn';
let allLang = this.$xqI18n.messages;
console.log('message: ', allLang);
console.log('name:', this.$tns('name'));
},
toggleLang (val) {
localStorage.SetItem('locale', val);
location.reload();
}
}
}
</script>