add style for menu-group

zhigang.li
1 parent 5edd66a8
Showing 2 changed files with 25 additions and 1 deletions Show diff stats
examples/routers/menu.vue
src/components/menu/menu-group.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>
 <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>