diff --git a/CHANGELOG.md b/CHANGELOG.md index e0f17408d..a89644de0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,15 @@ ## 更新日志 +### 1.0.0-rc.5(待发布) + +*2016-XX-XX* + - 修复 Table 头部不同步的问题 +- 修复 Menu 组件 default-active 绑定动态值无法更新的问题 +- 新增特性 Menu 组件中若选中子菜单项现在会自动展开所有父级菜单 + +#### 非兼容性更新 +- Menu 组件的 `unique-opend` 属性修正为 `unique-opened` ### 1.0.0-rc.4 diff --git a/examples/docs/menu.md b/examples/docs/menu.md index 5dc7bc3a1..cfc99547f 100644 --- a/examples/docs/menu.md +++ b/examples/docs/menu.md @@ -30,12 +30,6 @@ diff --git a/packages/menu/src/menu-mixin.js b/packages/menu/src/menu-mixin.js new file mode 100644 index 000000000..cc9f3bace --- /dev/null +++ b/packages/menu/src/menu-mixin.js @@ -0,0 +1,22 @@ +module.exports = { + computed: { + indexPath() { + var path = [this.index]; + var parent = this.$parent; + while (parent.$options._componentTag !== 'el-menu') { + if (parent.index) { + path.unshift(parent.index); + } + parent = parent.$parent; + } + return path; + }, + rootMenu() { + var parent = this.$parent; + while (parent.$options._componentTag !== 'el-menu') { + parent = parent.$parent; + } + return parent; + } + } +}; diff --git a/packages/menu/src/menu.vue b/packages/menu/src/menu.vue index 07e399c94..d707ff60b 100644 --- a/packages/menu/src/menu.vue +++ b/packages/menu/src/menu.vue @@ -37,33 +37,67 @@ type: String, default: 'light' }, - uniqueOpend: Boolean, + uniqueOpened: Boolean, router: Boolean }, data() { return { activeIndex: this.defaultActive, - openedMenus: this.defaultOpeneds.slice(0) + openedMenus: this.defaultOpeneds.slice(0), + menuItems: {}, + submenus: {} }; }, + watch: { + defaultActive(value) { + this.activeIndex = value; + let indexPath = this.menuItems[value].indexPath; + + this.handleSelect(value, indexPath); + }, + defaultOpeneds(value) { + this.openedMenus = value; + } + }, methods: { - handleMenuExpand(index, indexPath) { - if (this.uniqueOpend) { - this.broadcast('submenu', 'close-menu', indexPath); - this.openedMenus = this.openedMenus.filter((index) => { + openMenu(index, indexPath) { + let openedMenus = this.openedMenus; + if (openedMenus.indexOf(index) !== -1) return; + if (this.uniqueOpened) { + openedMenus = openedMenus.filter(index => { return indexPath.indexOf(index) !== -1; }); } - this.$emit('open', index, indexPath); + openedMenus.push(index); }, - handleMenuCollapse(index, indexPath) { + closeMenu(index, indexPath) { this.openedMenus.splice(this.openedMenus.indexOf(index), 1); - this.$emit('close', index, indexPath); + }, + handleSubmenuClick(index, indexPath) { + let isOpened = this.openedMenus.indexOf(index) !== -1; + + if (isOpened) { + this.closeMenu(index, indexPath); + this.$emit('close', index, indexPath); + } else { + this.openMenu(index, indexPath); + this.$emit('open', index, indexPath); + } }, handleSelect(index, indexPath) { this.activeIndex = index; this.$emit('select', index, indexPath); - this.broadcast('submenu', 'select', [index, indexPath]); + + if (this.mode === 'horizontal') { + this.broadcast('submenu', 'item-select', [index, indexPath]); + this.openedMenus = []; + } else { + // 展开该菜单项的路径上所有子菜单 + indexPath.forEach(index => { + let submenu = this.submenus[index]; + submenu && this.openMenu(index, submenu.indexPath); + }); + } if (this.router) { this.$router.push(index); @@ -71,9 +105,10 @@ } }, mounted() { - this.broadcast('submenu', 'open-menu', this.openedMenus); - this.$on('expand-menu', this.handleMenuExpand); - this.$on('collapse-menu', this.handleMenuCollapse); + let index = this.activeIndex; + let indexPath = this.menuItems[index].indexPath; + + this.handleSelect(index, indexPath); } }; diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue index 3ce9c3141..f64559fd5 100644 --- a/packages/menu/src/submenu.vue +++ b/packages/menu/src/submenu.vue @@ -1,12 +1,33 @@ +