chore: remove i18n (#1828)
花裤衩
5 years ago
committed by
GitHub
parent
e8e6c7e79c
commit
00a19db299
@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
|
||||
<div>
|
||||
<svg-icon class-name="international-icon" icon-class="language" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :disabled="language==='zh'" command="zh">
|
||||
中文
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="language==='en'" command="en">
|
||||
English
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="language==='es'" command="es">
|
||||
Español
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="language==='ja'" command="ja">
|
||||
日本語
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
language() {
|
||||
return this.$store.getters.language
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLanguage(lang) {
|
||||
this.$i18n.locale = lang
|
||||
this.$store.dispatch('app/setLanguage', lang)
|
||||
this.$message({
|
||||
message: 'Switch Language Success',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,175 +0,0 @@
|
||||
export default {
|
||||
route: {
|
||||
dashboard: 'Dashboard',
|
||||
documentation: 'Documentation',
|
||||
guide: 'Guide',
|
||||
permission: 'Permission',
|
||||
pagePermission: 'Page Permission',
|
||||
rolePermission: 'Role Permission',
|
||||
directivePermission: 'Directive Permission',
|
||||
icons: 'Icons',
|
||||
components: 'Components',
|
||||
tinymce: 'Tinymce',
|
||||
markdown: 'Markdown',
|
||||
jsonEditor: 'JSON Editor',
|
||||
dndList: 'Dnd List',
|
||||
splitPane: 'SplitPane',
|
||||
avatarUpload: 'Avatar Upload',
|
||||
dropzone: 'Dropzone',
|
||||
sticky: 'Sticky',
|
||||
countTo: 'Count To',
|
||||
componentMixin: 'Mixin',
|
||||
backToTop: 'Back To Top',
|
||||
dragDialog: 'Drag Dialog',
|
||||
dragSelect: 'Drag Select',
|
||||
dragKanban: 'Drag Kanban',
|
||||
charts: 'Charts',
|
||||
keyboardChart: 'Keyboard Chart',
|
||||
lineChart: 'Line Chart',
|
||||
mixChart: 'Mix Chart',
|
||||
example: 'Example',
|
||||
nested: 'Nested Routes',
|
||||
menu1: 'Menu 1',
|
||||
'menu1-1': 'Menu 1-1',
|
||||
'menu1-2': 'Menu 1-2',
|
||||
'menu1-2-1': 'Menu 1-2-1',
|
||||
'menu1-2-2': 'Menu 1-2-2',
|
||||
'menu1-3': 'Menu 1-3',
|
||||
menu2: 'Menu 2',
|
||||
Table: 'Table',
|
||||
dynamicTable: 'Dynamic Table',
|
||||
dragTable: 'Drag Table',
|
||||
inlineEditTable: 'Inline Edit',
|
||||
complexTable: 'Complex Table',
|
||||
tab: 'Tab',
|
||||
form: 'Form',
|
||||
createArticle: 'Create Article',
|
||||
editArticle: 'Edit Article',
|
||||
articleList: 'Article List',
|
||||
errorPages: 'Error Pages',
|
||||
page401: '401',
|
||||
page404: '404',
|
||||
errorLog: 'Error Log',
|
||||
excel: 'Excel',
|
||||
exportExcel: 'Export Excel',
|
||||
selectExcel: 'Export Selected',
|
||||
mergeHeader: 'Merge Header',
|
||||
uploadExcel: 'Upload Excel',
|
||||
zip: 'Zip',
|
||||
pdf: 'PDF',
|
||||
exportZip: 'Export Zip',
|
||||
theme: 'Theme',
|
||||
clipboardDemo: 'Clipboard',
|
||||
i18n: 'I18n',
|
||||
externalLink: 'External Link',
|
||||
profile: 'Profile'
|
||||
},
|
||||
navbar: {
|
||||
dashboard: 'Dashboard',
|
||||
github: 'Github',
|
||||
logOut: 'Log Out',
|
||||
profile: 'Profile',
|
||||
theme: 'Theme',
|
||||
size: 'Global Size'
|
||||
},
|
||||
login: {
|
||||
title: 'Login Form',
|
||||
logIn: 'Login',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
any: 'any',
|
||||
thirdparty: 'Or connect with',
|
||||
thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
|
||||
},
|
||||
documentation: {
|
||||
documentation: 'Documentation',
|
||||
github: 'Github Repository'
|
||||
},
|
||||
permission: {
|
||||
addRole: 'New Role',
|
||||
editPermission: 'Edit',
|
||||
roles: 'Your roles',
|
||||
switchRoles: 'Switch roles',
|
||||
tips: 'In some cases, using v-permission will have no effect. For example: Element-UI el-tab or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.',
|
||||
delete: 'Delete',
|
||||
confirm: 'Confirm',
|
||||
cancel: 'Cancel'
|
||||
},
|
||||
guide: {
|
||||
description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
|
||||
button: 'Show Guide'
|
||||
},
|
||||
components: {
|
||||
documentation: 'Documentation',
|
||||
tinymceTips: 'Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.',
|
||||
dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
|
||||
stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
|
||||
backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
|
||||
backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
|
||||
imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
|
||||
},
|
||||
table: {
|
||||
dynamicTips1: 'Fixed header, sorted by header order',
|
||||
dynamicTips2: 'Not fixed header, sorted by click order',
|
||||
dragTips1: 'The default order',
|
||||
dragTips2: 'The after dragging order',
|
||||
title: 'Title',
|
||||
importance: 'Imp',
|
||||
type: 'Type',
|
||||
remark: 'Remark',
|
||||
search: 'Search',
|
||||
add: 'Add',
|
||||
export: 'Export',
|
||||
reviewer: 'reviewer',
|
||||
id: 'ID',
|
||||
date: 'Date',
|
||||
author: 'Author',
|
||||
readings: 'Readings',
|
||||
status: 'Status',
|
||||
actions: 'Actions',
|
||||
edit: 'Edit',
|
||||
publish: 'Publish',
|
||||
draft: 'Draft',
|
||||
delete: 'Delete',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm'
|
||||
},
|
||||
example: {
|
||||
warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'
|
||||
},
|
||||
errorLog: {
|
||||
tips: 'Please click the bug icon in the upper right corner',
|
||||
description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
|
||||
documentation: 'Document introduction'
|
||||
},
|
||||
excel: {
|
||||
export: 'Export',
|
||||
selectedExport: 'Export Selected Items',
|
||||
placeholder: 'Please enter the file name (default excel-list)'
|
||||
},
|
||||
zip: {
|
||||
export: 'Export',
|
||||
placeholder: 'Please enter the file name (default file)'
|
||||
},
|
||||
pdf: {
|
||||
tips: 'Here we use window.print() to implement the feature of downloading PDF.'
|
||||
},
|
||||
theme: {
|
||||
change: 'Change Theme',
|
||||
documentation: 'Theme documentation',
|
||||
tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
|
||||
},
|
||||
tagsView: {
|
||||
refresh: 'Refresh',
|
||||
close: 'Close',
|
||||
closeOthers: 'Close Others',
|
||||
closeAll: 'Close All'
|
||||
},
|
||||
settings: {
|
||||
title: 'Page style setting',
|
||||
theme: 'Theme Color',
|
||||
tagsView: 'Open Tags-View',
|
||||
fixedHeader: 'Fixed Header',
|
||||
sidebarLogo: 'Sidebar Logo'
|
||||
}
|
||||
}
|
||||
@ -1,175 +0,0 @@
|
||||
export default {
|
||||
route: {
|
||||
dashboard: 'Panel de control',
|
||||
documentation: 'Documentación',
|
||||
guide: 'Guía',
|
||||
permission: 'Permisos',
|
||||
rolePermission: 'Permisos de rol',
|
||||
pagePermission: 'Permisos de la página',
|
||||
directivePermission: 'Permisos de la directiva',
|
||||
icons: 'Iconos',
|
||||
components: 'Componentes',
|
||||
tinymce: 'Tinymce',
|
||||
markdown: 'Markdown',
|
||||
jsonEditor: 'Editor JSON',
|
||||
dndList: 'Lista Dnd',
|
||||
splitPane: 'Panel dividido',
|
||||
avatarUpload: 'Subir avatar',
|
||||
dropzone: 'Subir ficheros',
|
||||
sticky: 'Sticky',
|
||||
countTo: 'CountTo',
|
||||
componentMixin: 'Mixin',
|
||||
backToTop: 'Ir arriba',
|
||||
dragDialog: 'Drag Dialog',
|
||||
dragSelect: 'Drag Select',
|
||||
dragKanban: 'Drag Kanban',
|
||||
charts: 'Gráficos',
|
||||
keyboardChart: 'Keyboard Chart',
|
||||
lineChart: 'Gráfico de líneas',
|
||||
mixChart: 'Mix Chart',
|
||||
example: 'Ejemplo',
|
||||
nested: 'Rutas anidadass',
|
||||
menu1: 'Menu 1',
|
||||
'menu1-1': 'Menu 1-1',
|
||||
'menu1-2': 'Menu 1-2',
|
||||
'menu1-2-1': 'Menu 1-2-1',
|
||||
'menu1-2-2': 'Menu 1-2-2',
|
||||
'menu1-3': 'Menu 1-3',
|
||||
menu2: 'Menu 2',
|
||||
Table: 'Tabla',
|
||||
dynamicTable: 'Tabla dinámica',
|
||||
dragTable: 'Arrastrar tabla',
|
||||
inlineEditTable: 'Editor',
|
||||
complexTable: 'Complex Table',
|
||||
tab: 'Pestaña',
|
||||
form: 'Formulario',
|
||||
createArticle: 'Crear artículo',
|
||||
editArticle: 'Editar artículo',
|
||||
articleList: 'Listado de artículos',
|
||||
errorPages: 'Páginas de error',
|
||||
page401: '401',
|
||||
page404: '404',
|
||||
errorLog: 'Registro de errores',
|
||||
excel: 'Excel',
|
||||
exportExcel: 'Exportar a Excel',
|
||||
selectExcel: 'Export seleccionado',
|
||||
mergeHeader: 'Merge Header',
|
||||
uploadExcel: 'Subir Excel',
|
||||
zip: 'Zip',
|
||||
pdf: 'PDF',
|
||||
exportZip: 'Exportar a Zip',
|
||||
theme: 'Tema',
|
||||
clipboardDemo: 'Clipboard',
|
||||
i18n: 'I18n',
|
||||
externalLink: 'Enlace externo',
|
||||
profile: 'Profile'
|
||||
},
|
||||
navbar: {
|
||||
logOut: 'Salir',
|
||||
dashboard: 'Panel de control',
|
||||
github: 'Github',
|
||||
theme: 'Tema',
|
||||
size: 'Tamaño global',
|
||||
profile: 'Profile'
|
||||
},
|
||||
login: {
|
||||
title: 'Formulario de acceso',
|
||||
logIn: 'Acceso',
|
||||
username: 'Usuario',
|
||||
password: 'Contraseña',
|
||||
any: 'nada',
|
||||
thirdparty: 'Conectar con',
|
||||
thirdpartyTips: 'No se puede simular en local, así que combine su propia simulación de negocios. ! !'
|
||||
},
|
||||
documentation: {
|
||||
documentation: 'Documentación',
|
||||
github: 'Repositorio Github'
|
||||
},
|
||||
permission: {
|
||||
addRole: 'Nuevo rol',
|
||||
editPermission: 'Permiso de edición',
|
||||
roles: 'Tus permisos',
|
||||
switchRoles: 'Cambiar permisos',
|
||||
tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
|
||||
delete: 'Borrar',
|
||||
confirm: 'Confirmar',
|
||||
cancel: 'Cancelar'
|
||||
},
|
||||
guide: {
|
||||
description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
|
||||
button: 'Ver guía'
|
||||
},
|
||||
components: {
|
||||
documentation: 'Documentación',
|
||||
tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
|
||||
dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
|
||||
stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
|
||||
backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
|
||||
backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
|
||||
imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
|
||||
},
|
||||
table: {
|
||||
dynamicTips1: 'Fixed header, sorted by header order',
|
||||
dynamicTips2: 'Not fixed header, sorted by click order',
|
||||
dragTips1: 'Orden por defecto',
|
||||
dragTips2: 'The after dragging order',
|
||||
title: 'Título',
|
||||
importance: 'Importancia',
|
||||
type: 'Tipo',
|
||||
remark: 'Remark',
|
||||
search: 'Buscar',
|
||||
add: 'Añadir',
|
||||
export: 'Exportar',
|
||||
reviewer: 'reviewer',
|
||||
id: 'ID',
|
||||
date: 'Fecha',
|
||||
author: 'Autor',
|
||||
readings: 'Lector',
|
||||
status: 'Estado',
|
||||
actions: 'Acciones',
|
||||
edit: 'Editar',
|
||||
publish: 'Publicar',
|
||||
draft: 'Draft',
|
||||
delete: 'Eliminar',
|
||||
cancel: 'Cancelar',
|
||||
confirm: 'Confirmar'
|
||||
},
|
||||
example: {
|
||||
warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'
|
||||
},
|
||||
errorLog: {
|
||||
tips: 'Please click the bug icon in the upper right corner',
|
||||
description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
|
||||
documentation: 'Documento de introducción'
|
||||
},
|
||||
excel: {
|
||||
export: 'Exportar',
|
||||
selectedExport: 'Exportar seleccionados',
|
||||
placeholder: 'Por favor escribe un nombre de fichero'
|
||||
},
|
||||
zip: {
|
||||
export: 'Exportar',
|
||||
placeholder: 'Por favor escribe un nombre de fichero'
|
||||
},
|
||||
pdf: {
|
||||
tips: 'Here we use window.print() to implement the feature of downloading pdf.'
|
||||
},
|
||||
theme: {
|
||||
change: 'Cambiar tema',
|
||||
documentation: 'Documentación del tema',
|
||||
tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
|
||||
},
|
||||
tagsView: {
|
||||
refresh: 'Actualizar',
|
||||
close: 'Cerrar',
|
||||
closeOthers: 'Cerrar otros',
|
||||
closeAll: 'Cerrar todos'
|
||||
},
|
||||
settings: {
|
||||
title: 'Page style setting',
|
||||
theme: 'Theme Color',
|
||||
tagsView: 'Open Tags-View',
|
||||
fixedHeader: 'Fixed Header',
|
||||
sidebarLogo: 'Sidebar Logo'
|
||||
}
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import Cookies from 'js-cookie'
|
||||
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
|
||||
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
|
||||
import elementEsLocale from 'element-ui/lib/locale/lang/es'// element-ui lang
|
||||
import elementJaLocale from 'element-ui/lib/locale/lang/ja'// element-ui lang
|
||||
import enLocale from './en'
|
||||
import zhLocale from './zh'
|
||||
import esLocale from './es'
|
||||
import jaLocale from './ja'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
...enLocale,
|
||||
...elementEnLocale
|
||||
},
|
||||
zh: {
|
||||
...zhLocale,
|
||||
...elementZhLocale
|
||||
},
|
||||
es: {
|
||||
...esLocale,
|
||||
...elementEsLocale
|
||||
},
|
||||
ja: {
|
||||
...jaLocale,
|
||||
...elementJaLocale
|
||||
}
|
||||
}
|
||||
export function getLanguage() {
|
||||
const chooseLanguage = Cookies.get('language')
|
||||
if (chooseLanguage) return chooseLanguage
|
||||
|
||||
// if has not choose language
|
||||
const language = (navigator.language || navigator.browserLanguage).toLowerCase()
|
||||
const locales = Object.keys(messages)
|
||||
for (const locale of locales) {
|
||||
if (language.indexOf(locale) > -1) {
|
||||
return locale
|
||||
}
|
||||
}
|
||||
return 'en'
|
||||
}
|
||||
const i18n = new VueI18n({
|
||||
// set locale
|
||||
// options: en | zh | es
|
||||
locale: getLanguage(),
|
||||
// set locale messages
|
||||
messages
|
||||
})
|
||||
|
||||
export default i18n
|
||||
@ -1,13 +1,10 @@
|
||||
import defaultSettings from '@/settings'
|
||||
import i18n from '@/lang'
|
||||
|
||||
const title = defaultSettings.title || 'Vue Element Admin'
|
||||
|
||||
export default function getPageTitle(key) {
|
||||
const hasKey = i18n.te(`route.${key}`)
|
||||
if (hasKey) {
|
||||
const pageName = i18n.t(`route.${key}`)
|
||||
return `${pageName} - ${title}`
|
||||
export default function getPageTitle(pageTitle) {
|
||||
if (pageTitle) {
|
||||
return `${pageTitle} - ${title}`
|
||||
}
|
||||
return `${title}`
|
||||
}
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
// translate router.meta.title, be used in breadcrumb sidebar tagsview
|
||||
export function generateTitle(title) {
|
||||
const hasKey = this.$te('route.' + title)
|
||||
|
||||
if (hasKey) {
|
||||
// $t :this method from vue-i18n, inject in @/lang/index.js
|
||||
const translatedTitle = this.$t('route.' + title)
|
||||
|
||||
return translatedTitle
|
||||
}
|
||||
return title
|
||||
}
|
||||
@ -1,168 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="box-card" style="margin-top:40px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<svg-icon icon-class="international" />
|
||||
<span style="margin-left:10px;">{{ $t('i18nView.title') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio-group v-model="lang" size="small">
|
||||
<el-radio label="zh" border>
|
||||
简体中文
|
||||
</el-radio>
|
||||
<el-radio label="en" border>
|
||||
English
|
||||
</el-radio>
|
||||
<el-radio label="es" border>
|
||||
Español
|
||||
</el-radio>
|
||||
<el-radio label="ja" border>
|
||||
日本語
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<el-tag style="margin-top:15px;display:block;" type="info">
|
||||
{{ $t('i18nView.note') }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-row :gutter="20" style="margin:100px 15px 50px;">
|
||||
<el-col :span="12" :xs="24">
|
||||
<div class="block">
|
||||
<el-date-picker v-model="date" :placeholder="$t('i18nView.datePlaceholder')" type="date" />
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-select v-model="value" :placeholder="$t('i18nView.selectPlaceholder')">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-button class="item-btn" size="small">
|
||||
{{ $t('i18nView.default') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="primary">
|
||||
{{ $t('i18nView.primary') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="success">
|
||||
{{ $t('i18nView.success') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="info">
|
||||
{{ $t('i18nView.info') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="warning">
|
||||
{{ $t('i18nView.warning') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="danger">
|
||||
{{ $t('i18nView.danger') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" :xs="24">
|
||||
<el-table :data="tableData" fit highlight-current-row border style="width: 100%">
|
||||
<el-table-column :label="$t('i18nView.tableName')" prop="name" width="100" align="center" />
|
||||
<el-table-column :label="$t('i18nView.tableDate')" prop="date" width="120" align="center" />
|
||||
<el-table-column :label="$t('i18nView.tableAddress')" prop="address" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import local from './local'
|
||||
const viewName = 'i18nView'
|
||||
|
||||
export default {
|
||||
name: 'I18n',
|
||||
data() {
|
||||
return {
|
||||
date: '',
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
}],
|
||||
options: [],
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lang: {
|
||||
get() {
|
||||
return this.$store.state.app.language
|
||||
},
|
||||
set(lang) {
|
||||
this.$i18n.locale = lang
|
||||
this.$store.dispatch('app/setLanguage', lang)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
lang() {
|
||||
this.setOptions()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!this.$i18n.getLocaleMessage('en')[viewName]) {
|
||||
this.$i18n.mergeLocaleMessage('en', local.en)
|
||||
this.$i18n.mergeLocaleMessage('zh', local.zh)
|
||||
this.$i18n.mergeLocaleMessage('es', local.es)
|
||||
this.$i18n.mergeLocaleMessage('ja', local.ja)
|
||||
}
|
||||
this.setOptions() // set default select options
|
||||
},
|
||||
methods: {
|
||||
setOptions() {
|
||||
this.options = [
|
||||
{
|
||||
value: '1',
|
||||
label: this.$t('i18nView.one')
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: this.$t('i18nView.two')
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: this.$t('i18nView.three')
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box-card {
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.item-btn{
|
||||
margin-bottom: 15px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
.block {
|
||||
padding: 25px;
|
||||
}
|
||||
</style>
|
||||
@ -1,83 +0,0 @@
|
||||
|
||||
export default {
|
||||
zh: {
|
||||
i18nView: {
|
||||
title: '切换语言',
|
||||
note: '本项目国际化基于 vue-i18n',
|
||||
datePlaceholder: '请选择日期',
|
||||
selectPlaceholder: '请选择',
|
||||
tableDate: '日期',
|
||||
tableName: '姓名',
|
||||
tableAddress: '地址',
|
||||
default: '默认按钮',
|
||||
primary: '主要按钮',
|
||||
success: '成功按钮',
|
||||
info: '信息按钮',
|
||||
warning: '警告按钮',
|
||||
danger: '危险按钮',
|
||||
one: '一',
|
||||
two: '二',
|
||||
three: '三'
|
||||
}
|
||||
},
|
||||
en: {
|
||||
i18nView: {
|
||||
title: 'Switch Language',
|
||||
note: 'The internationalization of this project is based on vue-i18n',
|
||||
datePlaceholder: 'Pick a day',
|
||||
selectPlaceholder: 'Select',
|
||||
tableDate: 'tableDate',
|
||||
tableName: 'tableName',
|
||||
tableAddress: 'tableAddress',
|
||||
default: 'default:',
|
||||
primary: 'primary',
|
||||
success: 'success',
|
||||
info: 'info',
|
||||
warning: 'warning',
|
||||
danger: 'danger',
|
||||
one: 'One',
|
||||
two: 'Two',
|
||||
three: 'Three'
|
||||
}
|
||||
},
|
||||
es: {
|
||||
i18nView: {
|
||||
title: 'Switch Language',
|
||||
note: 'The internationalization of this project is based on vue-i18n',
|
||||
datePlaceholder: 'Pick a day',
|
||||
selectPlaceholder: 'Select',
|
||||
tableDate: 'tableDate',
|
||||
tableName: 'tableName',
|
||||
tableAddress: 'tableAddress',
|
||||
default: 'default:',
|
||||
primary: 'primary',
|
||||
success: 'success',
|
||||
info: 'info',
|
||||
warning: 'warning',
|
||||
danger: 'danger',
|
||||
one: 'One',
|
||||
two: 'Two',
|
||||
three: 'Three'
|
||||
}
|
||||
},
|
||||
ja: {
|
||||
i18nView: {
|
||||
title: '言語切替',
|
||||
note: 'vue-i18nを使っています',
|
||||
datePlaceholder: '日時選択',
|
||||
selectPlaceholder: '選択してください',
|
||||
tableDate: '日時',
|
||||
tableName: '姓名',
|
||||
tableAddress: '住所',
|
||||
default: 'default',
|
||||
primary: 'primary',
|
||||
success: 'success',
|
||||
info: 'info',
|
||||
warning: 'warning',
|
||||
danger: 'danger',
|
||||
one: '1',
|
||||
two: '2',
|
||||
three: '3'
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue