ant-design-vue/components/menu/src/MenuItem.vue

160 lines
3.7 KiB
Vue
Raw Normal View History

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-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-03 18:30:12 +08:00
const { eventKey } = this.$props
this.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,
}
}
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>