仿照and design给垂直导航菜单添加了inlineIndent属性

vue/element-ui-personal/component/Menu/MenuItem.vue

@@ -13,8 +13,7 @@
             <div slot="content">
                 <slot name="title"/>
             </div>
-            <div
-                style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">
+            <div :style="iconContainerStyle">
                 <slot/>
             </div>
         </el-tooltip>
@@ -27,7 +26,7 @@
 </template>
 
 <script>
-import MenuMixin from 'element-ui/packages/menu/src/menu-mixin'
+import MenuMixin from './mixin'
 import Emitter from 'element-ui/lib/mixins/emitter'
 
 export default {
@@ -46,6 +45,10 @@ export default {
     computed: {
         active() {
             return this.index === this.rootMenu.activeIndex
+        },
+
+        iconContainerStyle() {
+            return `position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 ${this.inlineIndent}px;`
         }
     },
 

vue/element-ui-personal/component/Menu/Submenu.vue

@@ -1,5 +1,5 @@
 <script type="text/jsx">
-import MenuMixin from 'element-ui/packages/menu/src/menu-mixin'
+import MenuMixin from './mixin'
 import Emitter from 'element-ui/lib/mixins/emitter'
 import Popper from 'element-ui/lib/utils/vue-popper'
 

vue/element-ui-personal/component/Menu/mixin.js

@@ -0,0 +1,53 @@
+/**
+ * 在原基础上增加了 inlineIndent 属性，用于确定每级节点的单位缩进距离
+ */
+export default {
+    inject: ['rootMenu'],
+
+    props: {
+        inlineIndent: {type: Number, default: 20}
+    },
+
+    computed: {
+        indexPath() {
+            const path = [this.index]
+            let parent = this.$parent
+            while (parent.$options.componentName !== 'ElMenu') {
+                if (parent.index) {
+                    path.unshift(parent.index)
+                }
+                parent = parent.$parent
+            }
+            return path
+        },
+
+        parentMenu() {
+            let parent = this.$parent
+            while (
+                parent &&
+                ['ElMenu', 'ElSubmenu'].indexOf(parent.$options.componentName) === -1
+                ) {
+                parent = parent.$parent
+            }
+            return parent
+        },
+
+        paddingStyle() {
+            if (this.rootMenu.mode !== 'vertical') return {}
+
+            let padding = this.inlineIndent
+
+            if (!this.rootMenu.collapse) {
+                let parent = this.$parent
+                while (parent && parent.$options.componentName !== 'ElMenu') {
+                    if (parent.$options.componentName === 'ElSubmenu') {
+                        padding += this.inlineIndent
+                    }
+                    parent = parent.$parent
+                }
+            }
+
+            return {'padding-left': `${padding}px`}
+        }
+    }
+}

vue/src/asset/style/element-ui.scss

@@ -141,7 +141,7 @@
 
         .el-menu-item,
         .el-submenu__title {
-            padding: 0 20px;
+            padding: 0 $menu-padding;
         }
     }
 

vue/src/asset/style/variables.scss

@@ -48,9 +48,11 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 }
 
 //菜单中icon的大小
-$menu-icon-size: 16px;
+$menu-icon-size: 14px;
 //菜单中icon和文字的距离
 $menu-icon-text-gap: 10px;
+//菜单的padding
+$menu-padding: $menu-icon-size + $menu-icon-text-gap;
 //暗色菜单的背景色
 $menu-dark-background: #304156;
 //暗色子级菜单的背景色
@@ -69,7 +71,7 @@ $menu-text-dark-hover-color: rgba(255, 255, 255, 1);
 //侧边栏宽度
 $aside-width: 208px;
 //侧边栏折叠时的宽度
-$aside-collapse-width: $menu-icon-size + 20px * 2;
+$aside-collapse-width: $menu-icon-size + $menu-padding * 2;
 
 //头部导航栏高度
 $nav-height: 48px;
@@ -98,4 +100,5 @@ $dialog-top: 100px;
     warning: $--color-warning;
     pageViewMargin: $page-view-margin;
     dialogTop: $dialog-top;
+    menuPadding:$menu-padding;
 }

