style(layout): createElement 方法简写为 h
This commit is contained in:
@@ -1,32 +1,32 @@
|
|||||||
// 创建 el-menu-item
|
// 创建 el-menu-item
|
||||||
export function elMenuItem (createElement, menu) {
|
export function elMenuItem (h, menu) {
|
||||||
return createElement('el-menu-item', { key: menu.path, props: { index: menu.path } }, [
|
return h('el-menu-item', { key: menu.path, props: { index: menu.path } }, [
|
||||||
...menu.icon ? [
|
...menu.icon ? [
|
||||||
createElement('i', { attrs: { class: `fa fa-${menu.icon}` } })
|
h('i', { attrs: { class: `fa fa-${menu.icon}` } })
|
||||||
] : [],
|
] : [],
|
||||||
...menu.icon === undefined & !menu.iconSvg ? [
|
...menu.icon === undefined & !menu.iconSvg ? [
|
||||||
createElement('i', { attrs: { class: 'fa fa-file-o' } })
|
h('i', { attrs: { class: 'fa fa-file-o' } })
|
||||||
] : [],
|
] : [],
|
||||||
...menu.iconSvg ? [
|
...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
|
// 创建 el-submenu
|
||||||
export function elSubmenu (createElement, menu) {
|
export function elSubmenu (h, menu) {
|
||||||
return createElement('el-submenu', { key: menu.path, props: { index: menu.path } }, [
|
return h('el-submenu', { key: menu.path, props: { index: menu.path } }, [
|
||||||
...menu.icon ? [
|
...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 ? [
|
...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 ? [
|
...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 || '未命名菜单'),
|
h('span', { slot: 'title' }, menu.title || '未命名菜单'),
|
||||||
...menu.children.map((child, childIndex) => (child.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, child))
|
...menu.children.map((child, childIndex) => (child.children === undefined ? elMenuItem : elSubmenu).call(this, h, child))
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,39 +8,39 @@ export default {
|
|||||||
mixins: [
|
mixins: [
|
||||||
menuMixin
|
menuMixin
|
||||||
],
|
],
|
||||||
render (createElement) {
|
render (h) {
|
||||||
return createElement('div', {
|
return h('div', {
|
||||||
attrs: { flex: 'cross:center' },
|
attrs: { flex: 'cross:center' },
|
||||||
class: { 'd2-theme-header-menu': true, 'is-scrollable': this.isScroll },
|
class: { 'd2-theme-header-menu': true, 'is-scrollable': this.isScroll },
|
||||||
ref: 'page'
|
ref: 'page'
|
||||||
}, [
|
}, [
|
||||||
createElement('div', {
|
h('div', {
|
||||||
attrs: { class: 'd2-theme-header-menu__content', flex: '', 'flex-box': '1' },
|
attrs: { class: 'd2-theme-header-menu__content', flex: '', 'flex-box': '1' },
|
||||||
ref: 'content'
|
ref: 'content'
|
||||||
}, [
|
}, [
|
||||||
createElement('div', {
|
h('div', {
|
||||||
attrs: { class: 'd2-theme-header-menu__scroll', 'flex-box': '0' },
|
attrs: { class: 'd2-theme-header-menu__scroll', 'flex-box': '0' },
|
||||||
style: { transform: `translateX(${this.currentTranslateX}px)` },
|
style: { transform: `translateX(${this.currentTranslateX}px)` },
|
||||||
ref: 'scroll'
|
ref: 'scroll'
|
||||||
}, [
|
}, [
|
||||||
createElement('el-menu', {
|
h('el-menu', {
|
||||||
props: { mode: 'horizontal', defaultActive: this.active },
|
props: { mode: 'horizontal', defaultActive: this.active },
|
||||||
on: { select: this.handleMenuSelect }
|
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 ? [
|
...this.isScroll ? [
|
||||||
createElement('div', {
|
h('div', {
|
||||||
attrs: { class: 'd2-theme-header-menu__prev', flex: 'main:center cross:center', 'flex-box': '0' },
|
attrs: { class: 'd2-theme-header-menu__prev', flex: 'main:center cross:center', 'flex-box': '0' },
|
||||||
on: { click: () => this.scroll('left') }
|
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' },
|
attrs: { class: 'd2-theme-header-menu__next', flex: 'main:center cross:center', 'flex-box': '0' },
|
||||||
on: { click: () => this.scroll('right') }
|
on: { click: () => this.scroll('right') }
|
||||||
}, [
|
}, [
|
||||||
createElement('i', { attrs: { class: 'el-icon-arrow-right' } })
|
h('i', { attrs: { class: 'el-icon-arrow-right' } })
|
||||||
])
|
])
|
||||||
] : []
|
] : []
|
||||||
])
|
])
|
||||||
|
|||||||
@@ -8,17 +8,17 @@ export default {
|
|||||||
mixins: [
|
mixins: [
|
||||||
menuMixin
|
menuMixin
|
||||||
],
|
],
|
||||||
render (createElement) {
|
render (h) {
|
||||||
return createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [
|
return h('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [
|
||||||
createElement('el-menu', {
|
h('el-menu', {
|
||||||
props: { collapse: this.asideCollapse, uniqueOpened: true, defaultActive: this.$route.fullPath },
|
props: { collapse: this.asideCollapse, uniqueOpened: true, defaultActive: this.$route.fullPath },
|
||||||
ref: 'menu',
|
ref: 'menu',
|
||||||
on: { select: this.handleMenuSelect }
|
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 ? [
|
...this.aside.length === 0 && !this.asideCollapse ? [
|
||||||
createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-empty', flex: 'dir:top main:center cross:center' } }, [
|
h('div', { attrs: { class: 'd2-layout-header-aside-menu-empty', flex: 'dir:top main:center cross:center' } }, [
|
||||||
createElement('d2-icon', { props: { name: 'inbox' } }),
|
h('d2-icon', { props: { name: 'inbox' } }),
|
||||||
createElement('span', {}, '没有侧栏菜单')
|
h('span', {}, '没有侧栏菜单')
|
||||||
])
|
])
|
||||||
] : []
|
] : []
|
||||||
])
|
])
|
||||||
|
|||||||
Reference in New Issue
Block a user