feat: ✨ menu-header 和 menu-side 组件使用 jsx 重写 render
This commit is contained in:
FairyEver
parent
93414ebc86
commit
0e541795a9
|
|
@ -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 = <i class={ `fa fa-${menu.icon}` }/>
|
||||
else if (menu.iconSvg) icon = <d2-icon-svg name={ menu.iconSvg }/>
|
||||
else icon = <i class="fa fa-file-o"/>
|
||||
return <el-menu-item
|
||||
key={ menu.path }
|
||||
index={ menu.path }>
|
||||
{ icon }
|
||||
<span slot="title">{ menu.title || '未命名菜单' }</span>
|
||||
</el-menu-item>
|
||||
}
|
||||
|
||||
// 创建 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 = <i slot="title" class={ `fa fa-${menu.icon}` }/>
|
||||
else if (menu.iconSvg) icon = <d2-icon-svg slot="title" name={ menu.iconSvg }/>
|
||||
else icon = <i slot="title" class="fa fa-folder-o"/>
|
||||
return <el-submenu
|
||||
key={ menu.path }
|
||||
index={ menu.path }>
|
||||
{ icon }
|
||||
<span slot="title">{ menu.title || '未命名菜单' }</span>
|
||||
{ menu.children.map(child => createMenu.call(this, h, child)) }
|
||||
</el-submenu>
|
||||
}
|
||||
|
||||
/**
|
||||
* @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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <div
|
||||
flex="cross:center"
|
||||
class={ { 'd2-theme-header-menu': true, 'is-scrollable': this.isScroll } }
|
||||
ref="page">
|
||||
<div
|
||||
ref="content"
|
||||
class="d2-theme-header-menu__content"
|
||||
flex-box="1"
|
||||
flex>
|
||||
<div
|
||||
class="d2-theme-header-menu__scroll"
|
||||
flex-box="0"
|
||||
style={ { transform: `translateX(${this.currentTranslateX}px)` } }
|
||||
ref="scroll">
|
||||
<el-menu
|
||||
mode="horizontal"
|
||||
defaultActive={ this.active }
|
||||
onSelect={ this.handleMenuSelect }>
|
||||
{ this.header.map(menu => createMenu.call(this, h, menu)) }
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
this.isScroll
|
||||
? [
|
||||
<div
|
||||
class="d2-theme-header-menu__prev"
|
||||
flex="main:center cross:center"
|
||||
flex-box="0"
|
||||
onClick={ () => this.scroll('left') }>
|
||||
<i class="el-icon-arrow-left"></i>
|
||||
</div>,
|
||||
<div
|
||||
class="d2-theme-header-menu__next"
|
||||
flex="main:center cross:center"
|
||||
flex-box="0"
|
||||
onClick={ () => this.scroll('right') }>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
]
|
||||
: []
|
||||
}
|
||||
</div>
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin/menu', [
|
||||
|
|
|
|||
|
|
@ -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 <div class="d2-layout-header-aside-menu-side">
|
||||
<el-menu
|
||||
collapse={ this.asideCollapse }
|
||||
collapseTransition={ this.asideTransition }
|
||||
uniqueOpened={ true }
|
||||
defaultActive={ this.$route.fullPath }
|
||||
ref="menu"
|
||||
onSelect={ this.handleMenuSelect }>
|
||||
{ this.aside.map(menu => createMenu.call(this, h, menu)) }
|
||||
</el-menu>
|
||||
{
|
||||
this.aside.length === 0 && !this.asideCollapse
|
||||
? <div class="d2-layout-header-aside-menu-empty" flex="dir:top main:center cross:center">
|
||||
<d2-icon name="inbox"></d2-icon>
|
||||
<span>没有侧栏菜单</span>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue