vue-i18n多语言国际化实践

<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值