some component support i18n

some component support i18n

src/components/date-picker/base/confirm.vue

@@ -1,19 +1,21 @@
 <template>
     <div :class="[prefixCls + '-confirm']">
         <span :class="timeClasses" v-if="showTime" @click="handleToggleTime">
-            <template v-if="isTime">选择日期</template>
+            <template v-if="isTime">{{ t('i.datepicker.selectDate') }}</template>
-            <template v-else>选择时间</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="text" @click="handleClear">{{ t('i.datepicker.clear') }}</i-button>
-        <i-button size="small" type="primary" @click="handleSuccess">确定</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,

src/components/date-picker/base/date-table.vue

@@ -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: {},

src/components/date-picker/base/month-table.vue

@@ -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}`);
             }
         }
     };

src/components/date-picker/panel/date-range.vue

@@ -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();

src/components/date-picker/panel/date.vue

@@ -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: {

src/components/date-picker/panel/time-range.vue

@@ -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: {

src/components/date-picker/panel/time.vue

@@ -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: {

src/components/table/table-head.vue

@@ -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" :disabled="!column._filterChecked.length" @click="handleFilter($index)">{{ t('i.table.confirmFilter') }}</i-button>
-                                        <i-button type="text" size="small" @click="handleReset($index)">重置</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,

src/components/table/table.vue

@@ -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 () {

src/locale/lang/en-US.js

@@ -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'
+            }
         }
     }
 };

src/locale/lang/zh-CN.js

@@ -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月'
+            }
         }
     }
 };

src/locale/lang/zh-TW.js

@@ -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月'
+            }
         }
     }
 };

src/mixins/locale.js

@@ -0,0 +1,9 @@
+import { t } from '../locale';
+
+export default {
+    methods: {
+        t(...args) {
+            return t.apply(this, args);
+        }
+    }
+};