github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Add locale feature (#678) 

fix
pull/685/head
cinwell.li 2016-10-27 17:31:22 +08:00 committed by FuryBean
parent a1b83b5540
commit f960ea50b9
32 changed files with 295 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.babelrc
View File

@ -1,4 +1,16 @@
{ {
"presets": [["es2015", { "loose": true }]], "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"
}
}]
]
}
}
} }

4
build/bin/build-entry.js
View File

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

3
package.json
View File

@ -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", "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": "sh build/release.sh",
"pub:all": "npm run dist:all && lerna publish", "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", "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
"lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet", "lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
"test:watch": "karma start test/unit/karma.conf.js", "test:watch": "karma start test/unit/karma.conf.js",
@ -50,6 +50,7 @@
"babel-core": "^6.14.0", "babel-core": "^6.14.0",
"babel-helper-vue-jsx-merge-props": "^2.0.0", "babel-helper-vue-jsx-merge-props": "^2.0.0",
"babel-loader": "^6.2.5", "babel-loader": "^6.2.5",
"babel-plugin-module-resolver": "^2.2.0",
"babel-plugin-syntax-jsx": "^6.8.0", "babel-plugin-syntax-jsx": "^6.8.0",
"babel-plugin-transform-vue-jsx": "^3.1.0", "babel-plugin-transform-vue-jsx": "^3.1.0",
"babel-preset-es2015": "^6.14.0", "babel-preset-es2015": "^6.14.0",

4
packages/checkbox/src/checkbox-group.vue
View File

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

2
packages/date-picker/index.js
View File

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

30
packages/date-picker/src/basic/date-table.vue
View File

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

32
packages/date-picker/src/basic/month-table.vue
View File

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

25
packages/date-picker/src/panel/date-range.vue
View File

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

21
packages/date-picker/src/panel/date.vue
View File

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

16
packages/date-picker/src/panel/time-range.vue
View File

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

12
packages/date-picker/src/panel/time.vue
View File

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

6
packages/date-picker/src/picker.vue
View File

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

39
packages/date-picker/src/util/i18n.js
View File

@ -1,39 +0,0 @@
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: '十二月'
}
}
};

19
packages/date-picker/src/util/index.js
View File

@ -157,22 +157,3 @@ export const limitRange = function(date, ranges) {
return date < minDate ? minDate : maxDate; 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 '';
};

2
packages/dialog/src/component.vue
View File

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

4
packages/dropdown/src/dropdown-item.vue
View File

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

4
packages/dropdown/src/dropdown.vue
View File

@ -1,11 +1,11 @@
<script> <script>
import Clickoutside from 'element-ui/src/utils/clickoutside'; 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 { export default {
name: 'ElDropdown', name: 'ElDropdown',
mixins: [emitter], mixins: [Emitter],
directives: { Clickoutside }, directives: { Clickoutside },

4
packages/menu/src/menu-item.vue
View File

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

23
packages/message-box/src/main.vue
View File

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

6
packages/pagination/src/pagination.js
View File

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

4
packages/radio/src/radio-group.vue
View File

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

4
packages/select/src/option-group.vue
View File

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

4
packages/select/src/option.vue
View File

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

14
packages/select/src/select.vue
View File

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

10
packages/upload/src/cover.vue
View File

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

5
packages/upload/src/upload-list.vue
View File

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

3
packages/upload/src/upload.vue
View File

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

4
src/index.js
View File

@ -53,10 +53,12 @@ import Card from '../packages/card/index.js';
import Rate from '../packages/rate/index.js'; import Rate from '../packages/rate/index.js';
import Steps from '../packages/steps/index.js'; import Steps from '../packages/steps/index.js';
import Step from '../packages/step/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 */ /* istanbul ignore if */
if (install.installed) return; if (install.installed) return;
locale.use(opts.locale);
Vue.component(Pagination.name, Pagination); Vue.component(Pagination.name, Pagination);
Vue.component(Dialog.name, Dialog); Vue.component(Dialog.name, Dialog);

26
src/locale/index.js Normal file
View File

@ -0,0 +1,26 @@
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 };

62
src/locale/lang/en.js Normal file
View File

@ -0,0 +1,62 @@
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'
}
}
};

62
src/locale/lang/zh-cn.js Normal file
View File

@ -0,0 +1,62 @@
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: '继续上传'
}
}
};

9
src/mixins/locale.js Normal file
View File

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