chenhaodong / mew-iview

Commit 4ab118119aff1543ac2c963b5717fdcf13f2fd4d

Authored by 梁灏
1 parent d33b5143

some component support i18n 

some component support i18n
Showing 13 changed files with 238 additions and 30 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/base/confirm.vue
  Show/Hide comments   View file @4ab1181
1 1 <template>
2 2 <div :class="[prefixCls + '-confirm']">
3 3 <span :class="timeClasses" v-if="showTime" @click="handleToggleTime">
4   - <template v-if="isTime">选择日期</template>
5   - <template v-else>选择时间</template>
  4 + <template v-if="isTime">{{ t('i.datepicker.selectDate') }}</template>
  5 + <template v-else>{{ t('i.datepicker.selectTime') }}</template>
6 6 </span>
7   - <i-button size="small" type="text" @click="handleClear">清空</i-button>
8   - <i-button size="small" type="primary" @click="handleSuccess">确定</i-button>
  7 + <i-button size="small" type="text" @click="handleClear">{{ t('i.datepicker.clear') }}</i-button>
  8 + <i-button size="small" type="primary" @click="handleSuccess">{{ t('i.datepicker.ok') }}</i-button>
9 9 </div>
10 10 </template>
11 11 <script>
12 12 import iButton from '../../button/button.vue';
  13 + import Locale from '../../../mixins/locale';
13 14  
14 15 const prefixCls = 'ivu-picker';
15 16  
16 17 export default {
  18 + mixins: [ Locale ],
17 19 components: { iButton },
18 20 props: {
19 21 showTime: false,
... ...
src/components/date-picker/base/date-table.vue
  Show/Hide comments   View file @4ab1181
... ... @@ -4,7 +4,7 @@
4 4 @click="handleClick"
5 5 @mousemove="handleMouseMove">
6 6 <div :class="[prefixCls + '-header']">
7   - <span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
  7 + <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>
8 8 </div>
9 9 <span :class="getCellCls(cell)" v-for="cell in readCells"><em :index="$index">{{ cell.text }}</em></span>
10 10 </div>
... ... @@ -12,6 +12,7 @@
12 12 <script>
13 13 import { getFirstDayOfMonth, getDayCountOfMonth } from '../util';
14 14 import { deepCopy } from '../../../utils/assist';
  15 + import Locale from '../../../mixins/locale';
15 16  
16 17 const prefixCls = 'ivu-date-picker-cells';
17 18  
... ... @@ -22,6 +23,7 @@
22 23 };
23 24  
24 25 export default {
  26 + mixins: [ Locale ],
25 27 props: {
26 28 date: {},
27 29 year: {},
... ...
src/components/date-picker/base/month-table.vue
  Show/Hide comments   View file @4ab1181
1 1 <template>
2 2 <div :class="classes" @click="handleClick">
3   - <span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}月</em></span>
  3 + <span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ tCell(cell.text) }}</em></span>
4 4 </div>
5 5 </template>
6 6 <script>
7 7 import { deepCopy } from '../../../utils/assist';
  8 + import Locale from '../../../mixins/locale';
8 9 const prefixCls = 'ivu-date-picker-cells';
9 10  
10 11 export default {
  12 + mixins: [ Locale ],
11 13 props: {
12 14 date: {},
13 15 month: {
... ... @@ -68,6 +70,9 @@
68 70 this.$emit('on-pick', index);
69 71 }
70 72 this.$emit('on-pick-click');
  73 + },
  74 + tCell (cell) {
  75 + return this.t(`i.datepicker.months.m${cell}`);
71 76 }
72 77 }
73 78 };
... ...
src/components/date-picker/panel/date-range.vue
  Show/Hide comments   View file @4ab1181
... ... @@ -22,7 +22,7 @@
22 22 <span
23 23 :class="[datePrefixCls + '-header-label']"
24 24 @click="showMonthPicker('left')"
25   - v-show="leftCurrentView === 'date'">{{ leftMonth + 1 }} 月</span>
  25 + v-show="leftCurrentView === 'date'">{{ leftMonthLabel }}</span>
26 26 <span
27 27 :class="iconBtnCls('next', '-double')"
28 28 @click="nextYear('left')"
... ... @@ -72,7 +72,7 @@
72 72 <span
73 73 :class="[datePrefixCls + '-header-label']"
74 74 @click="showMonthPicker('right')"
75   - v-show="rightCurrentView === 'date'">{{ rightMonth + 1 }} 月</span>
  75 + v-show="rightCurrentView === 'date'">{{ rightMonthLabel }}</span>
