refine i18n demo

This commit is contained in:
Pan 2018-09-10 13:02:18 +08:00
parent f85b044ff8
commit fbb3641406
2 changed files with 44 additions and 12 deletions

View File

@ -20,13 +20,13 @@
<el-date-picker v-model="date" :placeholder="$t('i18nView.datePlaceholder')" type="date"/>
</div>
<div class="block">
<el-pagination
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
:total="400"
background
layout="total, sizes, prev, pager, next"/>
<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>
@ -57,7 +57,6 @@ export default {
data() {
return {
date: '',
currentPage: 5,
tableData: [{
date: '2016-05-03',
name: 'Tom',
@ -77,7 +76,9 @@ export default {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
}],
options: [],
value: ''
}
},
computed: {
@ -91,11 +92,35 @@ export default {
}
}
},
watch: {
lang() {
this.setOptions()
}
},
created() {
if (!this.$i18n.getLocaleMessage('en')[viewName]) {
this.$i18n.mergeLocaleMessage('en', local.en)
this.$i18n.mergeLocaleMessage('zh', local.zh)
}
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>

View File

@ -5,6 +5,7 @@ export default {
title: '切换语言',
note: '本项目国际化基于 vue-i18n',
datePlaceholder: '请选择日期',
selectPlaceholder: '请选择',
tableDate: '日期',
tableName: '姓名',
tableAddress: '地址',
@ -13,15 +14,18 @@ export default {
success: '成功按钮',
info: '信息按钮',
warning: '警告按钮',
danger: '危险按钮'
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',
@ -30,7 +34,10 @@ export default {
success: 'success',
info: 'info',
warning: 'warning',
danger: 'danger'
danger: 'danger',
one: 'One',
two: 'Two',
three: 'Three'
}
}
}