Merge pull request #1015 from iview/2.0

添加多语言示例页，支持自定义指定首页

package.json

@@ -18,7 +18,7 @@
  "cropperjs": "^1.2.2",
  "echarts": "^4.0.4",
  "html2canvas": "^1.0.0-alpha.12",
- "iview": "^3.0.0",
+ "iview": "^3.1.3",
  "iview-area": "^1.5.17",
  "js-cookie": "^2.2.0",
  "simplemde": "^1.11.2",

src/config/index.js

@@ -8,12 +8,16 @@ export default {
  * 如果不使用，则需要在路由中给需要在菜单中展示的路由设置meta: {title: 'xxx'}
  * 用来在菜单中显示文字
  */
- useI18n: false,
+ useI18n: true,
  /**
  * @description api请求基础路径
  */
  baseUrl: {
  dev: 'https://www.easy-mock.com/mock/5add9213ce4d0e69998a6f51/iview-admin/',
  pro: 'https://produce.com'
- }
+ },
+ /**
+ * @description 默认打开的首页的路由name值，默认为home
+ */
+ homeName: 'home'
 }

src/libs/util.js

@@ -100,7 +100,7 @@ export const getTagNavListFromLocalstorage = () => {
  * @param {Array} routers 路由列表数组
  * @description 用于找到路由列表中name为home的对象
  */
-export const getHomeRoute = routers => {
+export const getHomeRoute = (routers, homeName = 'home') => {
  let i = -1
  let len = routers.length
  let homeRoute = {}
@@ -110,7 +110,7 @@ export const getHomeRoute = routers => {
  let res = getHomeRoute(item.children)
  if (res.name) return res
  } else {
- if (item.name === 'home') homeRoute = item
+ if (item.name === homeName) homeRoute = item
  }
  }
  return homeRoute
@@ -320,3 +320,11 @@ export const routeHasExist = (tagNavList, routeItem) => {
  })
  return res
 }
+
+export const localSave = (key, value) => {
+ localStorage.setItem(key, value)
+}
+
+export const localRead = (key) => {
+ return localStorage.getItem(key) || ''
+}

src/locale/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
+import { localRead } from '@/libs/util'
 import customZhCn from './lang/zh-CN'
 import customZhTw from './lang/zh-TW'
 import customEnUs from './lang/en-US'
@@ -12,7 +13,7 @@ Vue.use(VueI18n)
 // 自动根据浏览器系统语言设置语言
 const navLang = navigator.language
 const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false
-let lang = window.localStorage.lang || localLang || 'zh-CN'
+let lang = localLang || localRead('local') || 'zh-CN'
 
 Vue.config.lang = lang
 

src/locale/lang/en-US.js

