<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-i18n/8.22.1/vue-i18n.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ $t("T2") }}</p>
<ol>
<li>{{ $t("T3") }}</li>
<li>{{ $t("T4") }}</li>
<li>{{ $t("T5") }}</li>
<li>{{ $t("T6") }}</li>
<li>{{ $t("T7") }}</li>
<li>{{ $t("T8") }}</li>
<li>{{ $t("T9") }}</li>
</ol>
<div class="locale-changer">
<select v-model="$i18n.locale">
<option v-for="(lang, i) in langs" :value="lang">{{ lang }}</option>
</select>
</div>
</div>
<script>
// 判断url地址中是否包含link字符串
function checkurl(str) {
var url = window.location.href;
if(url.indexOf(str) >= 0 ) {
return 1;
}else{
return 0;
}
}
// 准备翻译的语言环境信息
$.ajax({url:'http://e945.net/index.php?c=api&a=getlanglist&cid=1&jsoncallback=?', async:false, dataType:'jsonp', jsonp:'jsoncallback', success: function (jsonp) {
const messages = jsonp;
var locale = 'zh';
if(checkurl('zh-cn')) locale = 'zh';
if(checkurl('en')) locale = 'en';
if(checkurl('kor')) locale = 'kor';
if(checkurl('jp')) locale = 'jp';
// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
locale: locale, // 设置地区
messages: messages
})
new Vue({
i18n: i18n,
messages: messages,
el: '#app',
data: {
langs: ['zh', 'en', 'kor', 'jp'],
},
created: function(){
// this.request();
},
methods:{
request:function(){
//发送get请求
this.$http.get('vue-i18n/language-all.json').then(function(res){
console.dir(res.body);
return res.body;
},function(){
console.log('请求失败处理');
});
}
},
mounted: function(){
}
})
},
beforeSend:function(){$('body').append('<div id="nobita-loading" style="background-color:#E74C3C;width:100%;height:100%;text-align:center;position:absolute;top:0;line-height:300px;"><img src="http://samherbert.net/svg-loaders/svg-loaders/three-dots.svg" width="60"></div>');},
complete: function(XMLHttpRequest, textStatus){
$('#nobita-loading').remove();
},
//调用出错执行的函数
error: function(){
alert('数据加载失败');
}
});
</script>
</body>
</html>
vue-i18n多语言国际化实践
最新推荐文章于 2024-07-03 12:01:14 发布