2017-12-12 13:49:02 +08:00
|
|
|
<script>
|
2018-02-06 17:22:36 +08:00
|
|
|
import PropTypes from '../_util/vue-types'
|
2017-12-12 13:49:02 +08:00
|
|
|
import MenuMixin from './MenuMixin'
|
2018-02-06 17:22:36 +08:00
|
|
|
import BaseMixin from '../_util/BaseMixin'
|
|
|
|
import hasProp from '../_util/props-util'
|
2018-01-04 19:06:54 +08:00
|
|
|
import commonPropsType from './commonPropsType'
|
2017-12-12 13:49:02 +08:00
|
|
|
|
|
|
|
const Menu = {
|
|
|
|
name: 'Menu',
|
|
|
|
props: {
|
2018-01-04 19:06:54 +08:00
|
|
|
...commonPropsType,
|
2018-01-19 18:18:17 +08:00
|
|
|
selectable: PropTypes.bool.def(true),
|
2017-12-12 13:49:02 +08:00
|
|
|
},
|
2018-01-12 16:10:41 +08:00
|
|
|
mixins: [BaseMixin, MenuMixin],
|
2017-12-12 13:49:02 +08:00
|
|
|
|
|
|
|
data () {
|
|
|
|
const props = this.$props
|
2018-01-02 19:05:02 +08:00
|
|
|
let sSelectedKeys = props.defaultSelectedKeys
|
|
|
|
let sOpenKeys = props.defaultOpenKeys
|
2018-01-08 18:31:04 +08:00
|
|
|
if (hasProp(this, 'selectedKeys')) {
|
|
|
|
sSelectedKeys = props.selectedKeys || []
|
|
|
|
}
|
|
|
|
if (hasProp(this, 'openKeys')) {
|
|
|
|
sOpenKeys = props.openKeys || []
|
|
|
|
}
|
|
|
|
|
2018-01-30 17:13:44 +08:00
|
|
|
// this.isRootMenu = true
|
2017-12-12 13:49:02 +08:00
|
|
|
return {
|
2018-01-02 19:05:02 +08:00
|
|
|
sSelectedKeys,
|
|
|
|
sOpenKeys,
|
2017-12-12 13:49:02 +08:00
|
|
|
}
|
|
|
|
},
|
2017-12-27 18:15:11 +08:00
|
|
|
watch: {
|
|
|
|
'$props': {
|
|
|
|
handler: function (nextProps) {
|
2018-01-08 18:31:04 +08:00
|
|
|
if (hasProp(this, 'selectedKeys')) {
|
2018-01-29 19:02:18 +08:00
|
|
|
this.setState({
|
|
|
|
sSelectedKeys: nextProps.selectedKeys || [],
|
|
|
|
})
|
2017-12-27 18:15:11 +08:00
|
|
|
}
|
2018-01-17 19:15:18 +08:00
|
|
|
if (hasProp(this, 'openKeys')) {
|
2018-01-29 19:02:18 +08:00
|
|
|
this.setState({
|
|
|
|
sOpenKeys: nextProps.openKeys || [],
|
|
|
|
})
|
2017-12-27 18:15:11 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
deep: true,
|
|
|
|
},
|
2017-12-12 13:49:02 +08:00
|
|
|
},
|
|
|
|
methods: {
|
2018-01-17 16:12:53 +08:00
|
|
|
// onDestroy (key) {
|
|
|
|
// const state = this.$data
|
|
|
|
// const sSelectedKeys = state.sSelectedKeys
|
|
|
|
// const sOpenKeys = state.sOpenKeys
|
|
|
|
// let index = sSelectedKeys.indexOf(key)
|
|
|
|
// if (!hasProp(this, 'selectedKeys') && index !== -1) {
|
|
|
|
// sSelectedKeys.splice(index, 1)
|
|
|
|
// }
|
|
|
|
// index = sOpenKeys.indexOf(key)
|
|
|
|
// if (!hasProp(this, 'openKeys') && index !== -1) {
|
|
|
|
// sOpenKeys.splice(index, 1)
|
|
|
|
// }
|
|
|
|
// },
|
2017-12-12 13:49:02 +08:00
|
|
|
|
|
|
|
onSelect (selectInfo) {
|
|
|
|
const props = this.$props
|
|
|
|
if (props.selectable) {
|
|
|
|
// root menu
|
2018-01-02 19:05:02 +08:00
|
|
|
let sSelectedKeys = this.$data.sSelectedKeys
|
2017-12-12 13:49:02 +08:00
|
|
|
const selectedKey = selectInfo.key
|
|
|
|
if (props.multiple) {
|
2018-01-02 19:05:02 +08:00
|
|
|
sSelectedKeys = sSelectedKeys.concat([selectedKey])
|
2017-12-12 13:49:02 +08:00
|
|
|
} else {
|
2018-01-02 19:05:02 +08:00
|
|
|
sSelectedKeys = [selectedKey]
|
2017-12-12 13:49:02 +08:00
|
|
|
}
|
2018-01-02 19:05:02 +08:00
|
|
|
if (!hasProp(this, 'selectedKeys')) {
|
2017-12-12 13:49:02 +08:00
|
|
|
this.setState({
|
2018-01-02 19:05:02 +08:00
|
|
|
sSelectedKeys,
|
2017-12-12 13:49:02 +08:00
|
|
|
})
|
|
|
|
}
|
2018-01-12 16:10:41 +08:00
|
|
|
this.__emit('select', {
|
2017-12-12 13:49:02 +08:00
|
|
|
...selectInfo,
|
2018-01-17 19:15:18 +08:00
|
|
|
selectedKeys: sSelectedKeys,
|
2017-12-12 13:49:02 +08:00
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onClick (e) {
|
2018-01-12 16:10:41 +08:00
|
|
|
this.__emit('click', e)
|
2017-12-12 13:49:02 +08:00
|
|
|
},
|
|
|
|
|
2018-01-17 16:12:53 +08:00
|
|
|
onOpenChange (event) {
|
2018-01-02 19:05:02 +08:00
|
|
|
const sOpenKeys = this.$data.sOpenKeys.concat()
|
2017-12-12 13:49:02 +08:00
|
|
|
let changed = false
|
|
|
|
const processSingle = (e) => {
|
|
|
|
let oneChanged = false
|
|
|
|
if (e.open) {
|
2018-01-02 19:05:02 +08:00
|
|
|
oneChanged = sOpenKeys.indexOf(e.key) === -1
|
2017-12-12 13:49:02 +08:00
|
|
|
if (oneChanged) {
|
2018-01-02 19:05:02 +08:00
|
|
|
sOpenKeys.push(e.key)
|
2017-12-12 13:49:02 +08:00
|
|
|
}
|
|
|
|
} else {
|
2018-01-02 19:05:02 +08:00
|
|
|
const index = sOpenKeys.indexOf(e.key)
|
2017-12-12 13:49:02 +08:00
|
|
|
oneChanged = index !== -1
|
|
|
|
if (oneChanged) {
|
2018-01-02 19:05:02 +08:00
|
|
|
sOpenKeys.splice(index, 1)
|
2017-12-12 13:49:02 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
changed = changed || oneChanged
|
|
|
|
}
|
2018-01-17 16:12:53 +08:00
|
|
|
if (Array.isArray(event)) {
|
2017-12-12 13:49:02 +08:00
|
|
|
// batch change call
|
2018-01-17 16:12:53 +08:00
|
|
|
event.forEach(processSingle)
|
2017-12-12 13:49:02 +08:00
|
|
|
} else {
|
2018-01-17 16:12:53 +08:00
|
|
|
processSingle(event)
|
2017-12-12 13:49:02 +08:00
|
|
|
}
|
|
|
|
if (changed) {
|
2018-01-02 19:05:02 +08:00
|
|
|
if (!hasProp(this, 'openKeys')) {
|
|
|
|
this.setState({ sOpenKeys })
|
2017-12-12 13:49:02 +08:00
|
|
|
}
|
2018-01-12 16:10:41 +08:00
|
|
|
this.__emit('openChange', sOpenKeys)
|
2017-12-12 13:49:02 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onDeselect (selectInfo) {
|
|
|
|
const props = this.$props
|
|
|
|
if (props.selectable) {
|
2018-01-02 19:05:02 +08:00
|
|
|
const sSelectedKeys = this.$data.sSelectedKeys.concat()
|
2017-12-12 13:49:02 +08:00
|
|
|
const selectedKey = selectInfo.key
|
2018-01-02 19:05:02 +08:00
|
|
|
const index = sSelectedKeys.indexOf(selectedKey)
|
2017-12-12 13:49:02 +08:00
|
|
|
if (index !== -1) {
|
2018-01-02 19:05:02 +08:00
|
|
|
sSelectedKeys.splice(index, 1)
|
2017-12-12 13:49:02 +08:00
|
|
|
}
|
2018-01-02 19:05:02 +08:00
|
|
|
if (!hasProp(this, 'selectedKeys')) {
|
2017-12-12 13:49:02 +08:00
|
|
|
this.setState({
|
2018-01-02 19:05:02 +08:00
|
|
|
sSelectedKeys,
|
2017-12-12 13:49:02 +08:00
|
|
|
})
|
|
|
|
}
|
2018-01-12 16:10:41 +08:00
|
|
|
this.__emit('deselect', {
|
2017-12-12 13:49:02 +08:00
|
|
|
...selectInfo,
|
2018-01-17 19:15:18 +08:00
|
|
|
selectedKeys: sSelectedKeys,
|
2017-12-12 13:49:02 +08:00
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
getOpenTransitionName () {
|
|
|
|
const props = this.$props
|
|
|
|
let transitionName = props.openTransitionName
|
|
|
|
const animationName = props.openAnimation
|
|
|
|
if (!transitionName && typeof animationName === 'string') {
|
|
|
|
transitionName = `${props.prefixCls}-open-${animationName}`
|
|
|
|
}
|
|
|
|
return transitionName
|
|
|
|
},
|
|
|
|
|
|
|
|
isInlineMode () {
|
|
|
|
return this.$props.mode === 'inline'
|
|
|
|
},
|
|
|
|
|
|
|
|
lastOpenSubMenu () {
|
|
|
|
let lastOpen = []
|
2018-01-02 19:05:02 +08:00
|
|
|
const { sOpenKeys } = this.$data
|
|
|
|
if (sOpenKeys.length) {
|
2017-12-12 13:49:02 +08:00
|
|
|
lastOpen = this.getFlatInstanceArray().filter((c) => {
|
2018-01-09 14:21:15 +08:00
|
|
|
return c && sOpenKeys.indexOf(c.eventKey) !== -1
|
2017-12-12 13:49:02 +08:00
|
|
|
})
|
|
|
|
}
|
|
|
|
return lastOpen[0]
|
|
|
|
},
|
|
|
|
|
|
|
|
renderMenuItem (c, i, subIndex) {
|
|
|
|
if (!c) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
const state = this.$data
|
|
|
|
const extraProps = {
|
2018-01-02 19:05:02 +08:00
|
|
|
openKeys: state.sOpenKeys,
|
|
|
|
selectedKeys: state.sSelectedKeys,
|
2017-12-12 13:49:02 +08:00
|
|
|
triggerSubMenuAction: this.$props.triggerSubMenuAction,
|
2018-01-30 17:13:44 +08:00
|
|
|
isRootMenu: this.isRootMenu,
|
2017-12-12 13:49:02 +08:00
|
|
|
}
|
|
|
|
return this.renderCommonMenuItem(c, i, subIndex, extraProps)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const props = { ...this.$props }
|
2018-01-02 19:05:02 +08:00
|
|
|
props.class = ` ${props.prefixCls}-root`
|
2018-01-03 18:30:12 +08:00
|
|
|
return this.renderRoot(props, this.$slots.default)
|
2017-12-12 13:49:02 +08:00
|
|
|
},
|
|
|
|
}
|
|
|
|
export default Menu
|
|
|
|
</script>
|