From 78cb587402f9e3fc9504c0f091609927874aa7d0 Mon Sep 17 00:00:00 2001 From: Waam Date: Wed, 16 Nov 2016 19:32:17 +0100 Subject: [PATCH 01/72] typo --- src/locale/lang/fr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/locale/lang/fr.js b/src/locale/lang/fr.js index b01aab985..966fbf5f0 100644 --- a/src/locale/lang/fr.js +++ b/src/locale/lang/fr.js @@ -73,7 +73,7 @@ export default { continue: 'Continuer' }, table: { - emptyText: 'Aucune donné', + emptyText: 'Aucune donnée', confirmFilter: 'Confirmer', resetFilter: 'Réinitialiser', clearFilter: 'Tous' From 1bdecf9c3905706373f6d9e2cd9a049e8fcf81f5 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Tue, 3 Jan 2017 17:38:44 +0800 Subject: [PATCH 02/72] DatePicker: fix change event no trigger when setting the initial value, fixed #2167 --- packages/date-picker/src/picker.vue | 70 +++++++++---------- .../date-picker/src/picker/time-picker.js | 6 ++ .../date-picker/src/picker/time-select.js | 2 +- packages/date-picker/src/util/index.js | 8 ++- 4 files changed, 45 insertions(+), 41 deletions(-) diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue index ca8aec787..ef7daa212 100644 --- a/packages/date-picker/src/picker.vue +++ b/packages/date-picker/src/picker.vue @@ -10,8 +10,8 @@ @focus="handleFocus" @blur="handleBlur" @keydown.native="handleKeydown" - :value="visualValue" - @change.native="visualValue = $event.target.value" + :value="displayValue" + @change.native="displayValue = $event.target.value" ref="reference"> import Vue from 'vue'; import Clickoutside from 'element-ui/src/utils/clickoutside'; -import { formatDate, parseDate, getWeekNumber, equalDate } from './util'; +import { formatDate, parseDate, getWeekNumber, equalDate, isDate } from './util'; import Popper from 'element-ui/src/utils/vue-popper'; import Emitter from 'element-ui/src/mixins/emitter'; import ElInput from 'element-ui/packages/input'; @@ -213,7 +213,7 @@ export default { return { pickerVisible: false, showClose: false, - internalValue: '' + currentValue: '' }; }, @@ -222,16 +222,22 @@ export default { if (this.readonly || this.disabled) return; val ? this.showPicker() : this.hidePicker(); }, - internalValue(val) { - if (!val && this.picker && typeof this.picker.handleClear === 'function') { + currentValue(val) { + if (val) return; + if (this.picker && typeof this.picker.handleClear === 'function') { this.picker.handleClear(); + } else { + this.$emit('input'); } }, value: { immediate: true, handler(val) { - this.internalValue = val; + this.currentValue = isDate(val) ? new Date(val) : val; } + }, + displayValue(val) { + this.$emit('change', val); } }, @@ -246,7 +252,7 @@ export default { }, valueIsEmpty() { - const val = this.internalValue; + const val = this.currentValue; if (Array.isArray(val)) { for (let i = 0, len = val.length; i < len; i++) { if (val[i]) { @@ -284,9 +290,9 @@ export default { return HAVE_TRIGGER_TYPES.indexOf(this.type) !== -1; }, - visualValue: { + displayValue: { get() { - const value = this.internalValue; + const value = this.currentValue; if (!value) return; const formatter = ( TYPE_VALUE_RESOLVER_MAP[this.type] || @@ -318,9 +324,6 @@ export default { }, created() { - this.cachePicker = {}; - this.cacheChange = {}; - // vue-popper this.options = { boundariesPadding: 0, @@ -340,26 +343,25 @@ export default { handleClickIcon() { if (this.readonly || this.disabled) return; if (this.showClose) { - this.internalValue = ''; + this.currentValue = ''; + this.showClose = false; } else { this.pickerVisible = !this.pickerVisible; } }, - dateIsUpdated(date, cache) { - let updated = true; - - if (Array.isArray(date)) { - if (equalDate(cache.cacheDateMin, date[0]) && - equalDate(cache.cacheDateMax, date[1])) updated = false; - cache.cacheDateMin = new Date(date[0]); - cache.cacheDateMax = new Date(date[1]); + dateChanged(dateA, dateB) { + if (Array.isArray(dateA)) { + let len = dateA.length; + if (!dateB) return true; + while (len--) { + if (!equalDate(dateA[len], dateB[len])) return true; + } } else { - if (equalDate(cache.cacheDate, date)) updated = false; - cache.cacheDate = new Date(date); + if (!equalDate(dateA, dateB)) return true; } - return updated; + return false; }, handleClose() { @@ -400,7 +402,7 @@ export default { showPicker() { if (this.$isServer) return; if (!this.picker) { - this.panel.defaultValue = this.internalValue; + this.panel.defaultValue = this.currentValue; this.picker = new Vue(this.panel).$mount(document.createElement('div')); this.picker.popperClass = this.popperClass; this.popperElm = this.picker.$el; @@ -423,12 +425,6 @@ export default { this.picker.selectableRange = ranges.map(range => parser(range, format)); } - if (this.type === 'time-select' && options) { - this.$watch('pickerOptions.minTime', val => { - this.picker.minTime = val; - }); - } - for (const option in options) { if (options.hasOwnProperty(option) && // 忽略 time-picker 的该配置项 @@ -446,9 +442,7 @@ export default { this.picker.$on('dodestroy', this.doDestroy); this.picker.$on('pick', (date, visible = false) => { - if (this.dateIsUpdated(date, this.cachePicker)) this.$emit('input', date); - - this.$nextTick(() => this.dateIsUpdated(date, this.cacheChange) && this.$emit('change', this.visualValue)); + if (this.dateChanged(date, this.value)) this.$emit('input', date); this.pickerVisible = this.picker.visible = visible; this.picker.resetView && this.picker.resetView(); }); @@ -463,10 +457,10 @@ export default { this.updatePopper(); - if (this.internalValue instanceof Date) { - this.picker.date = new Date(this.internalValue.getTime()); + if (this.currentValue instanceof Date) { + this.picker.date = new Date(this.currentValue.getTime()); } else { - this.picker.value = this.internalValue; + this.picker.value = this.currentValue; } this.picker.resetView && this.picker.resetView(); diff --git a/packages/date-picker/src/picker/time-picker.js b/packages/date-picker/src/picker/time-picker.js index d127d2cdd..294d2eb61 100644 --- a/packages/date-picker/src/picker/time-picker.js +++ b/packages/date-picker/src/picker/time-picker.js @@ -11,6 +11,12 @@ export default { isRange: Boolean }, + data() { + return { + type: '' + }; + }, + created() { this.type = this.isRange ? 'timerange' : 'time'; this.panel = this.isRange ? TimeRangePanel : TimePanel; diff --git a/packages/date-picker/src/picker/time-select.js b/packages/date-picker/src/picker/time-select.js index 496849590..fca8d5648 100644 --- a/packages/date-picker/src/picker/time-select.js +++ b/packages/date-picker/src/picker/time-select.js @@ -6,7 +6,7 @@ export default { name: 'ElTimeSelect', - created() { + beforeCreate() { this.type = 'time-select'; this.panel = Panel; } diff --git a/packages/date-picker/src/util/index.js b/packages/date-picker/src/util/index.js index d007afa2a..abaa640ad 100644 --- a/packages/date-picker/src/util/index.js +++ b/packages/date-picker/src/util/index.js @@ -13,9 +13,13 @@ export const equalDate = function(dateA, dateB) { }; export const toDate = function(date) { + return isDate(date) ? date : null; +}; + +export const isDate = function(date) { date = new Date(date); - if (isNaN(date.getTime())) return null; - return date; + if (isNaN(date.getTime())) return false; + return true; }; export const formatDate = function(date, format) { From 9ee7afc1c55fa718650f2111848e8763792c3238 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Tue, 3 Jan 2017 18:52:44 +0800 Subject: [PATCH 03/72] TimeSelect: fix maxTime range, fixed #2158 --- packages/date-picker/src/panel/time-select.vue | 2 +- test/unit/specs/time-select.spec.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/date-picker/src/panel/time-select.vue b/packages/date-picker/src/panel/time-select.vue index bc0fa0684..dd450acd2 100644 --- a/packages/date-picker/src/panel/time-select.vue +++ b/packages/date-picker/src/panel/time-select.vue @@ -124,7 +124,7 @@ result.push({ value: current, disabled: compareTime(current, this.minTime || '-1:-1') <= 0 || - compareTime(current, this.maxTime || '100:100') > 0 + compareTime(current, this.maxTime || '100:100') >= 0 }); current = nextTime(current, step); } diff --git a/test/unit/specs/time-select.spec.js b/test/unit/specs/time-select.spec.js index ee500f458..88eb71c47 100644 --- a/test/unit/specs/time-select.spec.js +++ b/test/unit/specs/time-select.spec.js @@ -160,7 +160,7 @@ describe('TimeSelect', () => { setTimeout(_ => { const elm = picker.picker.$el.querySelector('.disabled'); - expect(elm.textContent).to.equal('15:00'); + expect(elm.textContent).to.equal('14:30'); destroyVM(vm); done(); }, 50); From 9ef1faaec93ec596bb97dd5809077aaea514dcc8 Mon Sep 17 00:00:00 2001 From: njleonzhang Date: Tue, 3 Jan 2017 20:08:43 +0800 Subject: [PATCH 04/72] toggle sortable --- packages/table/src/table-header.js | 38 ++++++++++++++++++++++++++---- packages/table/src/table.vue | 8 ++++++- test/unit/specs/table.spec.js | 8 +++---- 3 files changed, 44 insertions(+), 10 deletions(-) diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js index 05ff8e513..b672d979b 100644 --- a/packages/table/src/table-header.js +++ b/packages/table/src/table-header.js @@ -112,9 +112,9 @@ export default { } { column.sortable - ? - this.handleHeaderClick($event, column, 'ascending')}> - this.handleHeaderClick($event, column, 'descending')}> + ? this.handleHeaderClick($event, column) }> + + : '' } @@ -148,7 +148,9 @@ export default { layout: { required: true }, - border: Boolean + border: Boolean, + defaultSortProp: String, + defaultSortOrder: String }, components: { @@ -182,6 +184,23 @@ export default { this.filterPanels = {}; }, + mounted() { + const states = this.store.states; + states.sortProp = this.defaultSortProp; + states.sortOrder = this.defaultSortOrder; + + this.$nextTick(_ => { + for (let i = 0, length = this.columns.length; i < length; i++) { + if (this.columns[i].property === this.defaultSortProp) { + this.columns[i].order = this.defaultSortOrder; + break; + } + } + + this.store.commit('changeSortCondition'); + }); + }, + beforeDestroy() { const panels = this.filterPanels; for (let prop in panels) { @@ -334,7 +353,16 @@ export default { document.body.style.cursor = ''; }, - handleHeaderClick(event, column, order) { + toggleOrder(column) { + if (column.order === 'ascending') { + return 'descending'; + } + return 'ascending'; + }, + + handleHeaderClick(event, column) { + let order = this.toggleOrder(column); + let target = event.target; while (target && target.tagName !== 'TH') { target = target.parentNode; diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue index f7d0aea72..b06769752 100644 --- a/packages/table/src/table.vue +++ b/packages/table/src/table.vue @@ -15,6 +15,8 @@ :store="store" :layout="layout" :border="border" + :default-sort-prop="defaultSortProp" + :default-sort-order="defaultSortOrder" :style="{ width: layout.bodyWidth ? layout.bodyWidth + 'px' : '' }"> @@ -166,7 +168,11 @@ expandRowKeys: Array, - defaultExpandAll: Boolean + defaultExpandAll: Boolean, + + defaultSortProp: String, + + defaultSortOrder: String }, components: { diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js index 06dc12016..3d9771d17 100644 --- a/test/unit/specs/table.spec.js +++ b/test/unit/specs/table.spec.js @@ -1105,9 +1105,9 @@ describe('Table', () => { }); setTimeout(_ => { - const elm = vm.$el.querySelector('.caret-wrapper > .ascending'); - + const elm = vm.$el.querySelector('.caret-wrapper'); elm.click(); + setTimeout(_ => { const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child'); expect(toArray(lastCells).map(node => node.textContent)).to.eql(['100', '95', '92', '92', '80']); @@ -1143,7 +1143,7 @@ describe('Table', () => { const vm = createTable('', '', '', 'sortable'); it('ascending', done => { - const elm = vm.$el.querySelector('.caret-wrapper > .ascending'); + const elm = vm.$el.querySelector('.caret-wrapper'); elm.click(); setTimeout(_ => { @@ -1155,7 +1155,7 @@ describe('Table', () => { }); it('descending', done => { - const elm = vm.$el.querySelector('.caret-wrapper > .descending'); + const elm = vm.$el.querySelector('.caret-wrapper'); elm.click(); setTimeout(_ => { From 68c1c84875c0f84a7e277719a24b0c825f539b2f Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Tue, 3 Jan 2017 23:28:42 +0800 Subject: [PATCH 05/72] Select: fix allowCreate bug --- packages/select/src/option.vue | 4 ++-- packages/select/src/select.vue | 19 ++++++++++++++++++- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/select/src/option.vue b/packages/select/src/option.vue index d9ccafb33..b9e1e142a 100644 --- a/packages/select/src/option.vue +++ b/packages/select/src/option.vue @@ -88,10 +88,10 @@ watch: { currentLabel() { - this.dispatch('ElSelect', 'setSelected'); + if (!this.created) this.dispatch('ElSelect', 'setSelected'); }, value() { - this.dispatch('ElSelect', 'setSelected'); + if (!this.created) this.dispatch('ElSelect', 'setSelected'); } }, diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue index ec2658cb0..69c5f9b5f 100644 --- a/packages/select/src/select.vue +++ b/packages/select/src/select.vue @@ -98,6 +98,7 @@ import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom'; import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'; import { t } from 'element-ui/src/locale'; + import merge from 'element-ui/src/utils/merge'; const sizeMap = { 'large': 42, 'small': 30, @@ -191,6 +192,8 @@ return { options: [], cachedOptions: [], + createdOption: null, + createdSelected: false, selected: this.multiple ? [] : {}, isSelect: true, inputLength: 20, @@ -276,7 +279,12 @@ if (!this.multiple) { this.getOverflows(); if (this.selected) { - this.selectedLabel = this.selected.currentLabel; + if (this.filterable && this.allowCreate && + this.createdSelected && this.createdOption) { + this.selectedLabel = this.createdOption.currentLabel; + } else { + this.selectedLabel = this.selected.currentLabel; + } if (this.filterable) this.query = this.selectedLabel; } } @@ -371,6 +379,12 @@ setSelected() { if (!this.multiple) { let option = this.getOption(this.value); + if (option.created) { + this.createdOption = merge({}, option); + this.createdSelected = true; + } else { + this.createdSelected = false; + } this.selectedLabel = option.currentLabel; this.selected = option; return; @@ -382,6 +396,9 @@ }); } this.selected = result; + this.$nextTick(() => { + this.resetInputHeight(); + }); }, handleIconClick(event) { From 171b7fd0f12066e9ce4a7bac2e840b8c155e47d4 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Wed, 4 Jan 2017 12:22:27 +0800 Subject: [PATCH 06/72] Locale: customize i18n handler, close #2129 --- build/bin/build-entry.js | 2 ++ examples/docs/zh-CN/i18n.md | 16 ++++++++++++++++ src/index.js | 2 ++ src/locale/index.js | 24 +++++++++++++++++------- 4 files changed, 37 insertions(+), 7 deletions(-) diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js index 9d5c75cb3..62da2c810 100644 --- a/build/bin/build-entry.js +++ b/build/bin/build-entry.js @@ -16,6 +16,7 @@ const install = function(Vue, opts = {}) { /* istanbul ignore if */ if (install.installed) return; locale.use(opts.locale); + locale.i18n(opts.i18n); {{install}} @@ -38,6 +39,7 @@ if (typeof window !== 'undefined' && window.Vue) { module.exports = { version: '{{version}}', locale: locale.use, + i18n: locale.i18n, install, Loading, {{list}} diff --git a/examples/docs/zh-CN/i18n.md b/examples/docs/zh-CN/i18n.md index 8b4d57c97..9a2748591 100644 --- a/examples/docs/zh-CN/i18n.md +++ b/examples/docs/zh-CN/i18n.md @@ -68,6 +68,22 @@ Vue.locale('zh-cn', zhLocale) Vue.locale('en', enLocale) ``` +## 兼容其他 i18n 插件 +如果不使用 `vue-i18n`，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。 + +```javascript +import Vue from 'vue' +import Element from 'element-ui' +import enLocale from 'element-ui/lib/locale/lang/en' +import zhLocale from 'element-ui/lib/locale/lang/zh-CN' + +Vue.use(Element, { + i18n: function (path, options) { + // ... + } +}) +``` + 目前 Element 内置了以下语言：
  • 简体中文（zh-CN）
    • diff --git a/src/index.js b/src/index.js index 2074ef617..b5dd855f9 100644 --- a/src/index.js +++ b/src/index.js @@ -66,6 +66,7 @@ const install = function(Vue, opts = {}) { /* istanbul ignore if */ if (install.installed) return; locale.use(opts.locale); + locale.i18n(opts.i18n); Vue.component(Pagination.name, Pagination); Vue.component(Dialog.name, Dialog); @@ -143,6 +144,7 @@ if (typeof window !== 'undefined' && window.Vue) { module.exports = { version: '1.1.2', locale: locale.use, + i18n: locale.i18n, install, Loading, Pagination, diff --git a/src/locale/index.js b/src/locale/index.js index 49b200792..284554f9c 100644 --- a/src/locale/index.js +++ b/src/locale/index.js @@ -6,8 +6,7 @@ import Format from './format'; const format = Format(Vue); let lang = defaultLang; let merged = false; - -export const t = function(path, options) { +let i18nHandler = function() { const vuei18n = Object.getPrototypeOf(this || Vue).$t; if (typeof vuei18n === 'function') { if (!merged) { @@ -17,14 +16,20 @@ export const t = function(path, options) { deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true }) ); } - return vuei18n.apply(this, [path, options]); + return vuei18n.apply(this, arguments); } +}; + +export const t = function(path, options) { + let value = i18nHandler.apply(this, arguments); + if (value) return value; + 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]; + for (let i = 0, j = array.length; i < j; i++) { + const property = array[i]; + value = current[property]; if (i === j - 1) return format(value, options); if (!value) return ''; current = value; @@ -35,4 +40,9 @@ export const t = function(path, options) { export const use = function(l) { lang = l || lang; }; -export default { use, t }; + +export const i18n = function(fn) { + i18nHandler = fn || i18nHandler; +}; + +export default { use, t, i18n }; From 02e1cb84ee419f4a403fdf92c16671fd021de2d6 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Wed, 4 Jan 2017 14:33:58 +0800 Subject: [PATCH 07/72] Fix the next year is calulated incorrectly, fixed #2152 --- packages/date-picker/src/basic/date-table.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/date-picker/src/basic/date-table.vue b/packages/date-picker/src/basic/date-table.vue index 052e071df..ce269353e 100644 --- a/packages/date-picker/src/basic/date-table.vue +++ b/packages/date-picker/src/basic/date-table.vue @@ -367,8 +367,8 @@ target = target.parentNode.cells[1]; } - let year = this.year; - let month = this.month; + let year = Number(this.year); + let month = Number(this.month); const cellIndex = target.cellIndex; const rowIndex = target.parentNode.rowIndex; @@ -377,7 +377,7 @@ const text = cell.text; const className = target.className; - const newDate = new Date(this.year, this.month, 1); + const newDate = new Date(year, month, 1); if (className.indexOf('prev') !== -1) { if (month === 0) { From aeb2d5df1939db30d1eee2c29b5a55b56e338bb1 Mon Sep 17 00:00:00 2001 From: zhou-yg Date: Wed, 4 Jan 2017 18:09:45 +0800 Subject: [PATCH 08/72] remove useless examples/assets/fonts/style.css (#2199) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 联动 https://github.com/ElemeFE/element/issues/1703 没用到的字体，会引起编译错误，建议去除。 --- examples/app.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/app.vue b/examples/app.vue index 04b3dbd34..c0708c2ec 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -1,7 +1,6 @@ ``` +::: ### Global method From 9f94a28f43b98580f523e89f1e8e918c6404e06f Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Thu, 12 Jan 2017 15:36:28 +0800 Subject: [PATCH 55/72] Table: table-body revert to v1.1.2, fixed #2312 --- packages/table/src/table-body.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js index 1b82fa387..4e24eb7bb 100644 --- a/packages/table/src/table-body.js +++ b/packages/table/src/table-body.js @@ -116,7 +116,7 @@ export default { computed: { table() { - return this.$parent.$parent.columns ? this.$parent.$parent : this.$parent; + return this.$parent; }, data() { From d96b5853634af778ff9782ec64468c1dcd6a4d45 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Thu, 12 Jan 2017 15:13:10 +0800 Subject: [PATCH 56/72] use collapse transition in collapse --- packages/collapse/src/collapse-item.vue | 73 ++++--------------------- 1 file changed, 11 insertions(+), 62 deletions(-) diff --git a/packages/collapse/src/collapse-item.vue b/packages/collapse/src/collapse-item.vue index 9491b4c0f..a5bd5ed66 100644 --- a/packages/collapse/src/collapse-item.vue +++ b/packages/collapse/src/collapse-item.vue @@ -4,32 +4,18 @@ {{title}} -
    -
    - + +
    +
    + +
    -
    +
    From d5f4603f5987a58b534dcef8ee045d738c65c5e1 Mon Sep 17 00:00:00 2001 From: kingwl Date: Thu, 12 Jan 2017 17:34:11 +0800 Subject: [PATCH 57/72] MessageBox: fix multi alert bug --- packages/message-box/src/main.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/message-box/src/main.js b/packages/message-box/src/main.js index 03ca0f94d..a1da6c4ef 100644 --- a/packages/message-box/src/main.js +++ b/packages/message-box/src/main.js @@ -87,6 +87,12 @@ const showNextMsg = () => { if (options.callback === undefined) { instance.callback = defaultCallback; } + + let oldCb = instance.callback; + instance.callback = action => { + oldCb(action); + showNextMsg(); + }; ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape'].forEach(prop => { if (instance[prop] === undefined) { instance[prop] = true; From 35f102fa2cbd071ca01bba357170a833e76d118c Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Wed, 4 Jan 2017 21:28:13 +0800 Subject: [PATCH 58/72] MessageBox: add beforeClose --- examples/docs/en-US/message-box.md | 35 +++++++++++++++++++++++++--- examples/docs/zh-CN/message-box.md | 35 +++++++++++++++++++++++++--- packages/message-box/src/main.vue | 32 +++++++++++++++++++++---- test/unit/specs/message-box.spec.js | 36 +++++++++++++++++++++-------- 4 files changed, 118 insertions(+), 20 deletions(-) diff --git a/examples/docs/en-US/message-box.md b/examples/docs/en-US/message-box.md index 8f5f434aa..25698c7bf 100644 --- a/examples/docs/en-US/message-box.md +++ b/examples/docs/en-US/message-box.md @@ -64,7 +64,21 @@ message: 'This is a message', showCancelButton: true, confirmButtonText: 'OK', - cancelButtonText: 'Cancel' + cancelButtonText: 'Cancel', + beforeClose: (action, instance) => { + if (action === 'confirm') { + instance.confirmButtonLoading = true; + instance.confirmButtonText = 'Loading...'; + setTimeout(() => { + instance.close(); + setTimeout(() => { + instance.confirmButtonLoading = false; + }, 300); + }, 3000); + } else { + instance.close(); + } + } }).then(action => { setTimeout(() => { this.$message({ @@ -194,7 +208,7 @@ Prompt is used when user input is required. Can be customized to show various content. -:::demo The three methods mentioned above are repackagings of the `$msgbox` method. This example calls `$msgbox` method directly using the `showCancelButton` attribute, which is used to indicate if a cancel button is displayed. Besides we can use `cancelButtonClass` to add a custom style and `cancelButtonText` to customize the button text. The confirm button also has these fields. A complete list of fields can be found at the end of this documentation. +:::demo The three methods mentioned above are repackagings of the `$msgbox` method. This example calls `$msgbox` method directly using the `showCancelButton` attribute, which is used to indicate if a cancel button is displayed. Besides we can use `cancelButtonClass` to add a custom style and `cancelButtonText` to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the `beforeClose` attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has two parameters: `action` and `instance`. Using it enables you to manipulate the instance before it closes, e.g. activating `loading` for confirm button; you can invoke the `close` method registered on the instance to close the MessageBox instance. ```html