vue/src/component/menu/NavMenu/index.vue

@@ -1,4 +1,5 @@
 <script type="text/jsx">
+import cssVariables from '@/asset/style/variables.scss'
 import Item from './item'
 
 export default {
@@ -40,6 +41,7 @@ export default {
         } = context
 
         const themeClassName = `el-menu--${theme}`
+        const inlineIndent = parseFloat(cssVariables.menuPadding)
 
         let items = children || menus.map(m => (
             <Item
@@ -47,6 +49,7 @@ export default {
                 popper-class={themeClassName}
                 show-parent={showParentOnCollapse}
                 collapse={collapse}
+                inline-indent={inlineIndent}
                 show-icon-max-depth={showIconMaxDepth}
             />
         ))

vue/src/component/menu/NavMenu/item.vue

@@ -30,17 +30,17 @@ function getOnlyChild(menu) {
     return null
 }
 
-function renderSingleMenu(h, {index, icon, title}) {
+function renderSingleMenu(h, {index, inlineIndent, icon, title}) {
     return (
-        <el-menu-item key={index} index={index}>
+        <el-menu-item key={index} index={index} inline-indent={inlineIndent}>
             <MenuItemContent icon={icon} title={title}/>
         </el-menu-item>
     )
 }
 
-function renderSubMenu(h, {index, icon, title, popperClass, children}) {
+function renderSubMenu(h, {index, inlineIndent, icon, title, popperClass, children}) {
     return (
-        <el-submenu key={index} index={index} popper-class={popperClass}>
+        <el-submenu key={index} index={index} inline-indent={inlineIndent} popper-class={popperClass}>
             <MenuItemContent slot="title" icon={icon} title={title}/>
             {children}
         </el-submenu>
@@ -57,7 +57,7 @@ function renderChildrenWithParentMenu(h, {icon, title, children}) {
 }
 
 function renderMenu(h, props) {
-    const {menu, popperClass, showParent, collapse, showIconMaxDepth, depth = 1} = props
+    const {menu, inlineIndent, popperClass, showParent, collapse, showIconMaxDepth, depth = 1} = props
 
     const onlyOneChild = getOnlyChild(menu)
 
@@ -67,6 +67,7 @@ function renderMenu(h, props) {
         const {fullPath, meta: {icon, title}} = onlyOneChild
         return renderSingleMenu(h, {
             index: fullPath,
+            inlineIndent,
             icon: getIcon({icon, showIconMaxDepth, depth}),
             title
         })
@@ -86,6 +87,7 @@ function renderMenu(h, props) {
 
     return renderSubMenu(h, {
         index: menu.fullPath,
+        inlineIndent,
         icon: getIcon({icon, showIconMaxDepth, depth}),
         title,
         popperClass,
@@ -106,6 +108,9 @@ export default {
         //折叠时的展开菜单是否显示父级
         showParent: Boolean,
 
+        //向左缩进的单位距离
+        inlineIndent: Number,
+
         //是否为折叠状态
         collapse: Boolean,
 

vue/src/component/menu/NavMenu/style.scss

@@ -45,7 +45,7 @@
             //菜单文字的最大宽度
             > .menu-item-content {
                 //侧边栏宽度、菜单左右padding、左侧图标宽度、距离左右的距离、右侧图标宽度
-                max-width: $aside-width - 20px * 2 - $menu-icon-size - $menu-icon-text-gap * 2 - 12px;
+                max-width: $aside-width - $menu-padding * 2 - $menu-icon-size - $menu-icon-text-gap * 2 - 12px;
             }
         }
 

vue/src/layout/component/Aside/style.scss

@@ -59,7 +59,7 @@
 .sub-sidebar-title {
     height: $nav-height;
     line-height: $nav-height;
-    padding-left: 20px;
+    padding-left: $menu-padding;
     font-size: 16px;
 }
 

vue/src/layout/component/Logo.vue

@@ -34,7 +34,7 @@ $logoSize: 30px;
     width: 100%;
     height: $nav-height;
     line-height: $nav-height;
-    padding-left: 20px;
+    padding-left: $menu-padding;
 
     .logo-link {
         display: block;