Add locale feature (#678)

fix

.babelrc

 {
   "presets": [["es2015", { "loose": true }]],
-  "plugins": ["transform-vue-jsx"]
+  "plugins": ["transform-vue-jsx"],
+  "env": {
+    "utils": {
+      "plugins": [
+        ["module-resolver", {
+          "root": ["element-ui"],
+          "alias": {
+            "element-ui/src/locale": "element-ui/lib/locale"
+          }
+        }]
+      ]
+    }
+  }
 }

build/bin/build-entry.js

@@ -8,10 +8,12 @@ var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
 var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
 var INSTALL_COMPONENT_TEMPLATE = '  Vue.component({{name}}.name, {{name}});';
 var MAIN_TEMPLATE = `{{include}}
+import locale from 'element-ui/src/locale';
 
-const install = function(Vue) {
+const install = function(Vue, opts = {}) {
   /* istanbul ignore if */
   if (install.installed) return;
+  locale.use(opts.locale);
 
 {{install}}
 

package.json

@@ -17,7 +17,7 @@
     "deploy": "npm run build:file && cooking build -c build/cooking.demo.js -p && echo element.eleme.io>>examples/element-ui/CNAME && gh-pages -d examples/element-ui --remote eleme && del examples/element-ui",
     "pub": "sh build/release.sh",
     "pub:all": "npm run dist:all && lerna publish",
-    "build:utils": "babel src --out-dir lib --ignore index.js",
+    "build:utils": "BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
     "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
     "lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
     "test:watch": "karma start test/unit/karma.conf.js",
@@ -50,6 +50,7 @@
     "babel-core": "^6.14.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.0",
     "babel-loader": "^6.2.5",
+    "babel-plugin-module-resolver": "^2.2.0",
     "babel-plugin-syntax-jsx": "^6.8.0",
     "babel-plugin-transform-vue-jsx": "^3.1.0",
     "babel-preset-es2015": "^6.14.0",

packages/checkbox/src/checkbox-group.vue

 <script>
-  import emitter from 'element-ui/src/mixins/emitter';
+  import Emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElCheckboxGroup',
 
-    mixins: [emitter],
+    mixins: [Emitter],
 
     props: {
       value: {}

packages/date-picker/index.js

 import DatePicker from './src/picker/date-picker';
 
 /* istanbul ignore next */
-module.exports = function install(Vue) {
+DatePicker.install = function install(Vue) {
   Vue.component(DatePicker.name, DatePicker);
 };
 

packages/date-picker/src/basic/date-table.vue

@@ -8,14 +8,14 @@
     :class="{ 'is-week-mode': selectionMode === 'week' }">
     <tbody>
     <tr>
-      <th v-if="showWeekNumber">{{ $t('datepicker.week') }}</th>
-      <th>{{ $t('datepicker.weeks.sun') }}</th>
-      <th>{{ $t('datepicker.weeks.mon') }}</th>
-      <th>{{ $t('datepicker.weeks.tue') }}</th>
-      <th>{{ $t('datepicker.weeks.wed') }}</th>
-      <th>{{ $t('datepicker.weeks.thu') }}</th>
-      <th>{{ $t('datepicker.weeks.fri') }}</th>
-      <th>{{ $t('datepicker.weeks.sat') }}</th>
+      <th v-if="showWeekNumber">{{ $t('el.datepicker.week') }}</th>
+      <th>{{ $t('el.datepicker.weeks.sun') }}</th>
+      <th>{{ $t('el.datepicker.weeks.mon') }}</th>
+      <th>{{ $t('el.datepicker.weeks.tue') }}</th>
+      <th>{{ $t('el.datepicker.weeks.wed') }}</th>
+      <th>{{ $t('el.datepicker.weeks.thu') }}</th>
+      <th>{{ $t('el.datepicker.weeks.fri') }}</th>
+      <th>{{ $t('el.datepicker.weeks.sat') }}</th>
     </tr>
     <tr
       class="el-date-table__row"
@@ -24,16 +24,16 @@
       <td
         v-for="cell in row"
         :class="getCellClasses(cell)"
-        v-text="cell.type === 'today' ? $t('datepicker.today') : cell.text"></td>
+        v-text="cell.type === 'today' ? $t('el.datepicker.today') : cell.text"></td>
     </tr>
     </tbody>
   </table>
 </template>
 
 <script>
-  import { $t, getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, DAY_DURATION } from '../util';
+  import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, DAY_DURATION } from '../util';
   import { hasClass } from 'wind-dom/src/class';
-  import Vue from 'vue';
+  import Locale from 'element-ui/src/mixins/locale';
 
   const clearHours = function(time) {
     const cloneDate = new Date(time);
@@ -42,6 +42,8 @@
   };
 
   export default {
+    mixins: [Locale],
+
     props: {
       date: {},
 
@@ -157,7 +159,7 @@
 
             cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
 
-            Vue.set(row, this.showWeekNumber ? j + 1 : j, cell);
+            this.$set(row, this.showWeekNumber ? j + 1 : j, cell);
           }
 
           if (this.selectionMode === 'week') {
@@ -214,10 +216,6 @@
     },
 
     methods: {
-      $t(...args) {
-        return $t.apply(this, args);
-      },
-
       getCellClasses(cell) {
         const selectionMode = this.selectionMode;
         const monthDate = this.monthDate;

packages/date-picker/src/basic/month-table.vue

@@ -3,44 +3,44 @@
     <tbody>
     <tr>
       <td :class="{ current: month === 0 }">
-        <a class="cell">{{ $t('datepicker.months.jan') }}</a>
+        <a class="cell">{{ $t('el.datepicker.months.jan') }}</a>
       </td>
       <td :class="{ current: month === 1 }">
-        <a class="cell">{{ $t('datepicker.months.feb') }}</a>
+        <a class="cell">{{ $t('el.datepicker.months.feb') }}</a>
       </td>
       <td :class="{ current: month === 2 }">
-        <a class="cell">{{ $t('datepicker.months.mar') }}</a>
+        <a class="cell">{{ $t('el.datepicker.months.mar') }}</a>
       </td>
       <td :class="{ current: month === 3 }">
-        <a class="cell">{{ $t('datepicker.months.apr') }}</a>
+        <a class="cell">{{ $t('el.datepicker.months.apr') }}</a>
       </td>
     </tr>
     <tr>
       <td :class="{ current: month === 4 }">
-        <a class="cell">{{ $t('datepicker.months.may') }}</a>
+        <a class="cell">{{ $t('el.datepicker.months.may') }}</a>
       </td>
       <td :class="{ current: month === 5 }">
-        <a class="cell">{{ $t('datepicker.months.jun') }}</a>
+        <a class="cell">{{ $t('el.datepicker.months.jun') }}</a>
       </td>
       <td :class="{ current: month === 6 }">
-        <a class="cell">{{ $t('datepicker.months.jul') }}</a>
+        <a class="cell">{{ $t('el.datepicker.months.jul') }}</a>
       </td>
       <td :class="{ current: month === 7 }">
-        <a class="cell">{{ $t('datepicker.months.aug') }}</a>
+        <a class="cell">{{ $t('el.datepicker.months.aug') }}</a>
       </td>
     </tr>
     <tr>
       <td :class="{ current: month === 8 }">
-        <a class="cell">{{ $t('datepicker.months.sep') }}</a>
+        <a class="cell">{{ $t('el.datepicker.months.sep') }}</a>
       </td>
       <td :class="{ current: month === 9 }">
-        <a class="cell">{{ $t('datepicker.months.oct') }}</a>
+        <a class="cell">{{ $t('el.datepicker.months.oct') }}</a>
       </td>
       <td :class="{ current: month === 10 }">
-        <a class="cell">{{ $t('datepicker.months.nov') }}</a>
+        <a class="cell">{{ $t('el.datepicker.months.nov') }}</a>
       </td>
       <td :class="{ current: month === 11 }">
-        <a class="cell">{{ $t('datepicker.months.dec') }}</a>
+        <a class="cell">{{ $t('el.datepicker.months.dec') }}</a>
       </td>
     </tr>
     </tbody>
@@ -48,7 +48,7 @@
 </template>
 
 <script type="text/babel">
-  import { $t } from '../util';
+  import Locale from 'element-ui/src/mixins/locale';
 
   export default {
     props: {
@@ -56,12 +56,8 @@
         type: Number
       }
     },
-
+    mixins: [Locale],
     methods: {
-      $t(...args) {
-        return $t.apply(this, args);
-      },
-
       handleMonthTableClick(event) {
         const target = event.target;
         if (target.tagName !== 'A') return;

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

@@ -22,7 +22,7 @@
             <span class="el-date-range-picker__editors-wrap">
               <span class="el-date-range-picker__time-picker-wrap">
                 <input
-                  placeholder="开始日期"
+                  :placeholder="$t('el.datepicker.startDate')"
                   class="el-date-range-picker__editor"
                   :value="leftVisibleDate"
                   @input="handleDateInput($event, 'min')"
@@ -30,7 +30,7 @@
               </span>
               <span class="el-date-range-picker__time-picker-wrap">
                 <input
-                  placeholder="开始时间"
+                  :placeholder="$t('el.datepicker.startTime')"
                   class="el-date-range-picker__editor"
                   :value="leftVisibleTime"
                   @focus="leftTimePickerVisible = !leftTimePickerVisible"
@@ -49,7 +49,7 @@
               <span class="el-date-range-picker__time-picker-wrap">
                 <input
                   ref="leftInput"
-                  placeholder="结束日期"
+                  :placeholder="$t('el.datepicker.endDate')"
                   class="el-date-range-picker__editor"
                   :value="rightVisibleDate"
                   :readonly="!minDate"
@@ -59,7 +59,7 @@
               <span class="el-date-range-picker__time-picker-wrap">
                 <input
                   ref="rightInput"
-                  placeholder="结束时间"
+                  :placeholder="$t('el.datepicker.endTime')"
                   class="el-date-range-picker__editor"
                   :value="rightVisibleTime"
                   @focus="minDate && (rightTimePickerVisible = !rightTimePickerVisible)"
@@ -128,32 +128,35 @@
       <div class="el-picker-panel__footer" v-if="showTime">
         <!-- <a
           class="el-picker-panel__link-btn"
-          @click="changeToToday">{{ $t('datepicker.now') }}</a> -->
+          @click="changeToToday">{{ $t('el.datepicker.now') }}</a> -->
         <button
           type="button"
           class="el-picker-panel__btn"
           @click="handleConfirm"
-          :disabled="btnDisabled">{{ $t('datepicker.confirm') }}</button>
+          :disabled="btnDisabled">{{ $t('el.datepicker.confirm') }}</button>
       </div>
     </div>
   </transition>
 </template>
 
 <script type="text/babel">
-  import { nextMonth, prevMonth, toDate, $t, formatDate, parseDate } from '../util';
+  import { nextMonth, prevMonth, toDate, formatDate, parseDate } from '../util';
+  import Locale from 'element-ui/src/mixins/locale';
 
   export default {
+    mixins: [Locale],
+
     computed: {
       btnDisabled() {
         return !(this.minDate && this.maxDate && !this.selecting);
       },
 
       leftLabel() {
-        return this.date.getFullYear() + ' ' + this.$t('datepicker.year') + ' ' + (this.date.getMonth() + 1) + ' ' + this.$t('datepicker.month');
+        return this.date.getFullYear() + ' ' + this.$t('el.datepicker.year') + ' ' + (this.date.getMonth() + 1) + ' ' + this.$t('el.datepicker.month');
       },
 
       rightLabel() {
-        return this.rightDate.getFullYear() + ' ' + this.$t('datepicker.year') + ' ' + (this.rightDate.getMonth() + 1) + ' ' + this.$t('datepicker.month');
+        return this.rightDate.getFullYear() + ' ' + this.$t('el.datepicker.year') + ' ' + (this.rightDate.getMonth() + 1) + ' ' + this.$t('el.datepicker.month');
       },
 
       leftYear() {
@@ -270,10 +273,6 @@
     },
 
     methods: {
-      $t(...args) {
-        return $t.apply(this, args);
-      },
-
       handleDateInput(event, type) {
         const value = event.target.value;
         const parsedValue = parseDate(value, 'yyyy-MM-dd');

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

@@ -23,7 +23,7 @@
          <div class="el-date-picker__time-header" v-if="showTime">
             <span class="el-date-picker__editor-wrap">
               <input
-                :placehoder="$t('datepicker.selectDate')"
+                :placehoder="$t('el.datepicker.selectDate')"
                 type="text"
                 v-model.lazy="visibleDate"
                 class="el-date-picker__editor">
@@ -33,7 +33,7 @@
                 ref="input"
                 @focus="timePickerVisible = !timePickerVisible"
                 v-model.lazy="visibleTime"
-                :placehoder="$t('datepicker.selectTime')"
+                :placehoder="$t('el.datepicker.selectTime')"
                 type="text"
                 class="el-date-picker__editor">
               <time-picker
@@ -64,7 +64,7 @@
               @click="showMonthPicker"
               v-show="currentView === 'date'"
               class="el-date-picker__header-label"
-              :class="{ active: currentView === 'month' }">{{ month + 1 }} {{$t('datepicker.month')}}</span>
+              :class="{ active: currentView === 'month' }">{{ month + 1 }} {{$t('el.datepicker.month')}}</span>
             <button
               type="button"
               @click="nextYear"
@@ -111,20 +111,23 @@
         <a
           href="JavaScript:"
           class="el-picker-panel__link-btn"
-          @click="changeToNow">{{ $t('datepicker.now') }}</a>
+          @click="changeToNow">{{ $t('el.datepicker.now') }}</a>
         <button
           type="button"
           class="el-picker-panel__btn"
-          @click="confirm">{{ $t('datepicker.confirm') }}</button>
+          @click="confirm">{{ $t('el.datepicker.confirm') }}</button>
       </div>
     </div>
   </transition>
 </template>
 
 <script type="text/babel">
-  import { $t, formatDate, parseDate } from '../util';
+  import { formatDate, parseDate } from '../util';
+  import Locale from 'element-ui/src/mixins/locale';
 
   export default {
+    mixins: [Locale],
+
     watch: {
       showTime(val) {
         /* istanbul ignore if */
@@ -174,10 +177,6 @@
     },
 
     methods: {
-      $t(...args) {
-        return $t.apply(this, args);
-      },
-
       resetDate() {
         this.date = new Date(this.date);
       },
@@ -414,7 +413,7 @@
       yearLabel() {
         const year = this.year;
         if (!year) return '';
-        const yearTranslation = this.$t('datepicker.year');
+        const yearTranslation = this.$t('el.datepicker.year');
         if (this.currentView === 'year') {
           const startYear = Math.floor(year / 10) * 10;
           return startYear + ' ' + yearTranslation + '-' + (startYear + 9) + ' ' + yearTranslation;

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

@@ -6,7 +6,7 @@
       class="el-time-range-picker el-picker-panel">
       <div class="el-time-range-picker__content">
         <div class="el-time-range-picker__cell">
-          <div class="el-time-range-picker__header">{{ $t('datepicker.startTime') }}</div>
+          <div class="el-time-range-picker__header">{{ $t('el.datepicker.startTime') }}</div>
           <div class="el-time-range-picker__body el-time-panel__content">
             <time-spinner
               ref="minSpinner"
@@ -20,7 +20,7 @@
           </div>
         </div>
         <div class="el-time-range-picker__cell">
-          <div class="el-time-range-picker__header">{{ $t('datepicker.endTime') }}</div>
+          <div class="el-time-range-picker__header">{{ $t('el.datepicker.endTime') }}</div>
           <div class="el-time-range-picker__body el-time-panel__content">
             <time-spinner
               ref="maxSpinner"
@@ -38,12 +38,12 @@
         <button
           type="button"
           class="el-time-panel__btn cancel"
-          @click="handleCancel()">{{ $t('datepicker.cancel') }}</button>
+          @click="handleCancel()">{{ $t('el.datepicker.cancel') }}</button>
         <button
           type="button"
           class="el-time-panel__btn confirm"
           @click="handleConfirm()"
-          :disabled="btnDisabled">{{ $t('datepicker.confirm') }}</button>
+          :disabled="btnDisabled">{{ $t('el.datepicker.confirm') }}</button>
       </div>
     </div>
   </transition>
@@ -51,7 +51,7 @@
 
 <script type="text/babel">
   import { parseDate, limitRange } from '../util';
-  import { $t } from '../util';
+  import Locale from 'element-ui/src/mixins/locale';
 
   const MIN_TIME = parseDate('00:00:00', 'HH:mm:ss');
   const MAX_TIME = parseDate('23:59:59', 'HH:mm:ss');
@@ -73,6 +73,8 @@
   };
 
   export default {
+    mixins: [Locale],
+
     components: {
       TimeSpinner: require('../basic/time-spinner')
     },
@@ -125,10 +127,6 @@
     },
 
     methods: {
-      $t(...args) {
-        return $t.apply(this, args);
-      },
-
       handleCancel() {
         this.$emit('pick');
       },

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

@@ -19,11 +19,11 @@
         <button
           type="button"
           class="el-time-panel__btn cancel"
-          @click="handleCancel">{{ $t('datepicker.cancel') }}</button>
+          @click="handleCancel">{{ $t('el.datepicker.cancel') }}</button>
         <button
           type="button"
           class="el-time-panel__btn confirm"
-          @click="handleConfirm()">{{ $t('datepicker.confirm') }}</button>
+          @click="handleConfirm()">{{ $t('el.datepicker.confirm') }}</button>
       </div>
     </div>
   </transition>
@@ -31,9 +31,11 @@
 
 <script type="text/babel">
   import { limitRange } from '../util';
-  import { $t } from '../util';
+  import Locale from 'element-ui/src/mixins/locale';
 
   export default {
+    mixins: [Locale],
+
     components: {
       TimeSpinner: require('../basic/time-spinner')
     },
@@ -98,10 +100,6 @@
     },
 
     methods: {
-      $t(...args) {
-        return $t.apply(this, args);
-      },
-
       handleCancel() {
         this.$emit('pick', null);
       },

packages/date-picker/src/picker.vue

@@ -33,9 +33,9 @@ import Vue from 'vue';
 import Clickoutside from 'element-ui/src/utils/clickoutside';
 import { formatDate, parseDate, getWeekNumber } from './util';
 import Popper from 'element-ui/src/utils/vue-popper';
-import emitter from 'element-ui/src/mixins/emitter';
+import Emitter from 'element-ui/src/mixins/emitter';
 
-const newPopper = {
+const NewPopper = {
   props: {
     appendToBody: Popper.props.appendToBody,
     offset: Popper.props.offset,
@@ -193,7 +193,7 @@ const PLACEMENT_MAP = {
 };
 
 export default {
-  mixins: [emitter, newPopper],
+  mixins: [Emitter, NewPopper],
 
   props: {
     format: String,

packages/date-picker/src/util/i18n.js

-export default {
-  datepicker: {
-    now: '此刻',
-    today: '今天',
-    cancel: '取消',
-    clear: '清空',
-    confirm: '确定',
-    selectDate: '选择日期',
-    selectTime: '选择时间',
-    startTime: '开始时间',
-    endTime: '结束时间',
-    year: '年',
-    month: '月',
-    week: '周次',
-    weeks: {
-      sun: '日',
-      mon: '一',
-      tue: '二',
-      wed: '三',
-      thu: '四',
-      fri: '五',
-      sat: '六'
-    },
-    months: {
-      jan: '一月',
-      feb: '二月',
-      mar: '三月',
-      apr: '四月',
-      may: '五月',
-      jun: '六月',
-      jul: '七月',
-      aug: '八月',
-      sep: '九月',
-      oct: '十月',
-      nov: '十一月',
-      dec: '十二月'
-    }
-  }
-};

packages/date-picker/src/util/index.js

@@ -157,22 +157,3 @@ export const limitRange = function(date, ranges) {
 
   return date < minDate ? minDate : maxDate;
 };
-
-import i18n from './i18n';
-
-export const $t = function(path, options) {
-  const vuei18n = Object.getPrototypeOf(this).$t;
-  if (typeof vuei18n === 'function') {
-    return vuei18n.apply(this, [path, options]);
-  }
-  const array = path.split('.');
-  let current = i18n;
-  for (var i = 0, j = array.length; i < j; i++) {
-    var property = array[i];
-    var value = current[property];
-    if (i === j - 1) return value;
-    if (!value) return '';
-    current = value;
-  }
-  return '';
-};

packages/dialog/src/component.vue

@@ -27,7 +27,7 @@
   export default {
     name: 'el-dialog',
 
-    mixins: [ Popup ],
+    mixins: [Popup],
 
     props: {
       title: {

packages/dropdown/src/dropdown-item.vue

@@ -2,12 +2,12 @@
   <li class="el-dropdown-item" @click="handleClick"><slot></slot></li>
 </template>
 <script>
-  import emitter from 'element-ui/src/mixins/emitter';
+  import Emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElDropdownItem',
 
-    mixins: [emitter],
+    mixins: [Emitter],
 
     methods: {
       handleClick(e) {

packages/dropdown/src/dropdown.vue

 <script>
   import Clickoutside from 'element-ui/src/utils/clickoutside';
-  import emitter from 'element-ui/src/mixins/emitter';
+  import Emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElDropdown',
 
-    mixins: [emitter],
+    mixins: [Emitter],
 
     directives: { Clickoutside },
 

packages/menu/src/menu-item.vue

 <script>
-  import menuMixin from './menu-mixin';
+  import Menu from './menu-mixin';
   module.exports = {
     name: 'el-menu-item',
 
     componentName: 'menu-item',
 
-    mixins: [menuMixin],
+    mixins: [Menu],
 
     props: {
       index: {

packages/message-box/src/main.vue

@@ -24,8 +24,12 @@
 </template>
 
 <script type="text/babel">
-  let CONFIRM_TEXT = '确定';
-  let CANCEL_TEXT = '取消';
+  import Popup from 'vue-popup';
+  import ElInput from 'element-ui/packages/input';
+  import ElButton from 'element-ui/packages/button';
+  import { addClass, removeClass } from 'wind-dom/src/class';
+  import { $t } from 'element-ui/src/locale';
+
   let typeMap = {
     success: 'circle-check',
     info: 'information',
@@ -33,13 +37,8 @@
     error: 'circle-cross'
   };
 
-  import Popup from 'vue-popup';
-  import ElInput from 'element-ui/packages/input';
-  import ElButton from 'element-ui/packages/button';
-  import { addClass, removeClass } from 'wind-dom/src/class';
-
   export default {
-    mixins: [ Popup ],
+    mixins: [Popup],
 
     props: {
       modal: {
@@ -115,7 +114,7 @@
         if (this.$type === 'prompt') {
           var inputPattern = this.inputPattern;
           if (inputPattern && !inputPattern.test(this.inputValue || '')) {
-            this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
+            this.editorErrorMessage = this.inputErrorMessage || $t('el.messagebox.error');
             addClass(this.$refs.input.$el.querySelector('input'), 'invalid');
             return false;
           }
@@ -123,7 +122,7 @@
           if (typeof inputValidator === 'function') {
             var validateResult = inputValidator(this.inputValue);
             if (validateResult === false) {
-              this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
+              this.editorErrorMessage = this.inputErrorMessage || $t('el.messagebox.error');
               addClass(this.$refs.input.$el.querySelector('input'), 'invalid');
               return false;
             }
@@ -174,8 +173,8 @@
         inputErrorMessage: '',
         showConfirmButton: true,
         showCancelButton: false,
-        confirmButtonText: CONFIRM_TEXT,
-        cancelButtonText: CANCEL_TEXT,
+        confirmButtonText: $t('el.messagebox.confirm'),
+        cancelButtonText: $t('el.messagebox.cancel'),
         confirmButtonClass: '',
         confirmButtonDisabled: false,
         cancelButtonClass: '',

packages/pagination/src/pagination.js

-import Vue from 'vue';
 import Pager from './pager.vue';
 import ElSelect from 'element-ui/packages/select';
 import ElOption from 'element-ui/packages/option';
 import Migrating from 'element-ui/src/mixins/migrating';
+import { $t } from 'element-ui/src/locale';
 
 export default {
   name: 'ElPagination',
@@ -138,7 +138,7 @@ export default {
                 this.$parent.pageSizes.map(item =>
                     <el-option
                       value={ item }
-                      label={ item + ' 条/页' }>
+                      label={ item + ' ' + $t('el.pagination.pagesize') }>
                     </el-option>
                   )
               }
@@ -339,7 +339,7 @@ export default {
       }
 
       if (newVal !== undefined) {
-        Vue.nextTick(() => {
+        this.$nextTick(() => {
           this.internalCurrentPage = newVal;
         });
       }

packages/radio/src/radio-group.vue

 <script>
-  import emitter from 'element-ui/src/mixins/emitter';
+  import Emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElRadioGroup',
 
     componentName: 'radio-group',
 
-    mixins: [emitter],
+    mixins: [Emitter],
 
     props: {
       value: [String, Number],

packages/select/src/option-group.vue

@@ -10,10 +10,10 @@
 </template>
 
 <script type="text/babel">
-  import emitter from 'element-ui/src/mixins/emitter';
+  import Emitter from 'element-ui/src/mixins/emitter';
 
   export default {
-    mixins: [emitter],
+    mixins: [Emitter],
 
     name: 'el-option-group',
 

packages/select/src/option.vue

@@ -12,10 +12,10 @@
 </template>
 
 <script type="text/babel">
-  import emitter from 'element-ui/src/mixins/emitter';
+  import Emitter from 'element-ui/src/mixins/emitter';
 
   export default {
-    mixins: [emitter],
+    mixins: [Emitter],
 
     name: 'el-option',
 

packages/select/src/select.vue

@@ -64,7 +64,8 @@
 </template>
 
 <script type="text/babel">
-  import emitter from 'element-ui/src/mixins/emitter';
+  import Emitter from 'element-ui/src/mixins/emitter';
+  import Locale from 'element-ui/src/mixins/locale';
   import ElInput from 'element-ui/packages/input';
   import ElSelectMenu from './select-dropdown.vue';
   import ElTag from 'element-ui/packages/tag';
@@ -72,9 +73,10 @@
   import Clickoutside from 'element-ui/src/utils/clickoutside';
   import { addClass, removeClass, hasClass } from 'wind-dom/src/class';
   import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
+  import { $t } from 'element-ui/src/locale';
 
   export default {
-    mixins: [emitter],
+    mixins: [Emitter, Locale],
 
     name: 'ElSelect',
 
@@ -108,17 +110,17 @@
 
       emptyText() {
         if (this.loading) {
-          return '加载中';
+          return this.$t('el.select.loading');
         } else {
           if (this.voidRemoteQuery) {
             this.voidRemoteQuery = false;
             return false;
           }
           if (this.filteredOptionsCount === 0) {
-            return '无匹配数据';
+            return this.$t('el.select.noMatch');
           }
           if (this.options.length === 0) {
-            return '无数据';
+            return this.$t('el.select.noData');
           }
         }
         return null;
@@ -147,7 +149,7 @@
       multiple: Boolean,
       placeholder: {
         type: String,
-        default: '请选择'
+        default: $t('el.select.placeholder')
       }
     },
 

packages/upload/src/cover.vue

@@ -19,9 +19,9 @@
       <transition name="fade-in">
         <div v-show="mouseover" class="el-dragger__cover__interact">
           <div class="el-draggeer__cover__btns">
-            <span class="btn" @click="$parent.handleClick()"><i class="el-icon-upload2"></i><span>继续上传</span></span>
-            <span class="btn" @click="onPreview(image)"><i class="el-icon-view"></i><span>查看图片</span></span>
-            <span class="btn" @click="onRemove(image)"><i class="el-icon-delete2"></i><span>删除</span></span>
+            <span class="btn" @click="$parent.handleClick()"><i class="el-icon-upload2"></i><span>{{ $t('el.upload.continue') }}</span></span>
+            <span class="btn" @click="onPreview(image)"><i class="el-icon-view"></i><span>{{ $t('el.upload.preview') }}</span></span>
+            <span class="btn" @click="onRemove(image)"><i class="el-icon-delete2"></i><span>{{ $t('el.upload.delete') }}</span></span>
           </div>
         </div>
       </transition>
@@ -32,7 +32,11 @@
   </div>
 </template>
 <script>
+  import Locale from 'element-ui/src/mixins/locale';
+
   export default {
+    mixins: [Locale],
+
     props: {
       image: {},
       onPreview: {

packages/upload/src/upload-list.vue

@@ -12,7 +12,7 @@
       <a class="el-upload__file__name" @click="$emit('preview', file)">
         <i class="el-icon-document"></i>{{file.name}}
       </a>
-      <span class="el-upload__btn-delete" @click="$emit('remove', file)" v-show="file.status === 'finished'">删除</span>
+      <span class="el-upload__btn-delete" @click="$emit('remove', file)" v-show="file.status === 'finished'">{{ $t('el.upload.delete') }}</span>
       <el-progress
         v-if="file.showProgress"
         :stroke-width="2"
@@ -23,7 +23,10 @@
   </transition-group>
 </template>
 <script>
+  import Locale from 'element-ui/src/mixins/locale';
+
   export default {
+    mixins: [Locale],
     props: {
       files: {
         type: Array,

packages/upload/src/upload.vue

@@ -8,8 +8,7 @@
     @click="handleClick"
     @drop.prevent="onDrop"
     @dragover.prevent="dragOver = true"
-    @dragleave.prevent="dragOver = false"
-  >
+    @dragleave.prevent="dragOver = false">
     <slot v-if="!showCover"></slot>
     <cover :image="lastestFile" :on-preview="onPreview" :on-remove="onRemove" v-else></cover>
     <input class="el-upload__input" type="file" ref="input" @change="handleChange" :multiple="multiple" :accept="accept">

src/index.js

@@ -53,10 +53,12 @@ import Card from '../packages/card/index.js';
 import Rate from '../packages/rate/index.js';
 import Steps from '../packages/steps/index.js';
 import Step from '../packages/step/index.js';
+import locale from 'element-ui/src/locale';
 
-const install = function(Vue) {
+const install = function(Vue, opts = {}) {
   /* istanbul ignore if */
   if (install.installed) return;
+  locale.use(opts.locale);
 
   Vue.component(Pagination.name, Pagination);
   Vue.component(Dialog.name, Dialog);

src/locale/index.js

+import defaultLang from 'element-ui/src/locale/lang/zh-cn';
+import Vue from 'vue';
+let lang = defaultLang;
+
+export const $t = function(path, options) {
+  const vuei18n = Object.getPrototypeOf(this || Vue).$t;
+  if (typeof vuei18n === 'function') {
+    return vuei18n.apply(this, [path, options]);
+  }
+  const array = path.split('.');
+  let current = lang;
+
+  for (var i = 0, j = array.length; i < j; i++) {
+    var property = array[i];
+    var value = current[property];
+    if (i === j - 1) return value;
+    if (!value) return '';
+    current = value;
+  }
+  return '';
+};
+
+export const use = function(l) {
+  lang = l || lang;
+};
+export default { use, $t };

src/locale/lang/en.js

+export default {
+  el: {
+    datepicker: {
+      now: 'now',
+      today: 'today',
+      cancel: 'cancel',
+      clear: 'clear',
+      confirm: 'confirm',
+      selectDate: 'selectDate',
+      selectTime: 'selectTime',
+      startDate: 'startDate',
+      startTime: 'startTime',
+      endDate: 'endDate',
+      endTime: 'endTime',
+      year: 'year',
+      month: 'month',
+      week: 'week',
+      weeks: {
+        sun: 'sun',
+        mon: 'mon',
+        tue: 'tue',
+        wed: 'wed',
+        thu: 'thu',
+        fri: 'fri',
+        sat: 'sat'
+      },
+      months: {
+        jan: 'jan',
+        feb: 'feb',
+        mar: 'mar',
+        apr: 'apr',
+        may: 'may',
+        jun: 'jun',
+        jul: 'jul',
+        aug: 'aug',
+        sep: 'sep',
+        oct: 'oct',
+        nov: 'nov',
+        dec: 'dec'
+      }
+    },
+    select: {
+      loading: 'loading',
+      noMatch: 'noMatch',
+      noData: 'noData',
+      placeholder: 'placeholder'
+    },
+    pagination: {
+      pagesize: 'pagesize/页'
+    },
+    messagebox: {
+      confirm: 'confirm',
+      cancel: 'cancel',
+      error: 'error!'
+    },
+    upload: {
+      delete: 'delete',
+      preview: 'preview',
+      continue: 'continue'
+    }
+  }
+};

src/locale/lang/zh-cn.js

+export default {
+  el: {
+    datepicker: {
+      now: '此刻',
+      today: '今天',
+      cancel: '取消',
+      clear: '清空',
+      confirm: '确定',
+      selectDate: '选择日期',
+      selectTime: '选择时间',
+      startDate: '开始日期',
+      startTime: '开始时间',
+      endDate: '结束日期',
+      endTime: '结束时间',
+      year: '年',
+      month: '月',
+      week: '周次',
+      weeks: {
+        sun: '日',
+        mon: '一',
+        tue: '二',
+        wed: '三',
+        thu: '四',
+        fri: '五',
+        sat: '六'
+      },
+      months: {
+        jan: '一月',
+        feb: '二月',
+        mar: '三月',
+        apr: '四月',
+        may: '五月',
+        jun: '六月',
+        jul: '七月',
+        aug: '八月',
+        sep: '九月',
+        oct: '十月',
+        nov: '十一月',
+        dec: '十二月'
+      }
+    },
+    select: {
+      loading: '加载中',
+      noMatch: '无匹配数据',
+      noData: '无数据',
+      placeholder: '请选择'
+    },
+    pagination: {
+      pagesize: '条/页'
+    },
+    messagebox: {
+      confirm: '确定',
+      cancel: '取消',
+      error: '输入的数据不合法!'
+    },
+    upload: {
+      delete: '删除',
+      preview: '查看图片',
+      continue: '继续上传'
+    }
+  }
+};

src/mixins/locale.js

+import { $t } from 'element-ui/src/locale';
+
+export default {
+  methods: {
+    $t(...args) {
+      return $t.apply(this, args);
+    }
+  }
+};