76 76 <span
77 77 :class="iconBtnCls('next', '-double')"
78 78 @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
... ... @@ -141,13 +141,14 @@
141 141 import { toDate, prevMonth, nextMonth, initTimeDate } from '../util';
142 142  
143 143 import Mixin from './mixin';
  144 + import Locale from '../../../mixins/locale';
144 145  
145 146 const prefixCls = 'ivu-picker-panel';
146 147 const datePrefixCls = 'ivu-date-picker';
147 148  
148 149 export default {
149 150 name: 'DatePicker',
150   - mixins: [Mixin],
  151 + mixins: [ Mixin, Locale ],
151 152 components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
152 153 data () {
153 154 return {
... ... @@ -195,20 +196,25 @@
195 196 }
196 197 },
197 198 leftYearLabel () {
  199 + const tYear = this.t('i.datepicker.year');
198 200 if (this.leftCurrentView === 'year') {
199 201 const year = this.leftTableYear;
200 202 if (!year) return '';
201 203 const startYear = Math.floor(year / 10) * 10;
202   - return `${startYear}年 - ${startYear + 9}年`;
  204 + return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
203 205 } else {
204 206 const year = this.leftCurrentView === 'month' ? this.leftTableYear : this.leftYear;
205 207 if (!year) return '';
206   - return `${year}年`;
  208 + return `${year}${tYear}`;
207 209 }
208 210 },
209 211 leftMonth () {
210 212 return this.date.getMonth();
211 213 },
  214 + leftMonthLabel () {
  215 + const month = this.leftMonth + 1;
  216 + return this.t(`i.datepicker.month${month}`);
  217 + },
212 218 rightYear () {
213 219 return this.rightDate.getFullYear();
214 220 },
... ... @@ -220,20 +226,25 @@
220 226 }
221 227 },
222 228 rightYearLabel () {
  229 + const tYear = this.t('i.datepicker.year');
223 230 if (this.rightCurrentView === 'year') {
224 231 const year = this.rightTableYear;
225 232 if (!year) return '';
226 233 const startYear = Math.floor(year / 10) * 10;
227   - return `${startYear}年 - ${startYear + 9}年`;
  234 + return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
228 235 } else {
229 236 const year = this.rightCurrentView === 'month' ? this.rightTableYear : this.rightYear;
230 237 if (!year) return '';
231   - return `${year}年`;
  238 + return `${year}${tYear}`;
232 239 }
233 240 },
234 241 rightMonth () {
235 242 return this.rightDate.getMonth();
236 243 },
  244 + rightMonthLabel () {
  245 + const month = this.rightMonth + 1;
  246 + return this.t(`i.datepicker.month${month}`);
  247 + },
