From 96f71eda55df85d14d097831dbe1de5c6593ec46 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Fri, 25 Nov 2016 13:13:41 +0800 Subject: [PATCH 01/23] Radio/Checkbox: fix radio-radiogroup checkbox-checkboxgroup nested bug fixed #1152 --- packages/checkbox/src/checkbox-group.vue | 5 ++ packages/checkbox/src/checkbox.vue | 98 ++++++++++++------------ packages/radio/src/radio-group.vue | 6 +- packages/radio/src/radio.vue | 44 +++++++---- src/mixins/emitter.js | 2 +- test/unit/specs/checkbox.spec.js | 27 +++++++ test/unit/specs/radio.spec.js | 18 +++-- 7 files changed, 125 insertions(+), 75 deletions(-) diff --git a/packages/checkbox/src/checkbox-group.vue b/packages/checkbox/src/checkbox-group.vue index 8a891fac4..c6246a9d0 100644 --- a/packages/checkbox/src/checkbox-group.vue +++ b/packages/checkbox/src/checkbox-group.vue @@ -16,7 +16,12 @@ value(value) { this.$emit('change', value); this.dispatch('form-item', 'el.form.change', [value]); + this.broadcast('ElCheckbox', 'initData', [value]); } + }, + + mounted() { + this.broadcast('ElCheckbox', 'initData', [this.value]); } }; diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue index 4d67e7f78..e473cf9c1 100644 --- a/packages/checkbox/src/checkbox.vue +++ b/packages/checkbox/src/checkbox.vue @@ -17,11 +17,9 @@ :disabled="disabled" :true-value="trueLabel" :false-value="falseLabel" - v-model="_value" + v-model="model" @focus="focus = true" - @blur="focus = false" - @change="handleChange" - ref="checkbox"> + @blur="focus = false"> + @blur="focus = false"> @@ -48,6 +45,34 @@ mixins: [Emitter], + componentName: 'ElCheckbox', + + computed: { + model: { + get() { + return this.isGroup ? this.store : this.value; + }, + + set(val) { + if (this.isGroup) { + this.dispatch('ElCheckboxGroup', 'input', [val]); + } else { + this.$emit('input', val); + } + } + }, + + isChecked() { + if ({}.toString.call(this.model) === '[object Boolean]') { + return this.model; + } else if (Array.isArray(this.model)) { + return this.model.indexOf(this.label) > -1; + } else if (this.model !== null && this.model !== undefined) { + return this.model === this.trueLabel; + } + } + }, + props: { value: {}, label: String, @@ -59,59 +84,30 @@ falseLabel: [String, Number] }, - computed: { - _value: { - get() { - return !this.wrapInGroup ? this.value : this.$parent.value; - }, - set(newValue) { - if (!this.wrapInGroup) { - this.$emit('input', newValue); - } else { - this.$parent.$emit('input', newValue); - } - } - }, - isChecked() { - var type = Object.prototype.toString.call(this._value); - - if (type === '[object Boolean]') { - return this._value; - } else if (type === '[object Array]') { - return this._value.indexOf(this.label) > -1; - } else if (type === '[object String]' || type === '[object Number]') { - return this._value === this.trueLabel; - } - } - }, - data() { return { - focus: false, - wrapInGroup: this.$parent.$options.componentName === 'ElCheckboxGroup' + store: [], + isGroup: false }; }, - watch: { - checked: { - immediate: true, - handler(value) { - if (value) { - let type = Object.prototype.toString.call(this._value); - if (type !== '[object Array]') { - this._value = this.trueLabel || true; - } else { - this._value.push(this.label); - } - } + methods: { + addToStore() { + if (Array.isArray(this.model)) { + this.model.indexOf(this.label) === -1 && this.model.push(this.label); + } else { + this.model = this.trueLabel || true; } } }, - methods: { - handleChange(ev) { - this.$emit('change', ev); - } + created() { + this.checked && this.addToStore(); + this.$on('initData', data => { + this.store = data; + this.isGroup = true; + this.checked && this.addToStore(); + }); } }; diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue index 78a56fde2..be357cf31 100644 --- a/packages/radio/src/radio-group.vue +++ b/packages/radio/src/radio-group.vue @@ -4,7 +4,7 @@ export default { name: 'ElRadioGroup', - componentName: 'radio-group', + componentName: 'ElRadioGroup', mixins: [Emitter], @@ -15,8 +15,12 @@ watch: { value(value) { this.$emit('change', value); + this.broadcast('ElRadio', 'initData', value); this.dispatch('form-item', 'el.form.change', [this.value]); } + }, + mounted() { + this.broadcast('ElRadio', 'initData', this.value); } }; diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue index db5d74eab..75b962295 100644 --- a/packages/radio/src/radio.vue +++ b/packages/radio/src/radio.vue @@ -4,14 +4,14 @@ diff --git a/src/mixins/emitter.js b/src/mixins/emitter.js index 117243e4d..c12d167c4 100644 --- a/src/mixins/emitter.js +++ b/src/mixins/emitter.js @@ -5,7 +5,7 @@ function broadcast(componentName, eventName, params) { if (name === componentName) { child.$emit.apply(child, [eventName].concat(params)); } else { - broadcast.apply(child, [componentName, eventName].concat(params)); + broadcast.apply(child, [componentName, eventName].concat([params])); } }); } diff --git a/test/unit/specs/checkbox.spec.js b/test/unit/specs/checkbox.spec.js index 13783754c..d79ed0549 100644 --- a/test/unit/specs/checkbox.spec.js +++ b/test/unit/specs/checkbox.spec.js @@ -67,6 +67,33 @@ describe('Checkbox', () => { done(); }); }); + + it('nested group', done => { + vm = createVue({ + template: ` + + + + + + + + + `, + data() { + return { + checkList: [] + }; + } + }, true); + expect(vm.checkList.length === 0).to.be.true; + vm.$refs.a.$el.click(); + vm.$nextTick(_ => { + expect(vm.checkList.indexOf('a') !== -1).to.be.true; + done(); + }); + }); + it('true false label', done => { vm = createVue({ template: ` diff --git a/test/unit/specs/radio.spec.js b/test/unit/specs/radio.spec.js index a25a7b988..3d442e055 100644 --- a/test/unit/specs/radio.spec.js +++ b/test/unit/specs/radio.spec.js @@ -65,14 +65,16 @@ describe('Radio', () => { }; } }, true); - expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.ok; - let radioElm = vm.$refs.radio2.$el; - radioElm.click(); - vm.$nextTick(_ => { - expect(radioElm.querySelector('.is-checked')).to.be.ok; - expect(vm.radio === 6).to.be.true; - done(); - }); + setTimeout(_ => { + expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.ok; + let radioElm = vm.$refs.radio2.$el; + radioElm.click(); + vm.$nextTick(_ => { + expect(radioElm.querySelector('.is-checked')).to.be.ok; + expect(vm.radio === 6).to.be.true; + done(); + }); + }, 50); }); it('radio button', done => { vm = createVue({ From cf38b8c32e082386cb8c7e0ad37422d38f48a95e Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Fri, 25 Nov 2016 17:17:05 +0800 Subject: [PATCH 02/23] Tree: import checkbox --- packages/checkbox/src/checkbox.vue | 2 ++ packages/tree/src/tree-node.vue | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue index e473cf9c1..00217a0e8 100644 --- a/packages/checkbox/src/checkbox.vue +++ b/packages/checkbox/src/checkbox.vue @@ -18,6 +18,7 @@ :true-value="trueLabel" :false-value="falseLabel" v-model="model" + @change="$emit('change', $event)" @focus="focus = true" @blur="focus = false"> diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue index a135bb2e0..38509592e 100644 --- a/packages/tree/src/tree-node.vue +++ b/packages/tree/src/tree-node.vue @@ -40,6 +40,7 @@ diff --git a/packages/form/src/form.vue b/packages/form/src/form.vue index 020e4281d..7fecd6461 100644 --- a/packages/form/src/form.vue +++ b/packages/form/src/form.vue @@ -10,7 +10,7 @@ export default { name: 'ElForm', - componentName: 'form', + componentName: 'ElForm', props: { model: Object, diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue index b819dc5fd..f6a828863 100644 --- a/packages/input/src/input.vue +++ b/packages/input/src/input.vue @@ -68,6 +68,8 @@ export default { name: 'ElInput', + componentName: 'ElInput', + mixins: [emitter], props: { @@ -105,7 +107,7 @@ methods: { handleBlur(event) { this.$emit('blur', event); - this.dispatch('form-item', 'el.form.blur', [this.currentValue]); + this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]); }, inputSelect() { this.$refs.input.select(); @@ -162,7 +164,7 @@ }); this.$emit('input', val); this.$emit('change', val); - this.dispatch('form-item', 'el.form.change', [val]); + this.dispatch('ElFormItem', 'el.form.change', [val]); } } }; diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue index be357cf31..596d8370a 100644 --- a/packages/radio/src/radio-group.vue +++ b/packages/radio/src/radio-group.vue @@ -16,7 +16,7 @@ value(value) { this.$emit('change', value); this.broadcast('ElRadio', 'initData', value); - this.dispatch('form-item', 'el.form.change', [this.value]); + this.dispatch('ElFormItem', 'el.form.change', [this.value]); } }, mounted() { diff --git a/packages/select/src/option-group.vue b/packages/select/src/option-group.vue index 6073ed84a..9308625d3 100644 --- a/packages/select/src/option-group.vue +++ b/packages/select/src/option-group.vue @@ -27,13 +27,13 @@ watch: { disabled(val) { - this.broadcast('option', 'handleGroupDisabled', val); + this.broadcast('ElOption', 'handleGroupDisabled', val); } }, mounted() { if (this.disabled) { - this.broadcast('option', 'handleGroupDisabled', this.disabled); + this.broadcast('ElOption', 'handleGroupDisabled', this.disabled); } } }; diff --git a/packages/select/src/option.vue b/packages/select/src/option.vue index 7fa4225f6..6d1a748e4 100644 --- a/packages/select/src/option.vue +++ b/packages/select/src/option.vue @@ -19,7 +19,7 @@ name: 'el-option', - componentName: 'option', + componentName: 'ElOption', props: { value: { @@ -78,7 +78,7 @@ watch: { currentSelected(val) { if (val === true) { - this.dispatch('select', 'addOptionToValue', this); + this.dispatch('ElSelect', 'addOptionToValue', this); } } }, @@ -96,7 +96,7 @@ selectOptionClick() { if (this.disabled !== true && this.groupDisabled !== true) { - this.dispatch('select', 'handleOptionClick', this); + this.dispatch('ElSelect', 'handleOptionClick', this); } }, @@ -123,7 +123,7 @@ this.index = this.parent.options.indexOf(this); if (this.currentSelected === true) { - this.dispatch('select', 'addOptionToValue', [this, true]); + this.dispatch('ElSelect', 'addOptionToValue', [this, true]); } this.$on('queryChange', this.queryChange); @@ -132,7 +132,7 @@ }, beforeDestroy() { - this.dispatch('select', 'onOptionDestroy', this); + this.dispatch('ElSelect', 'onOptionDestroy', this); } }; diff --git a/packages/select/src/select-dropdown.vue b/packages/select/src/select-dropdown.vue index 8660bcff2..90c470665 100644 --- a/packages/select/src/select-dropdown.vue +++ b/packages/select/src/select-dropdown.vue @@ -13,7 +13,7 @@ export default { name: 'el-select-dropdown', - componentName: 'select-dropdown', + componentName: 'ElSelectDropdown', mixins: [Popper], diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue index adb901a55..9879a03d3 100644 --- a/packages/select/src/select.vue +++ b/packages/select/src/select.vue @@ -82,7 +82,7 @@ name: 'ElSelect', - componentName: 'select', + componentName: 'ElSelect', computed: { iconClass() { @@ -242,7 +242,7 @@ this.$emit('input', result); this.$emit('change', result); - this.dispatch('form-item', 'el.form.change', val); + this.dispatch('ElFormItem', 'el.form.change', val); if (this.filterable) { this.query = ''; this.hoverIndex = -1; @@ -262,7 +262,7 @@ query(val) { this.$nextTick(() => { - this.broadcast('select-dropdown', 'updatePopper'); + this.broadcast('ElSelectDropdown', 'updatePopper'); }); if (this.multiple && this.filterable) { this.resetInputHeight(); @@ -271,12 +271,12 @@ this.hoverIndex = -1; this.remoteMethod(val); this.voidRemoteQuery = val === ''; - this.broadcast('option', 'resetIndex'); + this.broadcast('ElOption', 'resetIndex'); } else if (typeof this.filterMethod === 'function') { this.filterMethod(val); } else { this.filteredOptionsCount = this.optionsCount; - this.broadcast('option', 'queryChange', val); + this.broadcast('ElOption', 'queryChange', val); } }, @@ -286,7 +286,7 @@ if (this.$el.querySelector('.el-input__icon')) { removeClass(this.$el.querySelector('.el-input__icon'), 'is-reverse'); } - this.broadcast('select-dropdown', 'destroyPopper'); + this.broadcast('ElSelectDropdown', 'destroyPopper'); if (this.$refs.input) { this.$refs.input.blur(); } @@ -304,13 +304,13 @@ if (icon && !hasClass(icon, 'el-icon-circle-close')) { addClass(this.$el.querySelector('.el-input__icon'), 'is-reverse'); } - this.broadcast('select-dropdown', 'updatePopper'); + this.broadcast('ElSelectDropdown', 'updatePopper'); if (this.filterable) { this.query = this.selectedLabel; if (this.multiple) { this.$refs.input.focus(); } else { - this.broadcast('input', 'inputSelect'); + this.broadcast('ElInput', 'inputSelect'); } } if (!this.dropdownUl) { @@ -398,7 +398,7 @@ let inputChildNodes = this.$refs.reference.$el.childNodes; let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0]; input.style.height = Math.max(this.$refs.tags.clientHeight + 6, this.size === 'small' ? 28 : 36) + 'px'; - this.broadcast('select-dropdown', 'updatePopper'); + this.broadcast('ElSelectDropdown', 'updatePopper'); }); }, @@ -525,7 +525,7 @@ if (index > -1) { this.options.splice(index, 1); } - this.broadcast('option', 'resetIndex'); + this.broadcast('ElOption', 'resetIndex'); }, resetInputWidth() { From 64f1caea387beb8827305965a7753161697ed1d1 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Sat, 26 Nov 2016 14:34:25 +0800 Subject: [PATCH 13/23] support dynamic pageSizes --- packages/pagination/src/pagination.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/pagination/src/pagination.js b/packages/pagination/src/pagination.js index cb8310e5f..34c86968d 100644 --- a/packages/pagination/src/pagination.js +++ b/packages/pagination/src/pagination.js @@ -54,7 +54,7 @@ export default { jumper: , pager: , next: , - sizes: , + sizes: , slot: , total: }; @@ -119,11 +119,20 @@ export default { Sizes: { mixins: [Locale], - created() { - if (Array.isArray(this.$parent.pageSizes)) { - this.$parent.internalPageSize = this.$parent.pageSizes.indexOf(this.$parent.pageSize) > -1 - ? this.$parent.pageSize - : this.$parent.pageSizes[0]; + props: { + pageSizes: Array + }, + + watch: { + pageSizes: { + immediate: true, + handler(value) { + if (Array.isArray(value)) { + this.$parent.internalPageSize = value.indexOf(this.$parent.pageSize) > -1 + ? this.$parent.pageSize + : this.pageSizes[0]; + } + } } }, @@ -136,7 +145,7 @@ export default { on-change={ this.handleChange } width={ 110 }> { - this.$parent.pageSizes.map(item => + this.pageSizes.map(item => From 75d248e1079f3134cf21112ed383a11add108365 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Sat, 26 Nov 2016 17:54:27 +0800 Subject: [PATCH 14/23] support radio button custom style --- examples/docs/en-US/radio.md | 2 + examples/docs/zh-CN/radio.md | 2 + packages/radio/src/radio-button.vue | 9 +++- packages/radio/src/radio-group.vue | 10 +++- packages/theme-default/src/radio.css | 9 ---- test/unit/specs/radio.spec.js | 68 +++++++++++++++++++--------- 6 files changed, 67 insertions(+), 33 deletions(-) diff --git a/examples/docs/en-US/radio.md b/examples/docs/en-US/radio.md index 9a7be7c33..3702ca1ec 100644 --- a/examples/docs/en-US/radio.md +++ b/examples/docs/en-US/radio.md @@ -137,5 +137,7 @@ change | triggers when the bound value changes | the label value of the chosen r ---- | ---- | ---- | ---- | ---- label | the value of radio | string/number | — | — disabled | whether radio is disabled | boolean | — | false +fill | border and background color when button is active | string | — | #20a0ff | +text-color | font color when button is active | string | — | #ffffff | diff --git a/examples/docs/zh-CN/radio.md b/examples/docs/zh-CN/radio.md index 203a27c43..862a0dad4 100644 --- a/examples/docs/zh-CN/radio.md +++ b/examples/docs/zh-CN/radio.md @@ -138,3 +138,5 @@ |---------- |-------- |---------- |------------- |-------- | | label | Radio 的 value | string,number | — | — | | disabled | 是否禁用 | boolean | — | false | +| fill | 按钮激活时的填充色和边框色 | string | — | #20a0ff | +| text-color | 按钮激活时的文本颜色 | string | — | #ffffff | diff --git a/packages/radio/src/radio-button.vue b/packages/radio/src/radio-button.vue index 7863eba67..6d9b7ba12 100644 --- a/packages/radio/src/radio-button.vue +++ b/packages/radio/src/radio-button.vue @@ -23,6 +23,13 @@ set(newValue) { this.$parent.$emit('input', newValue); } + }, + activeStyle() { + return { + backgroundColor: this.$parent.fill, + borderColor: this.$parent.fill, + color: this.$parent.textColor + }; } } }; @@ -43,7 +50,7 @@ v-model="value" :name="name" :disabled="disabled"> - + diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue index 596d8370a..a4df33bfd 100644 --- a/packages/radio/src/radio-group.vue +++ b/packages/radio/src/radio-group.vue @@ -10,7 +10,15 @@ props: { value: [String, Number], - size: String + size: String, + fill: { + type: String, + default: '#20a0ff' + }, + textColor: { + type: String, + default: '#fff' + } }, watch: { value(value) { diff --git a/packages/theme-default/src/radio.css b/packages/theme-default/src/radio.css index 0756f2f79..b48c70bb4 100644 --- a/packages/theme-default/src/radio.css +++ b/packages/theme-default/src/radio.css @@ -160,15 +160,6 @@ z-index: -1; left: -999px; - &:checked { - & + .el-radio-button__inner { - z-index: 1; - background-color: var(--color-primary); - border-color: @background-color; - color: #fff; - } - } - &:disabled { & + .el-radio-button__inner { color: var(--button-disabled-color); diff --git a/test/unit/specs/radio.spec.js b/test/unit/specs/radio.spec.js index 3d442e055..e6c1207cf 100644 --- a/test/unit/specs/radio.spec.js +++ b/test/unit/specs/radio.spec.js @@ -76,28 +76,52 @@ describe('Radio', () => { }); }, 50); }); - it('radio button', done => { - vm = createVue({ - template: ` - - 备选项 - 备选项 - 备选项 - - `, - data() { - return { - radio: 3 - }; - } - }, true); - expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true; - let radio = vm.$refs.radio2; - radio.$el.click(); - vm.$nextTick(_ => { - expect(radio.$el.classList.contains('is-active')).to.be.true; - expect(vm.radio === 6).to.be.true; - done(); + describe('Radio', () => { + it('create', done => { + vm = createVue({ + template: ` + + 备选项 + 备选项 + 备选项 + + `, + data() { + return { + radio: 3 + }; + } + }, true); + expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true; + let radio = vm.$refs.radio2; + radio.$el.click(); + vm.$nextTick(_ => { + expect(radio.$el.classList.contains('is-active')).to.be.true; + expect(vm.radio === 6).to.be.true; + done(); + }); + }); + it('custom color', done => { + vm = createVue({ + template: ` + + 备选项 + 备选项 + 备选项 + + `, + data() { + return { + radio: 3 + }; + } + }, true); + vm.$nextTick(_ => { + expect(vm.$refs.radio1.activeStyle.backgroundColor).to.equal('#000'); + expect(vm.$refs.radio1.activeStyle.borderColor).to.equal('#000'); + expect(vm.$refs.radio1.activeStyle.color).to.equal('#ff0'); + done(); + }); }); }); }); From bfab5cd9edf01f5b4ec4b9cfdb1397cdd3c072f8 Mon Sep 17 00:00:00 2001 From: Hashem Qolami Date: Sat, 26 Nov 2016 16:28:43 +0330 Subject: [PATCH 15/23] Form: :wrench: fixed validation issue with dynamic rules (fixed #1317) --- packages/form/src/form.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/form/src/form.vue b/packages/form/src/form.vue index 7fecd6461..b00634e44 100644 --- a/packages/form/src/form.vue +++ b/packages/form/src/form.vue @@ -23,6 +23,11 @@ }, inline: Boolean }, + watch: { + rules() { + this.validate(); + } + }, data() { return { fields: [] @@ -54,7 +59,7 @@ if (errors) { valid = false; } - if (index === this.fields.length - 1) { + if (typeof callback === 'function' && index === this.fields.length - 1) { callback(valid); } }); From ce13d974b529c3863b7a4f9fd95c6e6e3e167059 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Sat, 26 Nov 2016 23:19:08 +0800 Subject: [PATCH 16/23] fix datepicker year select mode bug (#1385) --- packages/date-picker/src/basic/year-table.vue | 6 ++---- packages/date-picker/src/panel/date.vue | 4 ++-- packages/date-picker/src/picker.vue | 15 ++++----------- 3 files changed, 8 insertions(+), 17 deletions(-) diff --git a/packages/date-picker/src/basic/year-table.vue b/packages/date-picker/src/basic/year-table.vue index c2075d5c4..0bc1827df 100644 --- a/packages/date-picker/src/basic/year-table.vue +++ b/packages/date-picker/src/basic/year-table.vue @@ -50,9 +50,7 @@ props: { disabledDate: {}, date: {}, - year: { - type: Number - } + year: {} }, computed: { @@ -86,7 +84,7 @@ const target = event.target; if (target.tagName === 'A') { if (hasClass(target.parentNode, 'disabled')) return; - const year = parseInt(target.textContent || target.innerText, 10); + const year = target.textContent || target.innerText; this.$emit('pick', year); } } diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue index d21ea4722..9547bf1fe 100644 --- a/packages/date-picker/src/panel/date.vue +++ b/packages/date-picker/src/panel/date.vue @@ -20,7 +20,7 @@ @click="handleShortcutClick(shortcut)">{{ shortcut.text }}
-
+
Date: Sun, 27 Nov 2016 06:20:00 +0800 Subject: [PATCH 17/23] support the title slot in menu-group (#1382) --- examples/docs/en-US/menu.md | 4 ++-- examples/docs/zh-CN/menu.md | 7 ++++--- packages/menu/src/menu-item-group.vue | 8 +++++--- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/examples/docs/en-US/menu.md b/examples/docs/en-US/menu.md index 8d0ad6072..8694dba26 100644 --- a/examples/docs/en-US/menu.md +++ b/examples/docs/en-US/menu.md @@ -22,7 +22,7 @@ Menu that provides navigation for your website. Top bar NavMenu can be used in a variety of scenarios. -::: demo +::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. ```html Processing Center @@ -62,7 +62,7 @@ Top bar NavMenu can be used in a variety of scenarios. Vertical NavMenu with sub-menus. -::: demo +::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot. ```html diff --git a/examples/docs/zh-CN/menu.md b/examples/docs/zh-CN/menu.md index 9b1988c4b..e9ee70f9c 100644 --- a/examples/docs/zh-CN/menu.md +++ b/examples/docs/zh-CN/menu.md @@ -52,7 +52,7 @@ 适用广泛的基础用法。 -::: demo +::: demo 导航菜单默认为垂直模式，通过 `mode` 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 `submenu` 组件可以生成二级菜单。 ```html 处理中心 @@ -92,7 +92,7 @@ 垂直菜单，可内嵌子菜单。 -::: demo +::: demo 通过 `el-menu-item-group` 组件可以实现菜单进行分组，分组名可以通过 `title` 属性直接设定也可以通过具名 slot 来设定。 ```html @@ -100,7 +100,8 @@ - + + 选项1 选项2 diff --git a/packages/menu/src/menu-item-group.vue b/packages/menu/src/menu-item-group.vue index 7fbcc2f91..200edcae1 100644 --- a/packages/menu/src/menu-item-group.vue +++ b/packages/menu/src/menu-item-group.vue @@ -6,8 +6,7 @@ props: { title: { - type: String, - required: true + type: String } }, data() { @@ -39,7 +38,10 @@