Merge pull request lin-xin#169 from lin-xin/dev

lin-xin · web-flow · commit aa00e053efda · 2019-04-25T11:50:26.000+08:00
新增国际化功能
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "mavon-editor": "^2.6.17",
     "vue": "^2.5.21",
     "vue-cropperjs": "^3.0.0",
+    "vue-i18n": "^8.10.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.1",
     "vue-schart": "^1.0.0",
diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
@@ -107,6 +107,11 @@
                             }
                         ]
                     },
+                    {
+                        icon: 'el-icon-lx-global',
+                        index: 'i18n',
+                        title: '国际化功能'
+                    },
                     {
                         icon: 'el-icon-lx-warn',
                         index: '7',
diff --git a/src/components/common/i18n.js b/src/components/common/i18n.js
@@ -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'
+        }
+    }
+}
diff --git a/src/components/page/I18n.vue b/src/components/page/I18n.vue
@@ -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>
diff --git a/src/main.js b/src/main.js
@@ -3,18 +3,26 @@ import App from './App.vue'
 import router from './router'
 import axios from 'axios';
 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 '../static/css/theme-green/index.css';       // 浅绿色主题
 import './assets/css/icon.css';
 import './components/common/directives';
 import "babel-polyfill";
 
 Vue.config.productionTip = false
+Vue.use(VueI18n);
 Vue.use(ElementUI, {
     size: 'small'
 });
 Vue.prototype.$axios = axios;
 
+const i18n = new VueI18n({
+    locale: 'zh',
+    messages
+})
+
 //使用钩子函数对路由进行权限跳转
 router.beforeEach((to, from, next) => {
     const role = localStorage.getItem('ms_username');
@@ -38,5 +46,6 @@ router.beforeEach((to, from, next) => {
 
 new Vue({
     router,
+    i18n,
     render: h => h(App)
 }).$mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
@@ -75,6 +75,12 @@ export default new Router({
                     component: resolve => require(['../components/page/DragDialog.vue'], resolve),
                     meta: { title: '拖拽弹框' }
                 },
+                {
+                    // 国际化组件
+                    path: '/i18n',
+                    component: resolve => require(['../components/page/I18n.vue'], resolve),
+                    meta: { title: '国际化' }
+                },
                 {
                     // 权限页面
                     path: '/permission',

Original file line number	Diff line number	Diff line change
`@@ -107,6 +107,11 @@`
`107`	`107`	`}`
`108`	`108`	`]`
`109`	`109`	`},`
	`110`	`+ {`
	`111`	`+ icon: 'el-icon-lx-global',`
	`112`	`+ index: 'i18n',`
	`113`	`+ title: '国际化功能'`
	`114`	`+ },`
`110`	`115`	`{`
`111`	`116`	`icon: 'el-icon-lx-warn',`
`112`	`117`	`index: '7',`