fix(menu): fix/menu-item-not-expanding-correctly (#1212)

- Fix submenu cannot be expand correctly due to vue compiler's neg-optimization
This commit is contained in:
jeremywu 2021-01-06 23:24:41 +08:00 committed by GitHub
parent ca09d496d8
commit ade9a18010
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,4 +1,4 @@
<template>
<!-- <template>
<li
:class="[
'el-submenu',
@ -85,7 +85,7 @@
</ul>
</el-collapse-transition>
</li>
</template>
</template> -->
<script lang="ts">
import mitt from 'mitt'
@ -100,6 +100,11 @@ import {
onMounted,
onBeforeMount,
onBeforeUnmount,
withDirectives,
Fragment,
Transition,
vShow,
h,
} from 'vue'
import ElCollapseTransition from '@element-plus/collapse-transition'
import { ISubmenuProps, RootMenuProvider, SubMenuProvider } from './menu'
@ -109,7 +114,6 @@ import ElPopper from '@element-plus/popper'
export default defineComponent({
name: 'ElSubmenu',
componentName: 'ElSubmenu',
components: { ElCollapseTransition, ElPopper },
props: {
index: {
type: String,
@ -429,5 +433,105 @@ export default defineComponent({
verticalTitleRef,
}
},
render() {
const titleTag = [
this.$slots.title?.(),
h('i', {
class: ['el-submenu__icon-arrow', this.submenuTitleIcon],
}, null)]
const ulStyle = {
backgroundColor: this.rootProps.backgroundColor || '',
}
// this render function is only used for bypass `Vue`'s compiler caused patching issue.
// temporaryly mark ElPopper as any due to type inconsistency.
// TODO: correct popper's type.
const child = this.isMenuPopup
? h(ElPopper as any, {
ref: 'popperVNode',
manualMode: true,
visible: this.opened,
'onUpdate:visible': (val: boolean) => this.opened = val,
effect: 'light',
pure: true,
offset: 6,
showArrow: false,
popperClass: this.popperClass,
placement: this.data.currentPlacement,
appendToBody: this.appendToBody,
}, {
default: () => h(
Transition,
{
name: this.menuTransitionName,
},
{
default: () => withDirectives(
h('div', {
ref: 'menu',
class: [
`el-menu--${this.mode}`,
this.popperClass,
],
onMouseenter: ($event: Event) => this.handleMouseenter($event, 100),
onMouseleave: () => this.handleMouseleave(true),
onFocus: ($event: Event) => this.handleMouseenter($event, 100),
}, [
h('ul', {
class: [
'el-menu el-menu--popup',
`el-menu--popup-${this.data.currentPlacement}`,
],
style: ulStyle,
}, [this.$slots.default?.()]),
]),
[[vShow, this.opened]]),
},
),
trigger: () => h('div', {
class: 'el-submenu__title',
style: [this.paddingStyle, this.titleStyle, { backgroundColor: this.backgroundColor }],
onClick: this.handleClick,
onMouseenter: this.handleTitleMouseenter,
onMouseleave: this.handleTitleMouseleave,
}, titleTag),
})
: h(Fragment, {}, [
h('div', {
class: 'el-submenu__title',
style: [this.paddingStyle, this.titleStyle, { backgroundColor: this.backgroundColor }],
ref: 'verticalTitleRef',
onClick: this.handleClick,
onMouseenter: this.handleTitleMouseenter,
onMouseleave: this.handleTitleMouseleave,
}, titleTag),
h(ElCollapseTransition, {}, {
default: () => withDirectives(
h('ul', {
role: 'menu',
class: 'el-menu el-menu--inline',
style: ulStyle,
}, [this.$slots.default?.()]),
[[vShow, this.opened]]),
}),
])
return h('li', {
class: [
'el-submenu',
{
'is-active': this.active,
'is-opened': this.opened,
'is-disabled': this.disabled,
},
],
role: 'menuitem',
ariaHaspopup: true,
ariaExpanded: this.opened,
onMouseenter: this.handleMouseenter,
onMouseleave: () => this.handleMouseleave(true),
onFocus: this.handleMouseenter,
}, [child])
},
})
</script>