<template>
|
<li class="el-menu-item"
|
role="menuitem"
|
tabindex="-1"
|
:style="[paddingStyle, itemStyle, { backgroundColor }]"
|
:class="{
|
'is-active': active,
|
'is-disabled': disabled
|
}"
|
@click="handleClick"
|
@mouseenter="onMouseEnter"
|
@focus="onMouseEnter"
|
@blur="onMouseLeave"
|
@mouseleave="onMouseLeave"
|
>
|
<el-tooltip
|
v-if="parentMenu.$options.componentName === 'ElMenu' && rootMenu.collapse && $slots.title"
|
effect="dark"
|
placement="right">
|
<div slot="content"><slot name="title"></slot></div>
|
<div style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">
|
<slot></slot>
|
</div>
|
</el-tooltip>
|
<template v-else>
|
<slot></slot>
|
<slot name="title"></slot>
|
</template>
|
</li>
|
</template>
|
<script>
|
import Menu from './menu-mixin';
|
import ElTooltip from 'element-ui/packages/tooltip';
|
import Emitter from 'element-ui/src/mixins/emitter';
|
|
export default {
|
name: 'ElMenuItem',
|
|
componentName: 'ElMenuItem',
|
|
mixins: [Menu, Emitter],
|
|
components: { ElTooltip },
|
|
props: {
|
index: {
|
default: null,
|
validator: val => typeof val === 'string' || val === null
|
},
|
route: [String, Object],
|
disabled: Boolean
|
},
|
computed: {
|
active() {
|
return this.index === this.rootMenu.activeIndex;
|
},
|
hoverBackground() {
|
return this.rootMenu.hoverBackground;
|
},
|
backgroundColor() {
|
return this.rootMenu.backgroundColor || '';
|
},
|
activeTextColor() {
|
return this.rootMenu.activeTextColor || '';
|
},
|
textColor() {
|
return this.rootMenu.textColor || '';
|
},
|
mode() {
|
return this.rootMenu.mode;
|
},
|
itemStyle() {
|
const style = {
|
color: this.active ? this.activeTextColor : this.textColor
|
};
|
if (this.mode === 'horizontal' && !this.isNested) {
|
style.borderBottomColor = this.active
|
? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
|
: 'transparent';
|
}
|
return style;
|
},
|
isNested() {
|
return this.parentMenu !== this.rootMenu;
|
}
|
},
|
methods: {
|
onMouseEnter() {
|
if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
|
this.$el.style.backgroundColor = this.hoverBackground;
|
},
|
onMouseLeave() {
|
if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
|
this.$el.style.backgroundColor = this.backgroundColor;
|
},
|
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>
|
