You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.7 KiB
74 lines
1.7 KiB
<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"
|
|
>
|
|
<template v-slot:content>
|
|
<slot name="title"/>
|
|
</template>
|
|
<div :style="iconContainerStyle">
|
|
<slot/>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<template v-else>
|
|
<slot/>
|
|
<slot name="title"/>
|
|
</template>
|
|
</li>
|
|
</template>
|
|
|
|
<script>
|
|
import MenuMixin from './mixin'
|
|
import Emitter from 'element-ui/lib/mixins/emitter'
|
|
|
|
export default {
|
|
name: 'ElMenuItem',
|
|
|
|
componentName: 'ElMenuItem',
|
|
|
|
mixins: [MenuMixin, Emitter],
|
|
|
|
props: {
|
|
index: String,
|
|
route: [String, Object],
|
|
disabled: Boolean
|
|
},
|
|
|
|
computed: {
|
|
active() {
|
|
return this.index === this.rootMenu.activeIndex
|
|
},
|
|
|
|
iconContainerStyle() {
|
|
return `position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 ${this.inlineIndent}px;`
|
|
}
|
|
},
|
|
|
|
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>
|
|
|