toesbieya
6 years ago
parent
a8d317ac9f
commit
12770dcaf7
@ -0,0 +1,74 @@ |
|||||||
|
<template> |
||||||
|
<li |
||||||
|
class="el-menu-item" |
||||||
|
:style="paddingStyle" |
||||||
|
:class="{'is-active': active,'is-disabled': disabled}" |
||||||
|
@click="handleClick" |
||||||
|
> |
||||||
|
<el-tooltip |
||||||
|
v-if="parentMenu.$options.componentName === 'ElMenu' && rootMenu.collapse && $slots.title" |
||||||
|
effect="dark" |
||||||
|
placement="right" |
||||||
|
> |
||||||
|
<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;"> |
||||||
|
<slot/> |
||||||
|
</div> |
||||||
|
</el-tooltip> |
||||||
|
|
||||||
|
<template v-else> |
||||||
|
<slot/> |
||||||
|
<slot name="title"/> |
||||||
|
</template> |
||||||
|
</li> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import MenuMixin from 'element-ui/packages/menu/src/menu-mixin' |
||||||
|
import Emitter from 'element-ui/lib/mixins/emitter' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'ElMenuItem', |
||||||
|
|
||||||
|
componentName: 'ElMenuItem', |
||||||
|
|
||||||
|
mixins: [MenuMixin, Emitter], |
||||||
|
|
||||||
|
data() { |
||||||
|
return {} |
||||||
|
}, |
||||||
|
|
||||||
|
props: { |
||||||
|
index: String, |
||||||
|
route: [String, Object], |
||||||
|
disabled: Boolean |
||||||
|
}, |
||||||
|
|
||||||
|
computed: { |
||||||
|
active() { |
||||||
|
return this.index === this.rootMenu.activeIndex |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
handleClick() { |
||||||
|
if (!this.disabled) { |
||||||
|
this.dispatch('ElMenu', 'item-click', this) |
||||||
|
this.$emit('click', this) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
mounted() { |
||||||
|
this.parentMenu.addItem(this) |
||||||
|
this.rootMenu.addItem(this) |
||||||
|
}, |
||||||
|
|
||||||
|
beforeDestroy() { |
||||||
|
this.parentMenu.removeItem(this) |
||||||
|
this.rootMenu.removeItem(this) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,278 @@ |
|||||||
|
<script type="text/jsx"> |
||||||
|
import MenuMixin from 'element-ui/packages/menu/src/menu-mixin' |
||||||
|
import Emitter from 'element-ui/lib/mixins/emitter' |
||||||
|
import Popper from 'element-ui/lib/utils/vue-popper' |
||||||
|
|
||||||
|
const PopperMixins = { |
||||||
|
props: { |
||||||
|
transformOrigin: {type: [Boolean, String], default: false}, |
||||||
|
offset: Popper.props.offset, |
||||||
|
boundariesPadding: Popper.props.boundariesPadding, |
||||||
|
popperOptions: Popper.props.popperOptions |
||||||
|
}, |
||||||
|
data: Popper.data, |
||||||
|
methods: Popper.methods, |
||||||
|
beforeDestroy: Popper.beforeDestroy, |
||||||
|
deactivated: Popper.deactivated |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'ElSubmenu', |
||||||
|
|
||||||
|
componentName: 'ElSubmenu', |
||||||
|
|
||||||
|
mixins: [MenuMixin, Emitter, PopperMixins], |
||||||
|
|
||||||
|
props: { |
||||||
|
index: String, |
||||||
|
showTimeout: {type: Number, default: 300}, |
||||||
|
hideTimeout: {type: Number, default: 300}, |
||||||
|
popperClass: String, |
||||||
|
disabled: Boolean, |
||||||
|
popperAppendToBody: {type: Boolean, default: true} |
||||||
|
}, |
||||||
|
|
||||||
|
data() { |
||||||
|
return { |
||||||
|
popperJS: null, |
||||||
|
timeout: null, |
||||||
|
items: {}, |
||||||
|
submenus: {}, |
||||||
|
mouseInChild: false |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
computed: { |
||||||
|
appendToBody() { |
||||||
|
return this.popperAppendToBody === undefined |
||||||
|
? this.isFirstLevel |
||||||
|
: this.popperAppendToBody |
||||||
|
}, |
||||||
|
menuTransitionName() { |
||||||
|
return this.rootMenu.collapse ? 'el-zoom-in-left' : 'el-zoom-in-top' |
||||||
|
}, |
||||||
|
opened() { |
||||||
|
return this.rootMenu.openedMenus.includes(this.index) |
||||||
|
}, |
||||||
|
active() { |
||||||
|
const items = this.items |
||||||
|
|
||||||
|
const isActive = Object.keys(items).some(key => items[key].active) |
||||||
|
|
||||||
|
if (!isActive) { |
||||||
|
const submenus = this.submenus |
||||||
|
return Object.keys(submenus).some(key => submenus[key].active) |
||||||
|
} |
||||||
|
|
||||||
|
return isActive |
||||||
|
}, |
||||||
|
mode() { |
||||||
|
return this.rootMenu.mode |
||||||
|
}, |
||||||
|
isMenuPopup() { |
||||||
|
return this.rootMenu.isMenuPopup |
||||||
|
}, |
||||||
|
isFirstLevel() { |
||||||
|
const arr = ['ElSubmenu', 'ElMenuItemGroup'] |
||||||
|
let isFirstLevel = true |
||||||
|
let parent = this.$parent |
||||||
|
|
||||||
|
while (parent && parent !== this.rootMenu) { |
||||||
|
if (arr.includes(parent.$options.componentName)) { |
||||||
|
isFirstLevel = false |
||||||
|
break |
||||||
|
} |
||||||
|
else parent = parent.$parent |
||||||
|
} |
||||||
|
return isFirstLevel |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
watch: { |
||||||
|
opened() { |
||||||
|
this.isMenuPopup && this.$nextTick(this.updatePopper) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
handleCollapseToggle(value) { |
||||||
|
if (value) { |
||||||
|
this.initPopper() |
||||||
|
} |
||||||
|
else { |
||||||
|
this.doDestroy() |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
addItem(item) { |
||||||
|
this.$set(this.items, item.index, item) |
||||||
|
}, |
||||||
|
|
||||||
|
removeItem(item) { |
||||||
|
delete this.items[item.index] |
||||||
|
}, |
||||||
|
|
||||||
|
addSubmenu(item) { |
||||||
|
this.$set(this.submenus, item.index, item) |
||||||
|
}, |
||||||
|
|
||||||
|
removeSubmenu(item) { |
||||||
|
delete this.submenus[item.index] |
||||||
|
}, |
||||||
|
|
||||||
|
handleClick() { |
||||||
|
const {rootMenu, disabled} = this |
||||||
|
if ( |
||||||
|
(rootMenu.menuTrigger === 'hover' && rootMenu.mode === 'horizontal') || |
||||||
|
(rootMenu.collapse && rootMenu.mode === 'vertical') || |
||||||
|
disabled |
||||||
|
) { |
||||||
|
return |
||||||
|
} |
||||||
|
this.dispatch('ElMenu', 'submenu-click', this) |
||||||
|
}, |
||||||
|
|
||||||
|
handleMouseenter(event, showTimeout = this.showTimeout) { |
||||||
|
|
||||||
|
if (!('ActiveXObject' in window) && event.type === 'focus' && !event.relatedTarget) { |
||||||
|
return |
||||||
|
} |
||||||
|
const {rootMenu, disabled} = this |
||||||
|
if ( |
||||||
|
(rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') || |
||||||
|
(!rootMenu.collapse && rootMenu.mode === 'vertical') || |
||||||
|
disabled |
||||||
|
) { |
||||||
|
return |
||||||
|
} |
||||||
|
this.dispatch('ElSubmenu', 'mouse-enter-child') |
||||||
|
clearTimeout(this.timeout) |
||||||
|
this.timeout = setTimeout(() => { |
||||||
|
this.rootMenu.openMenu(this.index, this.indexPath) |
||||||
|
}, showTimeout) |
||||||
|
|
||||||
|
if (this.appendToBody) { |
||||||
|
this.$parent.$el.dispatchEvent(new MouseEvent('mouseenter')) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
handleMouseleave(deepDispatch = false) { |
||||||
|
const {rootMenu} = this |
||||||
|
if ( |
||||||
|
(rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') || |
||||||
|
(!rootMenu.collapse && rootMenu.mode === 'vertical') |
||||||
|
) { |
||||||
|
return |
||||||
|
} |
||||||
|
this.dispatch('ElSubmenu', 'mouse-leave-child') |
||||||
|
clearTimeout(this.timeout) |
||||||
|
this.timeout = setTimeout(() => { |
||||||
|
!this.mouseInChild && this.rootMenu.closeMenu(this.index) |
||||||
|
}, this.hideTimeout) |
||||||
|
|
||||||
|
if (this.appendToBody && deepDispatch) { |
||||||
|
if (this.$parent.$options.name === 'ElSubmenu') { |
||||||
|
this.$parent.handleMouseleave(true) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
updatePlacement() { |
||||||
|
this.placement = this.mode === 'horizontal' && this.isFirstLevel |
||||||
|
? 'bottom-start' |
||||||
|
: 'right-start' |
||||||
|
}, |
||||||
|
|
||||||
|
initPopper() { |
||||||
|
this.referenceElm = this.$el |
||||||
|
this.popperElm = this.$refs.menu |
||||||
|
this.updatePlacement() |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
created() { |
||||||
|
this.$on('toggle-collapse', this.handleCollapseToggle) |
||||||
|
this.$on('mouse-enter-child', () => { |
||||||
|
this.mouseInChild = true |
||||||
|
clearTimeout(this.timeout) |
||||||
|
}) |
||||||
|
this.$on('mouse-leave-child', () => { |
||||||
|
this.mouseInChild = false |
||||||
|
clearTimeout(this.timeout) |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
mounted() { |
||||||
|
this.parentMenu.addSubmenu(this) |
||||||
|
this.rootMenu.addSubmenu(this) |
||||||
|
this.initPopper() |
||||||
|
}, |
||||||
|
|
||||||
|
beforeDestroy() { |
||||||
|
this.parentMenu.removeSubmenu(this) |
||||||
|
this.rootMenu.removeSubmenu(this) |
||||||
|
}, |
||||||
|
|
||||||
|
render() { |
||||||
|
const {rootMenu, $slots} = this |
||||||
|
|
||||||
|
const popupMenu = ( |
||||||
|
<transition name={this.menuTransitionName}> |
||||||
|
<div |
||||||
|
ref="menu" |
||||||
|
v-show={this.opened} |
||||||
|
class={[`el-menu--${this.mode}`, this.popperClass]} |
||||||
|
on-mouseenter={e => this.handleMouseenter(e, 100)} |
||||||
|
on-mouseleave={() => this.handleMouseleave(true)} |
||||||
|
on-focus={e => this.handleMouseenter(e, 100)}> |
||||||
|
<ul class={['el-menu el-menu--popup', `el-menu--popup-${this.currentPlacement}`]}> |
||||||
|
{$slots.default} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</transition> |
||||||
|
) |
||||||
|
|
||||||
|
const inlineMenu = ( |
||||||
|
<el-collapse-transition> |
||||||
|
<ul v-show={this.opened} class="el-menu el-menu--inline"> |
||||||
|
{$slots.default} |
||||||
|
</ul> |
||||||
|
</el-collapse-transition> |
||||||
|
) |
||||||
|
|
||||||
|
const submenuTitleIcon = ( |
||||||
|
rootMenu.mode === 'horizontal' && this.isFirstLevel || |
||||||
|
rootMenu.mode === 'vertical' && !rootMenu.collapse |
||||||
|
) ? 'el-icon-arrow-down' : 'el-icon-arrow-right' |
||||||
|
|
||||||
|
return ( |
||||||
|
<li |
||||||
|
class={{ |
||||||
|
'el-submenu': true, |
||||||
|
'is-active': this.active, |
||||||
|
'is-opened': this.opened, |
||||||
|
'is-disabled': this.disabled |
||||||
|
}} |
||||||
|
on-mouseenter={this.handleMouseenter} |
||||||
|
on-mouseleave={() => this.handleMouseleave(false)} |
||||||
|
on-focus={this.handleMouseenter} |
||||||
|
> |
||||||
|
<div |
||||||
|
ref="submenu-title" |
||||||
|
class="el-submenu__title" |
||||||
|
style={this.paddingStyle} |
||||||
|
on-click={this.handleClick} |
||||||
|
> |
||||||
|
{$slots.title} |
||||||
|
<i class={['el-submenu__icon-arrow', submenuTitleIcon]}/> |
||||||
|
</div> |
||||||
|
{this.isMenuPopup ? popupMenu : inlineMenu} |
||||||
|
</li> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue