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

164 lines
3.8 KiB
Vue
Raw Normal View History

2017-12-12 05:49:02 +00:00
<script>
2018-02-06 09:22:36 +00:00
import PropTypes from '../_util/vue-types'
import KeyCode from '../_util/KeyCode'
2018-01-19 10:01:43 +00:00
// import { noop } from './util'
2018-02-06 09:22:36 +00:00
import BaseMixin from '../_util/BaseMixin'
2018-01-16 07:41:00 +00:00
const props = {
rootPrefixCls: PropTypes.string,
2018-02-22 04:07:37 +00:00
eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
2018-01-16 07:41:00 +00:00
active: PropTypes.bool,
selectedKeys: PropTypes.array,
disabled: PropTypes.bool,
title: PropTypes.string,
index: PropTypes.number,
inlineIndent: PropTypes.number.def(24),
level: PropTypes.number.def(1),
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
parentMenu: PropTypes.object,
2018-02-12 06:45:26 +00:00
multiple: PropTypes.bool,
2018-02-28 11:07:04 +00:00
value: PropTypes.any,
2018-01-17 08:12:53 +00:00
// clearSubMenuTimers: PropTypes.func.def(noop),
2018-01-16 07:41:00 +00:00
}
2017-12-12 05:49:02 +00:00
const MenuItem = {
name: 'MenuItem',
2018-01-16 07:41:00 +00:00
props,
2018-01-08 10:31:04 +00:00
inject: {
parentMenuContext: { default: undefined },
},
2018-01-12 08:10:41 +00:00
mixins: [BaseMixin],
2018-01-04 11:06:54 +00:00
isMenuItem: true,
2017-12-12 05:49:02 +00:00
beforeDestroy () {
const props = this.$props
2018-01-12 08:10:41 +00:00
this.__emit('destroy', props.eventKey)
2017-12-12 05:49:02 +00:00
},
methods: {
onKeyDown (e) {
const keyCode = e.keyCode
if (keyCode === KeyCode.ENTER) {
2018-02-09 10:42:19 +00:00
this.onClick(e)
2017-12-12 05:49:02 +00:00
return true
}
},
onMouseLeave (e) {
const { eventKey } = this.$props
2018-01-12 08:10:41 +00:00
this.__emit('itemHover', {
2017-12-12 05:49:02 +00:00
key: eventKey,
hover: false,
})
2018-01-12 08:10:41 +00:00
this.__emit('mouseleave', {
2017-12-12 05:49:02 +00:00
key: eventKey,
domEvent: e,
})
},
onMouseEnter (e) {
2018-01-17 08:12:53 +00:00
const { eventKey } = this
// if (parentMenuContext && parentMenuContext.subMenuInstance) {
// parentMenuContext.subMenuInstance.clearSubMenuTimers()
// }
2018-01-12 08:10:41 +00:00
this.__emit('itemHover', {
2017-12-12 05:49:02 +00:00
key: eventKey,
hover: true,
})
2018-01-12 08:10:41 +00:00
this.__emit('mouseenter', {
2017-12-12 05:49:02 +00:00
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,
}
2018-01-17 08:12:53 +00:00
2018-01-12 08:10:41 +00:00
this.__emit('click', info)
2017-12-12 05:49:02 +00:00
if (multiple) {
if (selected) {
2018-01-12 08:10:41 +00:00
this.__emit('deselect', info)
2017-12-12 05:49:02 +00:00
} else {
2018-01-12 08:10:41 +00:00
this.__emit('select', info)
2017-12-12 05:49:02 +00:00
}
} else if (!selected) {
2018-01-12 08:10:41 +00:00
this.__emit('select', info)
2017-12-12 05:49:02 +00:00
}
},
getPrefixCls () {
return `${this.$props.rootPrefixCls}-item`
},
getActiveClassName () {
return `${this.getPrefixCls()}-active`
},
getSelectedClassName () {
return `${this.getPrefixCls()}-selected`
},
getDisabledClassName () {
return `${this.getPrefixCls()}-disabled`
},
isSelected () {
2018-01-18 02:43:39 +00:00
return this.$props.selectedKeys && this.$props.selectedKeys.indexOf(this.$props.eventKey) !== -1
2017-12-12 05:49:02 +00:00
},
},
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 = {}
2018-01-17 08:12:53 +00:00
2017-12-12 05:49:02 +00:00
if (!props.disabled) {
mouseEvent = {
click: this.onClick,
mouseleave: this.onMouseLeave,
mouseenter: this.onMouseEnter,
}
}
2018-01-08 10:31:04 +00:00
2017-12-12 05:49:02 +00:00
const style = {}
if (props.mode === 'inline') {
style.paddingLeft = `${props.inlineIndent * props.level}px`
}
const liProps = {
attrs,
on: {
2017-12-29 10:45:11 +00:00
...mouseEvent,
2017-12-12 05:49:02 +00:00
},
}
return (
<li
{...liProps}
style={style}
class={className}
>
{this.$slots.default}
</li>
)
},
}
export default MenuItem
2018-01-16 07:41:00 +00:00
export { props as menuItemProps }
2017-12-12 05:49:02 +00:00
</script>