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

194 lines
5.0 KiB
Vue
Raw Normal View History

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>