2016-12-07 12:10:47 +08:00
|
|
|
<template>
|
2016-12-07 20:45:21 +08:00
|
|
|
<li :class="classes" @click.stop="handleClick"><slot></slot></li>
|
2016-12-07 12:10:47 +08:00
|
|
|
</template>
|
|
|
|
<script>
|
2016-12-07 20:45:21 +08:00
|
|
|
const prefixCls = 'ivu-menu';
|
|
|
|
|
2016-12-07 12:10:47 +08:00
|
|
|
export default {
|
2016-12-07 20:45:21 +08:00
|
|
|
name: 'MenuItem',
|
|
|
|
props: {
|
|
|
|
key: {
|
|
|
|
type: [String, Number],
|
|
|
|
required: true
|
|
|
|
},
|
|
|
|
disabled: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
}
|
|
|
|
},
|
2016-12-07 12:10:47 +08:00
|
|
|
data () {
|
2016-12-07 20:45:21 +08:00
|
|
|
return {
|
|
|
|
active: false
|
2016-12-25 22:49:42 +08:00
|
|
|
};
|
2016-12-07 20:45:21 +08:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
classes () {
|
|
|
|
return [
|
|
|
|
`${prefixCls}-item`,
|
|
|
|
{
|
|
|
|
[`${prefixCls}-item-active`]: this.active,
|
|
|
|
[`${prefixCls}-item-selected`]: this.active,
|
|
|
|
[`${prefixCls}-item-disabled`]: this.disabled
|
|
|
|
}
|
2016-12-25 22:49:42 +08:00
|
|
|
];
|
2016-12-07 20:45:21 +08:00
|
|
|
}
|
2016-12-07 12:10:47 +08:00
|
|
|
},
|
2016-12-07 20:45:21 +08:00
|
|
|
methods: {
|
|
|
|
handleClick () {
|
2016-12-08 11:55:38 +08:00
|
|
|
if (this.disabled) return;
|
2016-12-07 20:45:21 +08:00
|
|
|
this.$dispatch('on-menu-item-select', this.key);
|
|
|
|
}
|
|
|
|
}
|
2016-12-25 22:49:42 +08:00
|
|
|
};
|
|
|
|
</script>
|