2017-12-12 13:49:02 +08:00
|
|
|
<script>
|
2017-12-29 18:45:11 +08:00
|
|
|
import PropTypes from '../../_util/vue-types'
|
2017-12-12 13:49:02 +08:00
|
|
|
import KeyCode from '../../_util/KeyCode'
|
2018-01-03 18:30:12 +08:00
|
|
|
import { noop } from './util'
|
2018-01-04 10:35:45 +08:00
|
|
|
import StateMixin from '../../_util/StateMixin'
|
2017-12-12 13:49:02 +08:00
|
|
|
|
|
|
|
const MenuItem = {
|
|
|
|
name: 'MenuItem',
|
|
|
|
|
|
|
|
props: {
|
|
|
|
rootPrefixCls: PropTypes.string,
|
|
|
|
eventKey: PropTypes.string,
|
|
|
|
active: PropTypes.bool,
|
|
|
|
selectedKeys: PropTypes.array,
|
|
|
|
disabled: PropTypes.bool,
|
|
|
|
title: PropTypes.string,
|
2018-01-03 18:30:12 +08:00
|
|
|
inlineIndent: PropTypes.number.def(24),
|
|
|
|
level: PropTypes.number.def(1),
|
|
|
|
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
|
2017-12-12 13:49:02 +08:00
|
|
|
// onItemHover: PropTypes.func,
|
|
|
|
// onSelect: PropTypes.func,
|
|
|
|
// onClick: PropTypes.func,
|
|
|
|
// onDeselect: PropTypes.func,
|
|
|
|
parentMenu: PropTypes.object,
|
|
|
|
// onDestroy: PropTypes.func,
|
|
|
|
// onMouseEnter: PropTypes.func,
|
|
|
|
// onMouseLeave: PropTypes.func,
|
2018-01-03 18:30:12 +08:00
|
|
|
clearSubMenuTimers: PropTypes.func.def(noop),
|
2017-12-12 13:49:02 +08:00
|
|
|
},
|
2018-01-08 18:31:04 +08:00
|
|
|
inject: {
|
|
|
|
parentMenuContext: { default: undefined },
|
|
|
|
},
|
2018-01-04 10:35:45 +08:00
|
|
|
mixins: [StateMixin],
|
2018-01-04 19:06:54 +08:00
|
|
|
isMenuItem: true,
|
2017-12-12 13:49:02 +08:00
|
|
|
beforeDestroy () {
|
|
|
|
const props = this.$props
|
|
|
|
this.$emit('destroy', props.eventKey)
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
onKeyDown (e) {
|
|
|
|
const keyCode = e.keyCode
|
|
|
|
if (keyCode === KeyCode.ENTER) {
|
|
|
|
this.$emit('click', e)
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onMouseLeave (e) {
|
|
|
|
const { eventKey } = this.$props
|
|
|
|
this.$emit('itemHover', {
|
|
|
|
key: eventKey,
|
|
|
|
hover: false,
|
|
|
|
})
|
|
|
|
this.$emit('mouseLeave', {
|
|
|
|
key: eventKey,
|
|
|
|
domEvent: e,
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
onMouseEnter (e) {
|
2018-01-08 18:31:04 +08:00
|
|
|
const { eventKey, parentMenuContext } = this
|
|
|
|
if (parentMenuContext && parentMenuContext.subMenuInstance) {
|
|
|
|
parentMenuContext.subMenuInstance.clearSubMenuTimers()
|
|
|
|
}
|
2017-12-12 13:49:02 +08:00
|
|
|
this.$emit('itemHover', {
|
|
|
|
key: eventKey,
|
|
|
|
hover: true,
|
|
|
|
})
|
|
|
|
this.$emit('mouseEnter', {
|
|
|
|
key: eventKey,
|
|
|
|
domEvent: e,
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
onClick (e) {
|
|
|
|
const { eventKey, multiple } = this.$props
|
|
|
|
const selected = this.isSelected()
|
|
|
|
const info = {
|
|
|
|
key: eventKey,
|
|
|
|
keyPath: [eventKey],
|
|
|
|
item: this,
|
|
|
|
domEvent: e,
|
|
|
|
}
|
|
|
|
this.$emit('click', info)
|
|
|
|
if (multiple) {
|
|
|
|
if (selected) {
|
|
|
|
this.$emit('deselect', info)
|
|
|
|
} else {
|
|
|
|
this.$emit('select', info)
|
|
|
|
}
|
|
|
|
} else if (!selected) {
|
|
|
|
this.$emit('select', info)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
getPrefixCls () {
|
|
|
|
return `${this.$props.rootPrefixCls}-item`
|
|
|
|
},
|
|
|
|
|
|
|
|
getActiveClassName () {
|
|
|
|
return `${this.getPrefixCls()}-active`
|
|
|
|
},
|
|
|
|
|
|
|
|
getSelectedClassName () {
|
|
|
|
return `${this.getPrefixCls()}-selected`
|
|
|
|
},
|
|
|
|
|
|
|
|
getDisabledClassName () {
|
|
|
|
return `${this.getPrefixCls()}-disabled`
|
|
|
|
},
|
|
|
|
|
|
|
|
isSelected () {
|
|
|
|
return this.$props.selectedKeys.indexOf(this.$props.eventKey) !== -1
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const props = this.$props
|
|
|
|
const selected = this.isSelected()
|
|
|
|
const className = {
|
|
|
|
[this.getPrefixCls()]: true,
|
|
|
|
[this.getActiveClassName()]: !props.disabled && props.active,
|
|
|
|
[this.getSelectedClassName()]: selected,
|
|
|
|
[this.getDisabledClassName()]: props.disabled,
|
|
|
|
}
|
|
|
|
const attrs = {
|
|
|
|
...props.attribute,
|
|
|
|
title: props.title,
|
|
|
|
role: 'menuitem',
|
|
|
|
'aria-selected': selected,
|
|
|
|
'aria-disabled': props.disabled,
|
|
|
|
}
|
|
|
|
let mouseEvent = {}
|
|
|
|
if (!props.disabled) {
|
|
|
|
mouseEvent = {
|
|
|
|
click: this.onClick,
|
|
|
|
mouseleave: this.onMouseLeave,
|
|
|
|
mouseenter: this.onMouseEnter,
|
|
|
|
}
|
|
|
|
}
|
2018-01-08 18:31:04 +08:00
|
|
|
|
2017-12-12 13:49:02 +08:00
|
|
|
const style = {}
|
|
|
|
if (props.mode === 'inline') {
|
|
|
|
style.paddingLeft = `${props.inlineIndent * props.level}px`
|
|
|
|
}
|
|
|
|
const liProps = {
|
|
|
|
attrs,
|
|
|
|
on: {
|
2017-12-29 18:45:11 +08:00
|
|
|
...mouseEvent,
|
2017-12-12 13:49:02 +08:00
|
|
|
},
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<li
|
|
|
|
{...liProps}
|
|
|
|
style={style}
|
|
|
|
class={className}
|
|
|
|
>
|
|
|
|
{this.$slots.default}
|
|
|
|
</li>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
|
|
|
export default MenuItem
|
|
|
|
</script>
|