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

55 lines
973 B
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';
module.exports = {
name: 'ElMenuItem',
componentName: 'ElMenuItem',
mixins: [Menu],
props: {
index: {
type: String,
required: true
},
route: {
type: Object,
required: false
},
disabled: {
type: Boolean,
required: false
}
},
computed: {
active() {
return this.index === this.rootMenu.activeIndex;
}
},
methods: {
handleClick() {
this.rootMenu.handleSelect(
this.index,
this.indexPath,
this.route || this.index,
this
);
}
},
created() {
this.rootMenu.menuItems[this.index] = this;
}
};
</script>