@@ -1,4 +1,5 @@
 export default {
+ home: 'Home',
  components: 'Components',
  count_to_page: 'Count-to',
  tables_page: 'Table',
@@ -16,5 +17,15 @@ export default {
  directive_page: 'Directive',
  level_1: 'level-1',
  level_2: 'level-2',
- level_2_1: 'level-2-1'
+ level_2_1: 'level-2-1',
+ excel: 'Excel',
+ 'upload-excel': 'Upload Excel',
+ 'export-excel': 'Export Excel',
+ tools_methods_page: 'Tools Methods',
+ drag_list_page: 'Drag-list',
+ i18n_page: 'Internationalization',
+ modalTitle: 'Modal Title',
+ content: 'This is the modal box content.',
+ buttonText: 'Show Modal',
+ 'i18n-tip': 'Note: Only this page is multi-language, other pages do not add language content to the multi-language package.'
 }

src/locale/lang/zh-CN.js

@@ -1,4 +1,5 @@
 export default {
+ home: '首页',
  components: '组件',
  count_to_page: '数字渐变',
  tables_page: '多功能表格',
@@ -16,5 +17,15 @@ export default {
  directive_page: '指令',
  level_1: 'level-1',
  level_2: 'level-2',
- level_2_1: 'level-2-1'
+ level_2_1: 'level-2-1',
+ excel: 'Excel',
+ 'upload-excel': '上传excel',
+ 'export-excel': '导出excel',
+ tools_methods_page: '工具函数',
+ drag_list_page: '拖拽列表',
+ i18n_page: '多语言',
+ modalTitle: '模态框题目',
+ content: '这是模态框内容',
+ buttonText: '显示模态框',
+ 'i18n-tip': '注：仅此页做了多语言，其他页面没有在多语言包中添加语言内容'
 }

src/locale/lang/zh-TW.js

@@ -1,4 +1,5 @@
 export default {
+ home: '首頁',
  components: '组件',
  count_to_page: '数字渐变',
  tables_page: '多功能表格',
@@ -16,5 +17,15 @@ export default {
  directive_page: '指令',
  level_1: 'level-1',
  level_2: 'level-2',
- level_2_1: 'level-2-1'
+ level_2_1: 'level-2-1',
+ excel: 'Excel',
+ 'upload-excel': '上傳excel',
+ 'export-excel': '導出excel',
+ tools_methods_page: '工具函數',
+ drag_list_page: '拖拽列表',
+ i18n_page: '多語言',
+ modalTitle: '模態框題目',
+ content: '這是模態框內容',
+ buttonText: '顯示模態框',
+ 'i18n-tip': '注：僅此頁做了多語言，其他頁面沒有在多語言包中添加語言內容'
 }

src/router/routers.js

@@ -38,7 +38,8 @@ export default [
  meta: {
  hideInMenu: true,
  title: '首页',
- notCache: true
+ notCache: true,
+ icon: 'md-home'
  },
  component: () => import('@/view/single-page/home')
  }
@@ -221,6 +222,25 @@ export default [
  }
  ]
  },
+ {
+ path: '/i18n',
+ name: 'i18n',
+ meta: {
+ hide: true
+ },
+ component: Main,
+ children: [
+ {
+ path: 'i18n_page',
+ name: 'i18n_page',
+ meta: {
+ icon: 'md-planet',
+ title: '指令'
+ },
+ component: () => import('@/view/i18n/i18n-page.vue')
+ }
+ ]
+ },
  {
  path: '/directive',
  name: 'directive',

src/store/module/app.js

@@ -7,11 +7,15 @@ import {
  getNextRoute,
  routeHasExist,
  routeEqual,
- getRouteTitleHandled
+ getRouteTitleHandled,
+ localSave,
+ localRead
 } from '@/libs/util'
 import beforeClose from '@/router/before-close'
 import router from '@/router'
 import routers from '@/router/routers'
+import config from '@/config'
+const { homeName } = config
 
 const closePage = (state, route) => {
  const nextRoute = getNextRoute(state.tagNavList, route)
@@ -25,8 +29,8 @@ export default {
  state: {
  breadCrumbList: [],
  tagNavList: [],
- homeRoute: getHomeRoute(routers),
- local: ''
+ homeRoute: getHomeRoute(routers, homeName),
+ local: localRead('local')
  },
  getters: {
  menuList: (state, getters, rootState) => getMenuByRouter(routers, rootState.user.access)
@@ -67,6 +71,7 @@ export default {
  }
  },
  setLocal (state, lang) {
+ localSave('local', lang)
  state.local = lang
  }
  }

src/view/i18n/i18n-page.vue

@@ -0,0 +1,50 @@
+<template>
+ <div>
+ <Row :gutter="10">
+ <i-col span="6">
+ <Card>
+ <div class="i18n-card-box">
+ <DatePicker type="date" placeholder="Select date"></DatePicker>
+ <TimePicker type="timerange" placement="bottom-end" placeholder="Select time" style="display: block;margin-top: 10px;"></TimePicker>
+ <Button type="primary" @click="modalVisible = true" style="margin-top: 10px;">{{ $t('buttonText') }}</Button>
+ <Modal
+ v-model="modalVisible"
+ :title="$t('modalTitle')">
+ <p>{{ content }}</p>
+ <p>{{ content }}</p>
+ <p>{{ content }}</p>
+ </Modal>
+ <i class="tip">{{ $t('i18n-tip') }}</i>
+ </div>
+ </Card>
+ </i-col>
+ </Row>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'i18n_page',
+ data () {
+ return {
+ modalVisible: false
+ }
+ },
+ computed: {
+ content () {
+ return this.$t('content')
+ }
+ }
+}
+</script>
+
+<style lang="less">
+.i18n-card-box{
+ height: 200px;
+ .tip{
+ color: gray;
+ display: block;
+ margin-top: 20px;
+ }
+}
+</style>

vue.config.js

@@ -32,7 +32,6 @@ module.exports = {
  config.resolve.alias
  .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
  .set('_c', resolve('src/components'))
- .set('_conf', resolve('config'))
  },
  // 打包时不生成.map文件
  productionSourceMap: false