diff --git a/src/layout/header-aside/components/libs/util.menu.js b/src/layout/header-aside/components/libs/util.menu.js index 148e02fa..a13f3a33 100644 --- a/src/layout/header-aside/components/libs/util.menu.js +++ b/src/layout/header-aside/components/libs/util.menu.js @@ -1,32 +1,32 @@ // 创建 el-menu-item -export function elMenuItem (createElement, menu) { - return createElement('el-menu-item', { key: menu.path, props: { index: menu.path } }, [ +export function elMenuItem (h, menu) { + return h('el-menu-item', { key: menu.path, props: { index: menu.path } }, [ ...menu.icon ? [ - createElement('i', { attrs: { class: `fa fa-${menu.icon}` } }) + h('i', { attrs: { class: `fa fa-${menu.icon}` } }) ] : [], ...menu.icon === undefined & !menu.iconSvg ? [ - createElement('i', { attrs: { class: 'fa fa-file-o' } }) + h('i', { attrs: { class: 'fa fa-file-o' } }) ] : [], ...menu.iconSvg ? [ - createElement('d2-icon-svg', { props: { name: menu.iconSvg } }) + h('d2-icon-svg', { props: { name: menu.iconSvg } }) ] : [], - createElement('span', { slot: 'title' }, menu.title || '未命名菜单') + h('span', { slot: 'title' }, menu.title || '未命名菜单') ]) } // 创建 el-submenu -export function elSubmenu (createElement, menu) { - return createElement('el-submenu', { key: menu.path, props: { index: menu.path } }, [ +export function elSubmenu (h, menu) { + return h('el-submenu', { key: menu.path, props: { index: menu.path } }, [ ...menu.icon ? [ - createElement('i', { slot: 'title', attrs: { class: `fa fa-${menu.icon}` } }) + h('i', { slot: 'title', attrs: { class: `fa fa-${menu.icon}` } }) ] : [], ...menu.icon === undefined & !menu.iconSvg ? [ - createElement('i', { slot: 'title', attrs: { class: 'fa fa-folder-o' } }) + h('i', { slot: 'title', attrs: { class: 'fa fa-folder-o' } }) ] : [], ...menu.iconSvg ? [ - createElement('d2-icon-svg', { slot: 'title', props: { name: menu.iconSvg } }) + h('d2-icon-svg', { slot: 'title', props: { name: menu.iconSvg } }) ] : [], - createElement('span', { slot: 'title' }, menu.title || '未命名菜单'), - ...menu.children.map((child, childIndex) => (child.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, child)) + h('span', { slot: 'title' }, menu.title || '未命名菜单'), + ...menu.children.map((child, childIndex) => (child.children === undefined ? elMenuItem : elSubmenu).call(this, h, child)) ]) } diff --git a/src/layout/header-aside/components/menu-header/index.js b/src/layout/header-aside/components/menu-header/index.js index bea42497..55d7fd90 100644 --- a/src/layout/header-aside/components/menu-header/index.js +++ b/src/layout/header-aside/components/menu-header/index.js @@ -8,39 +8,39 @@ export default { mixins: [ menuMixin ], - render (createElement) { - return createElement('div', { + render (h) { + return h('div', { attrs: { flex: 'cross:center' }, class: { 'd2-theme-header-menu': true, 'is-scrollable': this.isScroll }, ref: 'page' }, [ - createElement('div', { + h('div', { attrs: { class: 'd2-theme-header-menu__content', flex: '', 'flex-box': '1' }, ref: 'content' }, [ - createElement('div', { + h('div', { attrs: { class: 'd2-theme-header-menu__scroll', 'flex-box': '0' }, style: { transform: `translateX(${this.currentTranslateX}px)` }, ref: 'scroll' }, [ - createElement('el-menu', { + h('el-menu', { props: { mode: 'horizontal', defaultActive: this.active }, on: { select: this.handleMenuSelect } - }, this.header.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, menu))) + }, this.header.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, h, menu))) ]) ]), ...this.isScroll ? [ - createElement('div', { + h('div', { attrs: { class: 'd2-theme-header-menu__prev', flex: 'main:center cross:center', 'flex-box': '0' }, on: { click: () => this.scroll('left') } }, [ - createElement('i', { attrs: { class: 'el-icon-arrow-left' } }) + h('i', { attrs: { class: 'el-icon-arrow-left' } }) ]), - createElement('div', { + h('div', { attrs: { class: 'd2-theme-header-menu__next', flex: 'main:center cross:center', 'flex-box': '0' }, on: { click: () => this.scroll('right') } }, [ - createElement('i', { attrs: { class: 'el-icon-arrow-right' } }) + h('i', { attrs: { class: 'el-icon-arrow-right' } }) ]) ] : [] ]) diff --git a/src/layout/header-aside/components/menu-side/index.js b/src/layout/header-aside/components/menu-side/index.js index 3311ea0d..cbf12522 100644 --- a/src/layout/header-aside/components/menu-side/index.js +++ b/src/layout/header-aside/components/menu-side/index.js @@ -8,17 +8,17 @@ export default { mixins: [ menuMixin ], - render (createElement) { - return createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [ - createElement('el-menu', { + render (h) { + return h('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [ + h('el-menu', { props: { collapse: this.asideCollapse, uniqueOpened: true, defaultActive: this.$route.fullPath }, ref: 'menu', on: { select: this.handleMenuSelect } - }, this.aside.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, menu))), + }, this.aside.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, h, menu))), ...this.aside.length === 0 && !this.asideCollapse ? [ - createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-empty', flex: 'dir:top main:center cross:center' } }, [ - createElement('d2-icon', { props: { name: 'inbox' } }), - createElement('span', {}, '没有侧栏菜单') + 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', {}, '没有侧栏菜单') ]) ] : [] ])