237 248 rightDate () {
238 249 const newDate = new Date(this.date);
239 250 const month = newDate.getMonth();
... ...
src/components/date-picker/panel/date.vue
  Show/Hide comments   View file @4ab1181
... ... @@ -21,7 +21,7 @@
21 21 <span
22 22 :class="[datePrefixCls + '-header-label']"
23 23 @click="showMonthPicker"
24   - v-show="currentView === 'date'">{{ month + 1 + '月' }}</span>
  24 + v-show="currentView === 'date'">{{ monthLabel }}</span>
25 25 <span
26 26 :class="iconBtnCls('next', '-double')"
27 27 @click="nextYear"><Icon type="ios-arrow-right"></Icon></span>
... ... @@ -85,6 +85,7 @@
85 85 import Confirm from '../base/confirm.vue';
86 86  
87 87 import Mixin from './mixin';
  88 + import Locale from '../../../mixins/locale';
88 89  
89 90 import { initTimeDate } from '../util';
90 91  
... ... @@ -93,7 +94,7 @@
93 94  
94 95 export default {
95 96 name: 'DatePicker',
96   - mixins: [Mixin],
  97 + mixins: [ Mixin, Locale ],
97 98 components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
98 99 data () {
99 100 return {
... ... @@ -123,13 +124,18 @@
123 124 ];
124 125 },
125 126 yearLabel () {
  127 + const tYear = this.t('i.datepicker.year');
126 128 const year = this.year;
127 129 if (!year) return '';
128 130 if (this.currentView === 'year') {
129 131 const startYear = Math.floor(year / 10) * 10;
130   - return `${startYear}年 - ${startYear + 9}年`;
  132 + return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
131 133 }
132   - return `${year}年`;
  134 + return `${year}${tYear}`;
  135 + },
  136 + monthLabel () {
  137 + const month = this.month + 1;
  138 + return this.t(`i.datepicker.month${month}`);
133 139 }
134 140 },
135 141 watch: {
... ...
src/components/date-picker/panel/time-range.vue
  Show/Hide comments   View file @4ab1181
... ... @@ -4,7 +4,7 @@
4 4 <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
5 5 <div :class="[timePrefixCls + '-header']">
6 6 <template v-if="showDate">{{ visibleDate }}</template>
7   - <template v-else>开始时间</template>
  7 + <template v-else>{{ t('i.datepicker.startTime') }}</template>
8 8 </div>
9 9 <time-spinner
10 10 v-ref:time-spinner
... ... @@ -22,7 +22,7 @@
22 22 <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
23 23 <div :class="[timePrefixCls + '-header']">
24 24 <template v-if="showDate">{{ visibleDateEnd }}</template>
25   - <template v-else>结束时间</template>
  25 + <template v-else>{{ t('i.datepicker.endTime') }}</template>
26 26 </div>
27 27 <time-spinner
28 28 v-ref:time-spinner-end
... ... @@ -49,6 +49,7 @@
49 49 import Confirm from '../base/confirm.vue';
50 50  
51 51 import Mixin from './mixin';
  52 + import Locale from '../../../mixins/locale';
52 53  
53 54 import { initTimeDate, toDate, formatDate } from '../util';
54 55  
... ... @@ -56,7 +57,7 @@
56 57 const timePrefixCls = 'ivu-time-picker';
57 58  
58 59 export default {
59   - mixins: [Mixin],
  60 + mixins: [ Mixin, Locale ],
60 61 components: { TimeSpinner, Confirm },
61 62 data () {
62 63 return {
... ... @@ -95,11 +96,17 @@
95 96 },
96 97 visibleDate () {
97 98 const date = this.date || initTimeDate();
98   - return `${date.getFullYear()}年 ${date.getMonth() + 1}月`;
  99 + const tYear = this.t('i.datepicker.year');
  100 + const month = date.getMonth() + 1;
  101 + const tMonth = this.t(`i.datepicker.month${month}`);
  102 + return `${date.getFullYear()}${tYear} ${tMonth}`;
99 103 },
100 104 visibleDateEnd () {
101 105 const date = this.dateEnd || initTimeDate();
102   - return `${date.getFullYear()}年 ${date.getMonth() + 1}月`;
  106 + const tYear = this.t('i.datepicker.year');
  107 + const month = date.getMonth() + 1;
  108 + const tMonth = this.t(`i.datepicker.month${month}`);
  109 + return `${date.getFullYear()}${tYear} ${tMonth}`;
103 110 }
104 111 },
105 112 watch: {
... ...
src/components/date-picker/panel/time.vue
  Show/Hide comments   View file @4ab1181
... ... @@ -28,6 +28,7 @@
28 28 import Confirm from '../base/confirm.vue';
29 29  
30 30 import Mixin from './mixin';
  31 + import Locale from '../../../mixins/locale';
31 32  
32 33 import { initTimeDate } from '../util';
33 34  
... ... @@ -35,7 +36,7 @@
35 36 const timePrefixCls = 'ivu-time-picker';
36 37  
37 38 export default {
38   - mixins: [Mixin],
  39 + mixins: [ Mixin, Locale ],
39 40 components: { TimeSpinner, Confirm },
40 41 data () {
41 42 return {
... ... @@ -61,7 +62,10 @@
61 62 },
62 63 visibleDate () {
63 64 const date = this.date;
64   - return `${date.getFullYear()}年 ${date.getMonth() + 1}月`;
  65 + const month = date.getMonth() + 1;
  66 + const tYear = this.t('i.datepicker.year');
  67 + const tMonth = this.t(`i.datepicker.month${month}`);
  68 + return `${date.getFullYear()}${tYear} ${tMonth}`;
65 69 }
66 70 },
67 71 watch: {
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @4ab1181
... ... @@ -29,15 +29,15 @@
29 29 </checkbox-group>
30 30 </div>
31 31 <div :class="[prefixCls + '-filter-footer']">
32   - <i-button type="text" size="small" :disabled="!column._filterChecked.length" @click="handleFilter($index)">筛选</i-button>
33   - <i-button type="text" size="small" @click="handleReset($index)">重置</i-button>
  32 + <i-button type="text" size="small" :disabled="!column._filterChecked.length" @click="handleFilter($index)">{{ t('i.table.confirmFilter') }}</i-button>
  33 + <i-button type="text" size="small" @click="handleReset($index)">{{ t('i.table.resetFilter') }}</i-button>
34 34 </div>
35 35 </div>
36 36 <div slot="content" :class="[prefixCls + '-filter-list']" v-else>
37 37 <ul :class="[prefixCls + '-filter-list-single']">
38 38 <li
39 39 :class="itemAllClasses(column)"
40   - @click="handleReset($index)">全部</li>
  40 + @click="handleReset($index)">{{ t('i.table.clearFilter') }}</li>
41 41 <li
42 42 :class="itemClasses(column, item)"
43 43 v-for="item in column.filters"
... ... @@ -58,9 +58,10 @@
58 58 import Poptip from '../poptip/poptip.vue';
59 59 import iButton from '../button/button.vue';
60 60 import Mixin from './mixin';
  61 + import Locale from '../../mixins/locale';
61 62  
62 63 export default {
63   - mixins: [ Mixin ],
  64 + mixins: [ Mixin, Locale ],
64 65 components: { CheckboxGroup, Checkbox, Poptip, iButton },
65 66 props: {
66 67 prefixCls: String,
... ...
src/components/table/table.vue
  Show/Hide comments   View file @4ab1181
... ... @@ -86,6 +86,7 @@
86 86 import tableHead from './table-head.vue';
87 87 import tableBody from './table-body.vue';
88 88 import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
  89 + import { t } from '../../locale';
89 90 import Csv from '../../utils/csv';
90 91 import ExportCsv from './export-csv';
91 92 const prefixCls = 'ivu-table';
... ... @@ -143,11 +144,15 @@
143 144 },
144 145 noDataText: {
145 146 type: String,
146   - default: '暂无数据'
  147 + default () {
  148 + return t('i.table.noDataText');
  149 + }
147 150 },
148 151 noFilteredDataText: {
149 152 type: String,
150   - default: '暂无筛选结果'
  153 + default () {
  154 + return t('i.table.noFilteredDataText');
  155 + }
151 156 }
152 157 },
153 158 data () {
... ...
src/locale/lang/en-US.js
  Show/Hide comments   View file @4ab1181
... ... @@ -3,6 +3,58 @@ export default {
3 3 select: {
4 4 placeholder: 'Select',
5 5 noMatch: 'No matching data'
  6 + },
  7 + table: {
  8 + noDataText: 'No Data',
  9 + noFilteredDataText: 'No filter data',
  10 + confirmFilter: 'Confirm',
  11 + resetFilter: 'Reset',
  12 + clearFilter: 'All'
  13 + },
  14 + datepicker: {
  15 + selectDate: 'Select date',
  16 + selectTime: 'Select time',
  17 + startTime: 'Start Time',
  18 + endTime: 'End Time',
  19 + clear: 'Clear',
  20 + ok: 'Ok',
  21 + month: '',
  22 + month1: 'January',
  23 + month2: 'February',
  24 + month3: 'March',
  25 + month4: 'April',
  26 + month5: 'May',
  27 + month6: 'June',
  28 + month7: 'July',
  29 + month8: 'August',
  30 + month9: 'September',
  31 + month10: 'October',
  32 + month11: 'November',
  33 + month12: 'December',
  34 + year: '',
  35 + weeks: {
  36 + sun: 'Sun',
  37 + mon: 'Mon',
  38 + tue: 'Tue',
  39 + wed: 'Wed',
  40 + thu: 'Thu',
  41 + fri: 'Fri',
  42 + sat: 'Sat'
  43 + },
  44 + months: {
  45 + m1: 'Jan',
  46 + m2: 'Feb',
  47 + m3: 'Mar',
  48 + m4: 'Apr',
  49 + m5: 'May',
  50 + m6: 'Jun',
  51 + m7: 'Jul',
  52 + m8: 'Aug',
  53 + m9: 'Sep',
  54 + m10: 'Oct',
  55 + m11: 'Nov',
  56 + m12: 'Dec'
  57 + }
6 58 }
7 59 }
8 60 };
9 61 \ No newline at end of file
... ...
src/locale/lang/zh-CN.js
  Show/Hide comments   View file @4ab1181
... ... @@ -3,6 +3,58 @@ export default {
3 3 select: {
4 4 placeholder: '请选择',
5 5 noMatch: '无匹配数据'
  6 + },
  7 + table: {
  8 + noDataText: '暂无数据',
  9 + noFilteredDataText: '暂无筛选结果',
  10 + confirmFilter: '筛选',
  11 + resetFilter: '重置',
  12 + clearFilter: '全部'
  13 + },
  14 + datepicker: {
  15 + selectDate: '选择日期',
  16 + selectTime: '选择时间',
  17 + startTime: '开始时间',
  18 + endTime: '结束时间',
  19 + clear: '清空',
  20 + ok: '确定',
  21 + month: '月',
  22 + month1: '1 月',
  23 + month2: '2 月',
  24 + month3: '3 月',
  25 + month4: '4 月',
  26 + month5: '5 月',
  27 + month6: '6 月',
  28 + month7: '7 月',
  29 + month8: '8 月',
  30 + month9: '9 月',
  31 + month10: '10 月',
  32 + month11: '11 月',
  33 + month12: '12 月',
  34 + year: '年',
  35 + weeks: {
  36 + sun: '日',
  37 + mon: '一',
  38 + tue: '二',
  39 + wed: '三',
  40 + thu: '四',
  41 + fri: '五',
  42 + sat: '六'
  43 + },
  44 + months: {
  45 + m1: '1月',
  46 + m2: '2月',
  47 + m3: '3月',
  48 + m4: '4月',
  49 + m5: '5月',
  50 + m6: '6月',
  51 + m7: '7月',
  52 + m8: '8月',
  53 + m9: '9月',
  54 + m10: '10月',
  55 + m11: '11月',
  56 + m12: '12月'
  57 + }
6 58 }
7 59 }
8 60 };
9 61 \ No newline at end of file
... ...
src/locale/lang/zh-TW.js
  Show/Hide comments   View file @4ab1181
... ... @@ -3,6 +3,58 @@ export default {
3 3 select: {
4 4 placeholder: '請選擇',
5 5 noMatch: '無匹配數據'
  6 + },
  7 + table: {
  8 + noDataText: '暫無數據',
  9 + noFilteredDataText: '暫無篩選結果',
  10 + confirmFilter: '篩選',
  11 + resetFilter: '重置',
  12 + clearFilter: '全部'
  13 + },
  14 + datepicker: {
  15 + selectDate: '選擇日期',
  16 + selectTime: '選擇時間',
  17 + startTime: '開始時間',
  18 + endTime: '結束時間',
  19 + clear: '清空',
  20 + ok: '確定',
  21 + month: '月',
  22 + month1: '1 月',
  23 + month2: '2 月',
  24 + month3: '3 月',
  25 + month4: '4 月',
  26 + month5: '5 月',
  27 + month6: '6 月',
  28 + month7: '7 月',
  29 + month8: '8 月',
  30 + month9: '9 月',
  31 + month10: '10 月',
  32 + month11: '11 月',
  33 + month12: '12 月',
  34 + year: '年',
  35 + weeks: {
  36 + sun: '日',
  37 + mon: '一',
  38 + tue: '二',
  39 + wed: '三',
  40 + thu: '四',
  41 + fri: '五',
  42 + sat: '六'
  43 + },
  44 + months: {
  45 + m1: '1月',
  46 + m2: '2月',
  47 + m3: '3月',
  48 + m4: '4月',
  49 + m5: '5月',
  50 + m6: '6月',
  51 + m7: '7月',
  52 + m8: '8月',
  53 + m9: '9月',
  54 + m10: '10月',
  55 + m11: '11月',
  56 + m12: '12月'
  57 + }
6 58 }
7 59 }
8 60 };
9 61 \ No newline at end of file
... ...
src/mixins/locale.js 0 → 100644
  Show/Hide comments   View file @4ab1181
  1 +import { t } from '../locale';
  2 +
  3 +export default {
  4 + methods: {
  5 + t(...args) {
  6 + return t.apply(this, args);
  7 + }
  8 + }
  9 +};
... ...