element-plus/packages/components/menu/src/menu.vue

323 lines
7.6 KiB
Vue
Raw Normal View History

2020-11-12 14:43:55 +08:00
<template>
<el-menu-collapse-transition v-if="collapseTransition">
2020-11-12 14:43:55 +08:00
<ul
:key="+collapse"
2020-11-12 14:43:55 +08:00
role="menubar"
:style="{ backgroundColor: backgroundColor || '' }"
2020-11-12 14:43:55 +08:00
:class="{
'el-menu': true,
'el-menu--horizontal': mode === 'horizontal',
'el-menu--collapse': collapse,
2020-11-12 14:43:55 +08:00
}"
>
<slot></slot>
</ul>
</el-menu-collapse-transition>
<ul
v-else
:key="+collapse"
2020-11-12 14:43:55 +08:00
role="menubar"
:style="{ backgroundColor: backgroundColor || '' }"
2020-11-12 14:43:55 +08:00
:class="{
'el-menu': true,
'el-menu--horizontal': mode === 'horizontal',
'el-menu--collapse': collapse,
2020-11-12 14:43:55 +08:00
}"
>
<slot></slot>
</ul>
</template>
<script lang="ts">
import {
defineComponent,
getCurrentInstance,
watch,
computed,
ref,
provide,
Ref,
onMounted,
ComputedRef,
isRef,
2020-11-12 14:43:55 +08:00
} from 'vue'
import mitt from 'mitt'
import Menubar from '@element-plus/utils/menu/menu-bar'
2020-11-12 14:43:55 +08:00
import {
IMenuProps,
RootMenuProvider,
RegisterMenuItem,
SubMenuProvider,
} from './menu'
import ElMenuCollapseTransition from './menu-collapse-transition.vue'
import useMenuColor from './useMenuColor'
export default defineComponent({
name: 'ElMenu',
componentName: 'ElMenu',
components: {
ElMenuCollapseTransition,
},
props: {
mode: {
type: String,
default: 'vertical',
},
defaultActive: {
type: String,
default: '',
},
defaultOpeneds: Array,
uniqueOpened: Boolean,
router: Boolean,
menuTrigger: {
type: String,
default: 'hover',
},
collapse: Boolean,
backgroundColor: { type: String },
textColor: { type: String },
activeTextColor: { type: String },
collapseTransition: {
type: Boolean,
default: true,
},
},
emits: ['close', 'open', 'select'],
setup(props: IMenuProps, ctx) {
// data
const openedMenus = ref(
props.defaultOpeneds && !props.collapse
? props.defaultOpeneds.slice(0)
: [],
)
const instance = getCurrentInstance()
const activeIndex = ref(props.defaultActive)
const items = ref({})
const submenus = ref({})
const alteredCollapse = ref(false)
const rootMenuEmitter = mitt()
const router = instance.appContext.config.globalProperties.$router
2020-11-12 14:43:55 +08:00
const hoverBackground = useMenuColor(props)
2020-11-12 14:43:55 +08:00
// computed
const isMenuPopup = computed(() => {
return (
props.mode === 'horizontal' ||
(props.mode === 'vertical' && props.collapse)
)
})
// methods
const initializeMenu = () => {
const index = activeIndex.value
const activeItem = items.value[index]
if (!activeItem || props.mode === 'horizontal' || props.collapse) return
let indexPath = activeItem.indexPath
// 展开该菜单项的路径上所有子菜单
// expand all submenus of the menu item
indexPath.forEach(index => {
let submenu = submenus.value[index]
submenu && openMenu(index, submenu?.indexPath)
})
}
const addSubMenu = (item: RegisterMenuItem) => {
submenus.value[item.index] = item
}
const removeSubMenu = (item: RegisterMenuItem) => {
delete submenus.value[item.index]
}
const addMenuItem = (item: RegisterMenuItem) => {
items.value[item.index] = item
}
const removeMenuItem = (item: RegisterMenuItem) => {
delete items.value[item.index]
}
const openMenu = (index: string, indexPath?: Ref<string[]> | string[]) => {
2020-11-12 14:43:55 +08:00
if (openedMenus.value.includes(index)) return
// 将不在该菜单路径下的其余菜单收起
// collapse all menu that are not under current menu item
if (props.uniqueOpened) {
openedMenus.value = openedMenus.value.filter((index: string) => {
return (
(isRef(indexPath) ? indexPath.value : indexPath).indexOf(index) !==
-1
)
2020-11-12 14:43:55 +08:00
})
}
openedMenus.value.push(index)
}
const closeMenu = index => {
const i = openedMenus.value.indexOf(index)
if (i !== -1) {
openedMenus.value.splice(i, 1)
}
}
const open = index => {
const { indexPath } = submenus.value[index.toString()]
2020-11-12 14:43:55 +08:00
indexPath.forEach(i => openMenu(i, indexPath))
}
const close = index => {
closeMenu(index)
}
const handleSubMenuClick = submenu => {
2020-11-12 14:43:55 +08:00
const { index, indexPath } = submenu
let isOpened = openedMenus.value.includes(index)
if (isOpened) {
closeMenu(index)
ctx.emit('close', index, indexPath.value)
2020-11-12 14:43:55 +08:00
} else {
openMenu(index, indexPath)
ctx.emit('open', index, indexPath.value)
2020-11-12 14:43:55 +08:00
}
}
const handleItemClick = (item: {
index: string
indexPath: ComputedRef<string[]>
route?: any
}) => {
const { index, indexPath } = item
const hasIndex = item.index !== null
const emitParams = [index, indexPath.value, item]
2020-11-12 14:43:55 +08:00
if (props.mode === 'horizontal' || props.collapse) {
openedMenus.value = []
}
if (!hasIndex) {
return
}
if (props.router && router) {
let route = item.route || item.index
const routerResult = router
.push(route)
.then(navigationResult => {
if (!navigationResult) {
activeIndex.value = item.index
}
return navigationResult
})
ctx.emit('select', ...emitParams.concat(routerResult))
} else {
activeIndex.value = item.index
ctx.emit('select', ...emitParams)
}
}
2020-11-12 14:43:55 +08:00
const updateActiveIndex = (val?: string) => {
const itemsInData = items.value
const item =
itemsInData[val] ||
itemsInData[activeIndex.value] ||
itemsInData[props.defaultActive]
if (item) {
activeIndex.value = item.index
initializeMenu()
} else {
// Can't find item when collapsing
// and activeIndex shouldn't be changed when 'collapse' was changed.
// Then reset 'alteredCollapse' immediately.
if (!alteredCollapse.value) {
activeIndex.value = null
} else {
alteredCollapse.value = false
}
}
}
// watch
watch(
() => props.defaultActive,
currentActive => {
if (!items.value[currentActive]) {
2020-11-12 14:43:55 +08:00
activeIndex.value = ''
}
updateActiveIndex(currentActive)
},
)
watch(items.value, () => {
updateActiveIndex()
})
watch(
() => props.collapse,
(value, prev) => {
if (value !== prev) {
alteredCollapse.value = true
}
if (value) openedMenus.value = []
rootMenuEmitter.emit(
'rootMenu:toggle-collapse',
Boolean(props.collapse),
)
},
)
// provide
provide<RootMenuProvider>('rootMenu', {
props,
openedMenus,
items,
submenus,
hoverBackground,
activeIndex,
isMenuPopup,
methods: {
addMenuItem,
removeMenuItem,
addSubMenu,
removeSubMenu,
openMenu,
closeMenu,
},
rootMenuEmit: rootMenuEmitter.emit,
rootMenuOn: rootMenuEmitter.on,
})
provide<SubMenuProvider>(`subMenu:${instance.uid}`, {
addSubMenu,
removeSubMenu,
})
// lifecycle
onMounted(() => {
initializeMenu()
rootMenuEmitter.on('menuItem:item-click', handleItemClick)
rootMenuEmitter.on('submenu:submenu-click', handleSubMenuClick)
2020-11-12 14:43:55 +08:00
if (props.mode === 'horizontal') {
new Menubar(instance.vnode.el)
}
})
return {
hoverBackground,
isMenuPopup,
props,
open,
close,
}
},
})
</script>