From 0e541795a90ebff825bf1add3a147ef46809076b Mon Sep 17 00:00:00 2001
From: FairyEver <1711467488@qq.com>
Date: Mon, 8 Jun 2020 14:55:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20menu-header=20=E5=92=8C=20?=
=?UTF-8?q?menu-side=20=E7=BB=84=E4=BB=B6=E4=BD=BF=E7=94=A8=20jsx=20?=
=?UTF-8?q?=E9=87=8D=E5=86=99=20render?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../header-aside/components/libs/util.menu.js | 68 +++++++++-------
.../components/menu-header/index.js | 80 ++++++++++---------
.../components/menu-side/index.js | 34 ++++----
3 files changed, 105 insertions(+), 77 deletions(-)
diff --git a/src/layout/header-aside/components/libs/util.menu.js b/src/layout/header-aside/components/libs/util.menu.js
index a13f3a33..c403492e 100644
--- a/src/layout/header-aside/components/libs/util.menu.js
+++ b/src/layout/header-aside/components/libs/util.menu.js
@@ -1,32 +1,46 @@
-// 创建 el-menu-item
+/**
+ * @description 创建菜单
+ * @param {Function} h createElement
+ * @param {Object} menu 菜单项
+ */
export function elMenuItem (h, menu) {
- return h('el-menu-item', { key: menu.path, props: { index: menu.path } }, [
- ...menu.icon ? [
- h('i', { attrs: { class: `fa fa-${menu.icon}` } })
- ] : [],
- ...menu.icon === undefined & !menu.iconSvg ? [
- h('i', { attrs: { class: 'fa fa-file-o' } })
- ] : [],
- ...menu.iconSvg ? [
- h('d2-icon-svg', { props: { name: menu.iconSvg } })
- ] : [],
- h('span', { slot: 'title' }, menu.title || '未命名菜单')
- ])
+ let icon = null
+ if (menu.icon) icon =
+ else if (menu.iconSvg) icon =
+ else icon =
+ return
+ { icon }
+ { menu.title || '未命名菜单' }
+
}
-// 创建 el-submenu
+/**
+ * @description 创建子菜单
+ * @param {Function} h createElement
+ * @param {Object} menu 菜单项
+ */
export function elSubmenu (h, menu) {
- return h('el-submenu', { key: menu.path, props: { index: menu.path } }, [
- ...menu.icon ? [
- h('i', { slot: 'title', attrs: { class: `fa fa-${menu.icon}` } })
- ] : [],
- ...menu.icon === undefined & !menu.iconSvg ? [
- h('i', { slot: 'title', attrs: { class: 'fa fa-folder-o' } })
- ] : [],
- ...menu.iconSvg ? [
- h('d2-icon-svg', { slot: 'title', props: { name: menu.iconSvg } })
- ] : [],
- h('span', { slot: 'title' }, menu.title || '未命名菜单'),
- ...menu.children.map((child, childIndex) => (child.children === undefined ? elMenuItem : elSubmenu).call(this, h, child))
- ])
+ let icon = null
+ if (menu.icon) icon =
+ else if (menu.iconSvg) icon =
+ else icon =
+ return
+ { icon }
+ { menu.title || '未命名菜单' }
+ { menu.children.map(child => createMenu.call(this, h, child)) }
+
+}
+
+/**
+ * @description 在组件中调用此方法渲染菜单项目
+ * @param {Function} h createElement
+ * @param {Object} menu 菜单项
+ */
+export function createMenu (h, menu) {
+ if (menu.children === undefined) return elMenuItem.call(this, h, menu)
+ return elSubmenu.call(this, h, menu)
}
diff --git a/src/layout/header-aside/components/menu-header/index.js b/src/layout/header-aside/components/menu-header/index.js
index 55d7fd90..bd34c80a 100644
--- a/src/layout/header-aside/components/menu-header/index.js
+++ b/src/layout/header-aside/components/menu-header/index.js
@@ -1,7 +1,7 @@
import { throttle } from 'lodash'
import { mapState } from 'vuex'
import menuMixin from '../mixin/menu'
-import { elMenuItem, elSubmenu } from '../libs/util.menu'
+import { createMenu } from '../libs/util.menu'
export default {
name: 'd2-layout-header-aside-menu-header',
@@ -9,41 +9,49 @@ export default {
menuMixin
],
render (h) {
- return h('div', {
- attrs: { flex: 'cross:center' },
- class: { 'd2-theme-header-menu': true, 'is-scrollable': this.isScroll },
- ref: 'page'
- }, [
- h('div', {
- attrs: { class: 'd2-theme-header-menu__content', flex: '', 'flex-box': '1' },
- ref: 'content'
- }, [
- h('div', {
- attrs: { class: 'd2-theme-header-menu__scroll', 'flex-box': '0' },
- style: { transform: `translateX(${this.currentTranslateX}px)` },
- ref: 'scroll'
- }, [
- h('el-menu', {
- props: { mode: 'horizontal', defaultActive: this.active },
- on: { select: this.handleMenuSelect }
- }, this.header.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, h, menu)))
- ])
- ]),
- ...this.isScroll ? [
- h('div', {
- attrs: { class: 'd2-theme-header-menu__prev', flex: 'main:center cross:center', 'flex-box': '0' },
- on: { click: () => this.scroll('left') }
- }, [
- h('i', { attrs: { class: 'el-icon-arrow-left' } })
- ]),
- h('div', {
- attrs: { class: 'd2-theme-header-menu__next', flex: 'main:center cross:center', 'flex-box': '0' },
- on: { click: () => this.scroll('right') }
- }, [
- h('i', { attrs: { class: 'el-icon-arrow-right' } })
- ])
- ] : []
- ])
+ return
+
+ {
+ this.isScroll
+ ? [
+ ,
+
+ ]
+ : []
+ }
+
},
computed: {
...mapState('d2admin/menu', [
diff --git a/src/layout/header-aside/components/menu-side/index.js b/src/layout/header-aside/components/menu-side/index.js
index f1bf980c..8ce3cbc2 100644
--- a/src/layout/header-aside/components/menu-side/index.js
+++ b/src/layout/header-aside/components/menu-side/index.js
@@ -1,6 +1,6 @@
import { mapState } from 'vuex'
import menuMixin from '../mixin/menu'
-import { elMenuItem, elSubmenu } from '../libs/util.menu'
+import { createMenu } from '../libs/util.menu'
import BScroll from 'better-scroll'
export default {
@@ -9,19 +9,25 @@ export default {
menuMixin
],
render (h) {
- return h('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [
- h('el-menu', {
- props: { collapse: this.asideCollapse, collapseTransition: this.asideTransition, uniqueOpened: true, defaultActive: this.$route.fullPath },
- ref: 'menu',
- on: { select: this.handleMenuSelect }
- }, this.aside.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, h, menu))),
- ...this.aside.length === 0 && !this.asideCollapse ? [
- h('div', { attrs: { class: 'd2-layout-header-aside-menu-empty', flex: 'dir:top main:center cross:center' } }, [
- h('d2-icon', { props: { name: 'inbox' } }),
- h('span', {}, '没有侧栏菜单')
- ])
- ] : []
- ])
+ return
},
data () {
return {