diff --git a/examples/routers/menu.vue b/examples/routers/menu.vue index ccbcf85..bfb686f 100644 --- a/examples/routers/menu.vue +++ b/examples/routers/menu.vue @@ -30,6 +30,16 @@ </template> <Menu-item name="3-3-3-1">四级1</Menu-item> <Menu-item name="3-3-3-2">四级2</Menu-item> + <MenuGroup title="Menu-Group"> + <MenuItem name="3-3-3-3-1"> + <Icon type="document-text"></Icon> + Group-item1 + </MenuItem> + <MenuItem name="3-3-3-3-2"> + <Icon type="chatbubbles"></Icon> + Group-item2 + </MenuItem> + </MenuGroup> </Submenu> </Submenu> </Submenu> diff --git a/src/components/menu/menu-group.vue b/src/components/menu/menu-group.vue index 83c44c8..49cd10e 100644 --- a/src/components/menu/menu-group.vue +++ b/src/components/menu/menu-group.vue @@ -1,10 +1,11 @@ <template> <li :class="[prefixCls + '-item-group']"> - <div :class="[prefixCls + '-item-group-title']">{{ title }}</div> + <div :class="[prefixCls + '-item-group-title']" :style="groupStyle">{{ title }}</div> <ul><slot></slot></ul> </li> </template> <script> + import { findComponentUpward, findComponentsUpward } from '../../utils/assist'; const prefixCls = 'ivu-menu'; export default { @@ -19,6 +20,19 @@ return { prefixCls: prefixCls }; + }, + computed: { + parentSubmenuNum () { + return findComponentsUpward(this, 'Submenu').length; + }, + hasParentSubmenu () { + return findComponentUpward(this, 'Submenu'); + }, + groupStyle () { + return this.hasParentSubmenu ? { + paddingLeft: 43 + (this.parentSubmenuNum - 1) * 28 + 'px' + } : {}; + } } }; </script> -- libgit2 0.21.4