新增国际化功能
lin-xin
parent
f5c8515803
commit
95d97f1b37
|
|
@ -14,6 +14,7 @@
|
||||||
"mavon-editor": "^2.6.17",
|
"mavon-editor": "^2.6.17",
|
||||||
"vue": "^2.5.21",
|
"vue": "^2.5.21",
|
||||||
"vue-cropperjs": "^3.0.0",
|
"vue-cropperjs": "^3.0.0",
|
||||||
|
"vue-i18n": "^8.10.0",
|
||||||
"vue-quill-editor": "^3.0.6",
|
"vue-quill-editor": "^3.0.6",
|
||||||
"vue-router": "^3.0.1",
|
"vue-router": "^3.0.1",
|
||||||
"vue-schart": "^1.0.0",
|
"vue-schart": "^1.0.0",
|
||||||
|
|
|
||||||
|
|
@ -107,6 +107,11 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
icon: 'el-icon-lx-global',
|
||||||
|
index: 'i18n',
|
||||||
|
title: '国际化功能'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
icon: 'el-icon-lx-warn',
|
icon: 'el-icon-lx-warn',
|
||||||
index: '7',
|
index: '7',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
export const messages = {
|
||||||
|
'zh': {
|
||||||
|
i18n: {
|
||||||
|
breadcrumb: '国际化产品',
|
||||||
|
tips: '通过切换语言按钮，来改变当前内容的语言。',
|
||||||
|
btn: '切换英文',
|
||||||
|
title1: '常用用法',
|
||||||
|
p1: '要是你把你的秘密告诉了风，那就别怪风把它带给树。',
|
||||||
|
p2: '没有什么比信念更能支撑我们度过艰难的时光了。',
|
||||||
|
p3: '只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。',
|
||||||
|
title2: '组件插值',
|
||||||
|
info: 'Element组件需要国际化，请参考 {action}。',
|
||||||
|
value: '文档'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'en': {
|
||||||
|
i18n: {
|
||||||
|
breadcrumb: 'International Products',
|
||||||
|
tips: 'Click on the button to change the current language. ',
|
||||||
|
btn: 'Switch Chinese',
|
||||||
|
title1: 'Common usage',
|
||||||
|
p1: "If you reveal your secrets to the wind you should not blame the wind for revealing them to the trees.",
|
||||||
|
p2: "Nothing can help us endure dark times better than our faith. ",
|
||||||
|
p3: "If you can do what you do best and be happy, you're further along in life than most people.",
|
||||||
|
title2: 'Component interpolation',
|
||||||
|
info: 'The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.',
|
||||||
|
value: 'documentation'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<template>
|
||||||
|
<section class="main">
|
||||||
|
<div class="crumbs">
|
||||||
|
<el-breadcrumb separator="/">
|
||||||
|
<el-breadcrumb-item><i class="el-icon-lx-global"></i> {{$t('i18n.breadcrumb')}}</el-breadcrumb-item>
|
||||||
|
</el-breadcrumb>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<span>{{$t('i18n.tips')}}</span>
|
||||||
|
<el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh'?'en':'zh';">{{$t('i18n.btn')}}</el-button>
|
||||||
|
<div class="list">
|
||||||
|
<h2>{{$t('i18n.title1')}}</h2>
|
||||||
|
<p>{{$t('i18n.p1')}}</p>
|
||||||
|
<p>{{$t('i18n.p2')}}</p>
|
||||||
|
<p>{{$t('i18n.p3')}}</p>
|
||||||
|
</div>
|
||||||
|
<h2>{{$t('i18n.title2')}}</h2>
|
||||||
|
<div>
|
||||||
|
<i18n path="i18n.info" tag="p">
|
||||||
|
<a place="action" href="https://element.eleme.cn/2.0/#/zh-CN/component/i18n">{{ $t('i18n.value') }}</a>
|
||||||
|
</i18n>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.list{
|
||||||
|
padding: 30px 0;
|
||||||
|
}
|
||||||
|
.list p{
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -3,6 +3,8 @@ import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import ElementUI from 'element-ui';
|
import ElementUI from 'element-ui';
|
||||||
|
import VueI18n from 'vue-i18n';
|
||||||
|
import { messages } from './components/common/i18n';
|
||||||
import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
|
import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
|
||||||
// import '../static/css/theme-green/index.css'; // 浅绿色主题
|
// import '../static/css/theme-green/index.css'; // 浅绿色主题
|
||||||
import './assets/css/icon.css';
|
import './assets/css/icon.css';
|
||||||
|
|
@ -10,11 +12,17 @@ import './components/common/directives';
|
||||||
import "babel-polyfill";
|
import "babel-polyfill";
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
Vue.use(VueI18n);
|
||||||
Vue.use(ElementUI, {
|
Vue.use(ElementUI, {
|
||||||
size: 'small'
|
size: 'small'
|
||||||
});
|
});
|
||||||
Vue.prototype.$axios = axios;
|
Vue.prototype.$axios = axios;
|
||||||
|
|
||||||
|
const i18n = new VueI18n({
|
||||||
|
locale: 'zh',
|
||||||
|
messages
|
||||||
|
})
|
||||||
|
|
||||||
//使用钩子函数对路由进行权限跳转
|
//使用钩子函数对路由进行权限跳转
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
const role = localStorage.getItem('ms_username');
|
const role = localStorage.getItem('ms_username');
|
||||||
|
|
@ -38,5 +46,6 @@ router.beforeEach((to, from, next) => {
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
router,
|
router,
|
||||||
|
i18n,
|
||||||
render: h => h(App)
|
render: h => h(App)
|
||||||
}).$mount('#app')
|
}).$mount('#app')
|
||||||
|
|
@ -75,6 +75,12 @@ export default new Router({
|
||||||
component: resolve => require(['../components/page/DragDialog.vue'], resolve),
|
component: resolve => require(['../components/page/DragDialog.vue'], resolve),
|
||||||
meta: { title: '拖拽弹框' }
|
meta: { title: '拖拽弹框' }
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
// 国际化组件
|
||||||
|
path: '/i18n',
|
||||||
|
component: resolve => require(['../components/page/I18n.vue'], resolve),
|
||||||
|
meta: { title: '国际化' }
|
||||||
|
},
|
||||||
{
|
{
|
||||||
// 权限页面
|
// 权限页面
|
||||||
path: '/permission',
|
path: '/permission',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue