element/packages/menu/src/menu-item.vue

57 lines
1.0 KiB
Vue

<template>
<li class="el-menu-item"
:style="paddingStyle"
@click="handleClick"
:class="{
'is-active': active,
'is-disabled': disabled
}">
<slot></slot>
</li>
</template>
<script>
import Menu from './menu-mixin';
import Emitter from 'element-ui/src/mixins/emitter';
export default {
name: 'ElMenuItem',
componentName: 'ElMenuItem',
mixins: [Menu, Emitter],
props: {
index: {
type: String,
required: true
},
route: {
type: Object,
required: false
},
disabled: {
type: Boolean,
required: false
}
},
computed: {
active() {
return this.index === this.rootMenu.activedIndex;
}
},
methods: {
handleClick() {
this.dispatch('ElMenu', 'item-click', this);
}
},
created() {
this.parentMenu.addItem(this);
this.rootMenu.addItem(this);
},
beforeDestroy() {
this.parentMenu.removeItem(this);
this.rootMenu.removeItem(this);
}
};
</script>