some component support i18n
some component support i18n
This commit is contained in:
梁灏
parent
d33b51432d
commit
4ab118119a
13 changed files with 238 additions and 30 deletions
|
|
@ -1,19 +1,21 @@
|
|||
<template>
|
||||
<div :class="[prefixCls + '-confirm']">
|
||||
<span :class="timeClasses" v-if="showTime" @click="handleToggleTime">
|
||||
<template v-if="isTime">选择日期</template>
|
||||
<template v-else>选择时间</template>
|
||||
<template v-if="isTime">{{ t('i.datepicker.selectDate') }}</template>
|
||||
<template v-else>{{ t('i.datepicker.selectTime') }}</template>
|
||||
</span>
|
||||
<i-button size="small" type="text" @click="handleClear">清空</i-button>
|
||||
<i-button size="small" type="primary" @click="handleSuccess">确定</i-button>
|
||||
<i-button size="small" type="text" @click="handleClear">{{ t('i.datepicker.clear') }}</i-button>
|
||||
<i-button size="small" type="primary" @click="handleSuccess">{{ t('i.datepicker.ok') }}</i-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iButton from '../../button/button.vue';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-picker';
|
||||
|
||||
export default {
|
||||
mixins: [ Locale ],
|
||||
components: { iButton },
|
||||
props: {
|
||||
showTime: false,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
@click="handleClick"
|
||||
@mousemove="handleMouseMove">
|
||||
<div :class="[prefixCls + '-header']">
|
||||
<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
|
||||
<span>{{ t('i.datepicker.weeks.sun') }}</span><span>{{ t('i.datepicker.weeks.mon') }}</span><span>{{ t('i.datepicker.weeks.tue') }}</span><span>{{ t('i.datepicker.weeks.wed') }}</span><span>{{ t('i.datepicker.weeks.thu') }}</span><span>{{ t('i.datepicker.weeks.fri') }}</span><span>{{ t('i.datepicker.weeks.sat') }}</span>
|
||||
</div>
|
||||
<span :class="getCellCls(cell)" v-for="cell in readCells"><em :index="$index">{{ cell.text }}</em></span>
|
||||
</div>
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
<script>
|
||||
import { getFirstDayOfMonth, getDayCountOfMonth } from '../util';
|
||||
import { deepCopy } from '../../../utils/assist';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-date-picker-cells';
|
||||
|
||||
|
|
@ -22,6 +23,7 @@
|
|||
};
|
||||
|
||||
export default {
|
||||
mixins: [ Locale ],
|
||||
props: {
|
||||
date: {},
|
||||
year: {},
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
<template>
|
||||
<div :class="classes" @click="handleClick">
|
||||
<span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}月</em></span>
|
||||
<span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ tCell(cell.text) }}</em></span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { deepCopy } from '../../../utils/assist';
|
||||
import Locale from '../../../mixins/locale';
|
||||
const prefixCls = 'ivu-date-picker-cells';
|
||||
|
||||
export default {
|
||||
mixins: [ Locale ],
|
||||
props: {
|
||||
date: {},
|
||||
month: {
|
||||
|
|
@ -68,6 +70,9 @@
|
|||
this.$emit('on-pick', index);
|
||||
}
|
||||
this.$emit('on-pick-click');
|
||||
},
|
||||
tCell (cell) {
|
||||
return this.t(`i.datepicker.months.m${cell}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showMonthPicker('left')"
|
||||
v-show="leftCurrentView === 'date'">{{ leftMonth + 1 }} 月</span>
|
||||
v-show="leftCurrentView === 'date'">{{ leftMonthLabel }}</span>
|
||||
<span
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="nextYear('left')"
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showMonthPicker('right')"
|
||||
v-show="rightCurrentView === 'date'">{{ rightMonth + 1 }} 月</span>
|
||||
v-show="rightCurrentView === 'date'">{{ rightMonthLabel }}</span>
|
||||
<span
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
|
||||
|
|
@ -141,13 +141,14 @@
|
|||
import { toDate, prevMonth, nextMonth, initTimeDate } from '../util';
|
||||
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const datePrefixCls = 'ivu-date-picker';
|
||||
|
||||
export default {
|
||||
name: 'DatePicker',
|
||||
mixins: [Mixin],
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -195,20 +196,25 @@
|
|||
}
|
||||
},
|
||||
leftYearLabel () {
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
if (this.leftCurrentView === 'year') {
|
||||
const year = this.leftTableYear;
|
||||
if (!year) return '';
|
||||
const startYear = Math.floor(year / 10) * 10;
|
||||
return `${startYear}年 - ${startYear + 9}年`;
|
||||
return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
|
||||
} else {
|
||||
const year = this.leftCurrentView === 'month' ? this.leftTableYear : this.leftYear;
|
||||
if (!year) return '';
|
||||
return `${year}年`;
|
||||
return `${year}${tYear}`;
|
||||
}
|
||||
},
|
||||
leftMonth () {
|
||||
return this.date.getMonth();
|
||||
},
|
||||
leftMonthLabel () {
|
||||
const month = this.leftMonth + 1;
|
||||
return this.t(`i.datepicker.month${month}`);
|
||||
},
|
||||
rightYear () {
|
||||
return this.rightDate.getFullYear();
|
||||
},
|
||||
|
|
@ -220,20 +226,25 @@
|
|||
}
|
||||
},
|
||||
rightYearLabel () {
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
if (this.rightCurrentView === 'year') {
|
||||
const year = this.rightTableYear;
|
||||
if (!year) return '';
|
||||
const startYear = Math.floor(year / 10) * 10;
|
||||
return `${startYear}年 - ${startYear + 9}年`;
|
||||
return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
|
||||
} else {
|
||||
const year = this.rightCurrentView === 'month' ? this.rightTableYear : this.rightYear;
|
||||
if (!year) return '';
|
||||
return `${year}年`;
|
||||
return `${year}${tYear}`;
|
||||
}
|
||||
},
|
||||
rightMonth () {
|
||||
return this.rightDate.getMonth();
|
||||
},
|
||||
rightMonthLabel () {
|
||||
const month = this.rightMonth + 1;
|
||||
return this.t(`i.datepicker.month${month}`);
|
||||
},
|
||||
rightDate () {
|
||||
const newDate = new Date(this.date);
|
||||
const month = newDate.getMonth();
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showMonthPicker"
|
||||
v-show="currentView === 'date'">{{ month + 1 + '月' }}</span>
|
||||
v-show="currentView === 'date'">{{ monthLabel }}</span>
|
||||
<span
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="nextYear"><Icon type="ios-arrow-right"></Icon></span>
|
||||
|
|
@ -85,6 +85,7 @@
|
|||
import Confirm from '../base/confirm.vue';
|
||||
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
import { initTimeDate } from '../util';
|
||||
|
||||
|
|
@ -93,7 +94,7 @@
|
|||
|
||||
export default {
|
||||
name: 'DatePicker',
|
||||
mixins: [Mixin],
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -123,13 +124,18 @@
|
|||
];
|
||||
},
|
||||
yearLabel () {
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
const year = this.year;
|
||||
if (!year) return '';
|
||||
if (this.currentView === 'year') {
|
||||
const startYear = Math.floor(year / 10) * 10;
|
||||
return `${startYear}年 - ${startYear + 9}年`;
|
||||
return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
|
||||
}
|
||||
return `${year}年`;
|
||||
return `${year}${tYear}`;
|
||||
},
|
||||
monthLabel () {
|
||||
const month = this.month + 1;
|
||||
return this.t(`i.datepicker.month${month}`);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div :class="[prefixCls + '-content', prefixCls + '-content-left']">
|
||||
<div :class="[timePrefixCls + '-header']">
|
||||
<template v-if="showDate">{{ visibleDate }}</template>
|
||||
<template v-else>开始时间</template>
|
||||
<template v-else>{{ t('i.datepicker.startTime') }}</template>
|
||||
</div>
|
||||
<time-spinner
|
||||
v-ref:time-spinner
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<div :class="[prefixCls + '-content', prefixCls + '-content-right']">
|
||||
<div :class="[timePrefixCls + '-header']">
|
||||
<template v-if="showDate">{{ visibleDateEnd }}</template>
|
||||
<template v-else>结束时间</template>
|
||||
<template v-else>{{ t('i.datepicker.endTime') }}</template>
|
||||
</div>
|
||||
<time-spinner
|
||||
v-ref:time-spinner-end
|
||||
|
|
@ -49,6 +49,7 @@
|
|||
import Confirm from '../base/confirm.vue';
|
||||
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
import { initTimeDate, toDate, formatDate } from '../util';
|
||||
|
||||
|
|
@ -56,7 +57,7 @@
|
|||
const timePrefixCls = 'ivu-time-picker';
|
||||
|
||||
export default {
|
||||
mixins: [Mixin],
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { TimeSpinner, Confirm },
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -95,11 +96,17 @@
|
|||
},
|
||||
visibleDate () {
|
||||
const date = this.date || initTimeDate();
|
||||
return `${date.getFullYear()}年 ${date.getMonth() + 1}月`;
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
const month = date.getMonth() + 1;
|
||||
const tMonth = this.t(`i.datepicker.month${month}`);
|
||||
return `${date.getFullYear()}${tYear} ${tMonth}`;
|
||||
},
|
||||
visibleDateEnd () {
|
||||
const date = this.dateEnd || initTimeDate();
|
||||
return `${date.getFullYear()}年 ${date.getMonth() + 1}月`;
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
const month = date.getMonth() + 1;
|
||||
const tMonth = this.t(`i.datepicker.month${month}`);
|
||||
return `${date.getFullYear()}${tYear} ${tMonth}`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
import Confirm from '../base/confirm.vue';
|
||||
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
import { initTimeDate } from '../util';
|
||||
|
||||
|
|
@ -35,7 +36,7 @@
|
|||
const timePrefixCls = 'ivu-time-picker';
|
||||
|
||||
export default {
|
||||
mixins: [Mixin],
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { TimeSpinner, Confirm },
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -61,7 +62,10 @@
|
|||
},
|
||||
visibleDate () {
|
||||
const date = this.date;
|
||||
return `${date.getFullYear()}年 ${date.getMonth() + 1}月`;
|
||||
const month = date.getMonth() + 1;
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
const tMonth = this.t(`i.datepicker.month${month}`);
|
||||
return `${date.getFullYear()}${tYear} ${tMonth}`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -29,15 +29,15 @@
|
|||
</checkbox-group>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-filter-footer']">
|
||||
<i-button type="text" size="small" :disabled="!column._filterChecked.length" @click="handleFilter($index)">筛选</i-button>
|
||||
<i-button type="text" size="small" @click="handleReset($index)">重置</i-button>
|
||||
<i-button type="text" size="small" :disabled="!column._filterChecked.length" @click="handleFilter($index)">{{ t('i.table.confirmFilter') }}</i-button>
|
||||
<i-button type="text" size="small" @click="handleReset($index)">{{ t('i.table.resetFilter') }}</i-button>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="content" :class="[prefixCls + '-filter-list']" v-else>
|
||||
<ul :class="[prefixCls + '-filter-list-single']">
|
||||
<li
|
||||
:class="itemAllClasses(column)"
|
||||
@click="handleReset($index)">全部</li>
|
||||
@click="handleReset($index)">{{ t('i.table.clearFilter') }}</li>
|
||||
<li
|
||||
:class="itemClasses(column, item)"
|
||||
v-for="item in column.filters"
|
||||
|
|
@ -58,9 +58,10 @@
|
|||
import Poptip from '../poptip/poptip.vue';
|
||||
import iButton from '../button/button.vue';
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../mixins/locale';
|
||||
|
||||
export default {
|
||||
mixins: [ Mixin ],
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { CheckboxGroup, Checkbox, Poptip, iButton },
|
||||
props: {
|
||||
prefixCls: String,
|
||||
|
|
|
|||
|
|
@ -86,6 +86,7 @@
|
|||
import tableHead from './table-head.vue';
|
||||
import tableBody from './table-body.vue';
|
||||
import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
|
||||
import { t } from '../../locale';
|
||||
import Csv from '../../utils/csv';
|
||||
import ExportCsv from './export-csv';
|
||||
const prefixCls = 'ivu-table';
|
||||
|
|
@ -143,11 +144,15 @@
|
|||
},
|
||||
noDataText: {
|
||||
type: String,
|
||||
default: '暂无数据'
|
||||
default () {
|
||||
return t('i.table.noDataText');
|
||||
}
|
||||
},
|
||||
noFilteredDataText: {
|
||||
type: String,
|
||||
default: '暂无筛选结果'
|
||||
default () {
|
||||
return t('i.table.noFilteredDataText');
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,58 @@ export default {
|
|||
select: {
|
||||
placeholder: 'Select',
|
||||
noMatch: 'No matching data'
|
||||
},
|
||||
table: {
|
||||
noDataText: 'No Data',
|
||||
noFilteredDataText: 'No filter data',
|
||||
confirmFilter: 'Confirm',
|
||||
resetFilter: 'Reset',
|
||||
clearFilter: 'All'
|
||||
},
|
||||
datepicker: {
|
||||
selectDate: 'Select date',
|
||||
selectTime: 'Select time',
|
||||
startTime: 'Start Time',
|
||||
endTime: 'End Time',
|
||||
clear: 'Clear',
|
||||
ok: 'Ok',
|
||||
month: '',
|
||||
month1: 'January',
|
||||
month2: 'February',
|
||||
month3: 'March',
|
||||
month4: 'April',
|
||||
month5: 'May',
|
||||
month6: 'June',
|
||||
month7: 'July',
|
||||
month8: 'August',
|
||||
month9: 'September',
|
||||
month10: 'October',
|
||||
month11: 'November',
|
||||
month12: 'December',
|
||||
year: '',
|
||||
weeks: {
|
||||
sun: 'Sun',
|
||||
mon: 'Mon',
|
||||
tue: 'Tue',
|
||||
wed: 'Wed',
|
||||
thu: 'Thu',
|
||||
fri: 'Fri',
|
||||
sat: 'Sat'
|
||||
},
|
||||
months: {
|
||||
m1: 'Jan',
|
||||
m2: 'Feb',
|
||||
m3: 'Mar',
|
||||
m4: 'Apr',
|
||||
m5: 'May',
|
||||
m6: 'Jun',
|
||||
m7: 'Jul',
|
||||
m8: 'Aug',
|
||||
m9: 'Sep',
|
||||
m10: 'Oct',
|
||||
m11: 'Nov',
|
||||
m12: 'Dec'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -3,6 +3,58 @@ export default {
|
|||
select: {
|
||||
placeholder: '请选择',
|
||||
noMatch: '无匹配数据'
|
||||
},
|
||||
table: {
|
||||
noDataText: '暂无数据',
|
||||
noFilteredDataText: '暂无筛选结果',
|
||||
confirmFilter: '筛选',
|
||||
resetFilter: '重置',
|
||||
clearFilter: '全部'
|
||||
},
|
||||
datepicker: {
|
||||
selectDate: '选择日期',
|
||||
selectTime: '选择时间',
|
||||
startTime: '开始时间',
|
||||
endTime: '结束时间',
|
||||
clear: '清空',
|
||||
ok: '确定',
|
||||
month: '月',
|
||||
month1: '1 月',
|
||||
month2: '2 月',
|
||||
month3: '3 月',
|
||||
month4: '4 月',
|
||||
month5: '5 月',
|
||||
month6: '6 月',
|
||||
month7: '7 月',
|
||||
month8: '8 月',
|
||||
month9: '9 月',
|
||||
month10: '10 月',
|
||||
month11: '11 月',
|
||||
month12: '12 月',
|
||||
year: '年',
|
||||
weeks: {
|
||||
sun: '日',
|
||||
mon: '一',
|
||||
tue: '二',
|
||||
wed: '三',
|
||||
thu: '四',
|
||||
fri: '五',
|
||||
sat: '六'
|
||||
},
|
||||
months: {
|
||||
m1: '1月',
|
||||
m2: '2月',
|
||||
m3: '3月',
|
||||
m4: '4月',
|
||||
m5: '5月',
|
||||
m6: '6月',
|
||||
m7: '7月',
|
||||
m8: '8月',
|
||||
m9: '9月',
|
||||
m10: '10月',
|
||||
m11: '11月',
|
||||
m12: '12月'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -3,6 +3,58 @@ export default {
|
|||
select: {
|
||||
placeholder: '請選擇',
|
||||
noMatch: '無匹配數據'
|
||||
},
|
||||
table: {
|
||||
noDataText: '暫無數據',
|
||||
noFilteredDataText: '暫無篩選結果',
|
||||
confirmFilter: '篩選',
|
||||
resetFilter: '重置',
|
||||
clearFilter: '全部'
|
||||
},
|
||||
datepicker: {
|
||||
selectDate: '選擇日期',
|
||||
selectTime: '選擇時間',
|
||||
startTime: '開始時間',
|
||||
endTime: '結束時間',
|
||||
clear: '清空',
|
||||
ok: '確定',
|
||||
month: '月',
|
||||
month1: '1 月',
|
||||
month2: '2 月',
|
||||
month3: '3 月',
|
||||
month4: '4 月',
|
||||
month5: '5 月',
|
||||
month6: '6 月',
|
||||
month7: '7 月',
|
||||
month8: '8 月',
|
||||
month9: '9 月',
|
||||
month10: '10 月',
|
||||
month11: '11 月',
|
||||
month12: '12 月',
|
||||
year: '年',
|
||||
weeks: {
|
||||
sun: '日',
|
||||
mon: '一',
|
||||
tue: '二',
|
||||
wed: '三',
|
||||
thu: '四',
|
||||
fri: '五',
|
||||
sat: '六'
|
||||
},
|
||||
months: {
|
||||
m1: '1月',
|
||||
m2: '2月',
|
||||
m3: '3月',
|
||||
m4: '4月',
|
||||
m5: '5月',
|
||||
m6: '6月',
|
||||
m7: '7月',
|
||||
m8: '8月',
|
||||
m9: '9月',
|
||||
m10: '10月',
|
||||
m11: '11月',
|
||||
m12: '12月'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
9
src/mixins/locale.js
Normal file
9
src/mixins/locale.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { t } from '../locale';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
t(...args) {
|
||||
return t.apply(this, args);
|
||||
}
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue