From 0681b5e1589e60b963a54d961943605e54020a59 Mon Sep 17 00:00:00 2001 From: wuls Date: Tue, 1 Dec 2020 07:41:40 +0800 Subject: [PATCH] fix: it was work when it was proxy and ctx --- packages/menu/Menu.vue | 8 ++--- packages/menu/MenuItem.vue | 20 +++++------ packages/menu/MenuItemGroup.vue | 2 +- packages/menu/Submenu.vue | 63 +++++++++++++++++---------------- packages/menu/src/menu-use.js | 16 ++++----- 5 files changed, 55 insertions(+), 54 deletions(-) diff --git a/packages/menu/Menu.vue b/packages/menu/Menu.vue index 334adccd6..a27b40f08 100644 --- a/packages/menu/Menu.vue +++ b/packages/menu/Menu.vue @@ -110,7 +110,7 @@ export default { items[val] || items[activeIndex.value] || items[defaultActive.value] item = itemsInstance[item] if (item) { - activeIndex.value = item.ctx.index + activeIndex.value = item.props.index initOpenedMenu() } else { activeIndex.value = null @@ -211,12 +211,12 @@ export default { const index = activeIndex.value const activeItem = itemsInstance[index] if (!activeItem || mode.value === 'horizontal' || collapse.value) return - const indexPath = activeItem.ctx.indexPath + const indexPath = activeItem.setupState.indexPath // 展开该菜单项的路径上所有子菜单 // expand all submenus of the menu item indexPath.forEach((index) => { const submenu = submenusInstance[index] - submenu && openMenu(index, submenu.ctx.indexPath) + submenu && openMenu(index, submenu.setupState.indexPath) }) } const routeToItem = (item, onError) => { @@ -263,7 +263,7 @@ export default { on('item-click', handleItemClick) on('submenu-click', handleSubmenuClick) if (mode.value === 'horizontal') { - new Menubar(instance.ctx.$el) + new Menubar(instance.vnode.el) } watch(items, updateActiveIndex) }) diff --git a/packages/menu/MenuItem.vue b/packages/menu/MenuItem.vue index 7a84da36b..48aa3a20d 100644 --- a/packages/menu/MenuItem.vue +++ b/packages/menu/MenuItem.vue @@ -84,23 +84,23 @@ export default { const instance = getCurrentInstance() const { dispatch } = useEmitter() const active = computed(() => { - return index.value === rootMenu.ctx.activeIndex + return index.value === rootMenu.props.activeIndex }) const hoverBackground = computed(() => { - return rootMenu.ctx.hoverBackground + return rootMenu.props.hoverBackground }) const backgroundColor = computed(() => { - return rootMenu.ctx.backgroundColor || '' + return rootMenu.props.backgroundColor || '' }) const itemBackgroundColor = ref(backgroundColor.value) const activeTextColor = computed(() => { - return rootMenu.ctx.activeTextColor || '' + return rootMenu.props.activeTextColor || '' }) const textColor = computed(() => { - return rootMenu.ctx.textColor || '' + return rootMenu.props.textColor || '' }) const mode = computed(() => { - return rootMenu.ctx.mode + return rootMenu.props.mode }) const isNested = computed(() => { return parentMenu !== rootMenu @@ -132,12 +132,12 @@ export default { } } onMounted(() => { - parentMenu.value.ctx.addItem(instance) - rootMenu.ctx.addItem(instance) + parentMenu.value.setupState.addItem(instance) + rootMenu.setupState.addItem(instance) }) onBeforeUnmount(() => { - parentMenu.value.ctx.removeItem(instance) - rootMenu.ctx.removeItem(instance) + parentMenu.value.setupState.removeItem(instance) + rootMenu.setupState.removeItem(instance) }) return { paddingStyle, diff --git a/packages/menu/MenuItemGroup.vue b/packages/menu/MenuItemGroup.vue index 12b9b9eb5..9de90c8b5 100644 --- a/packages/menu/MenuItemGroup.vue +++ b/packages/menu/MenuItemGroup.vue @@ -30,7 +30,7 @@ export default { const levelPadding = computed(() => { let padding = 20 let parent = instance.parent - if (rootMenu.ctx.collapse) return 20 + if (rootMenu.props.collapse) return 20 while (parent && parent.type.name !== 'ElMenu') { if (parent.type.name === 'ElSubmenu') { padding += 20 diff --git a/packages/menu/Submenu.vue b/packages/menu/Submenu.vue index 1ccfac187..534b2c5d0 100644 --- a/packages/menu/Submenu.vue +++ b/packages/menu/Submenu.vue @@ -92,9 +92,9 @@ export default { } const handleClick = () => { if ( - (rootMenu.ctx.menuTrigger === 'hover' && - rootMenu.ctx.mode === 'horizontal') || - (rootMenu.ctx.collapse && rootMenu.ctx.mode === 'vertical') || + (rootMenu.props.menuTrigger === 'hover' && + rootMenu.props.mode === 'horizontal') || + (rootMenu.props.collapse && rootMenu.props.mode === 'vertical') || disabled.value ) { return @@ -110,9 +110,9 @@ export default { return } if ( - (rootMenu.ctx.menuTrigger === 'click' && - rootMenu.ctx.mode === 'horizontal') || - (!rootMenu.ctx.collapse && rootMenu.ctx.mode === 'vertical') || + (rootMenu.props.menuTrigger === 'click' && + rootMenu.props.mode === 'horizontal') || + (!rootMenu.props.collapse && rootMenu.props.mode === 'vertical') || disabled.value ) { return @@ -120,29 +120,29 @@ export default { dispatch('mouse-enter-child') clearTimeout(timeout.value) timeout.value = setTimeout(() => { - rootMenu.ctx.openMenu(index.value, indexPath) + rootMenu.setupState.openMenu(index.value, indexPath) }, delay) if (appendToBody.value) { - instance.parent.ctx.$el.dispatchEvent(new MouseEvent('mouseenter')) + instance.parent.vnode.el.dispatchEvent(new MouseEvent('mouseenter')) } } const handleMouseleave = (deepDispatch = false) => { if ( - (rootMenu.ctx.menuTrigger === 'click' && - rootMenu.ctx.mode === 'horizontal') || - (!rootMenu.ctx.collapse && rootMenu.ctx.mode === 'vertical') + (rootMenu.props.menuTrigger === 'click' && + rootMenu.props.mode === 'horizontal') || + (!rootMenu.props.collapse && rootMenu.props.mode === 'vertical') ) { return } dispatch('mouse-leave-child') clearTimeout(timeout.value) timeout.value = setTimeout(() => { - !mouseInChild.value && rootMenu.ctx.closeMenu(index.value) + !mouseInChild.value && rootMenu.setupState.closeMenu(index.value) }, hideTimeout.value) if (appendToBody.value && deepDispatch) { if (parentMenu.value && parentMenu.value.type.name === 'ElSubmenu') { - parentMenu.value.ctx.handleMouseleave(true) + parentMenu.value.setupState.handleMouseleave(true) } } } @@ -172,7 +172,7 @@ export default { : 'right-start' } const initPopper = () => { - referenceElm.value = instance.ctx.$el + referenceElm.value = instance.vnode.el popperElm.value = menu.value updatePlacement() } @@ -182,45 +182,45 @@ export default { : popperAppendToBody.value }) const menuTransitionName = computed(() => { - return rootMenu.ctx.collapse ? 'el-zoom-in-left' : 'el-zoom-in-top' + return rootMenu.props.collapse ? 'el-zoom-in-left' : 'el-zoom-in-top' }) - watch(rootMenu.ctx.openedMenus, (val) => { + watch(rootMenu.setupState.openedMenus, (val) => { showPopper.value = val.indexOf(index.value) > -1 }) const active = computed(() => { let isActive = false Object.keys(items).forEach((index) => { - if (itemsInstance[index].ctx.active) { + if (itemsInstance[index].props.active) { isActive = true } }) Object.keys(submenus).forEach((index) => { - if (submenusInstance[index].ctx.active) { + if (submenusInstance[index].props.active) { isActive = true } }) return isActive }) const hoverBackground = computed(() => { - return rootMenu.ctx.hoverBackground + return rootMenu.setupState.hoverBackground }) const backgroundColor = computed(() => { - return rootMenu.ctx.backgroundColor || '' + return rootMenu.props.backgroundColor || '' }) const titleBackground = ref(backgroundColor.value) const activeTextColor = computed(() => { - return rootMenu.ctx.activeTextColor || '' + return rootMenu.props.activeTextColor || '' }) const textColor = computed(() => { - return rootMenu.ctx.textColor || '' + return rootMenu.props.textColor || '' }) const mode = computed(() => { - return rootMenu.ctx.mode + return rootMenu.props.mode }) const isMenuPopup = computed(() => { - return rootMenu.ctx.isMenuPopup + return rootMenu.setupState.isMenuPopup }) const titleStyle = computed(() => { if (mode.value !== 'horizontal') { @@ -256,15 +256,16 @@ export default { }) onMounted(() => { - parentMenu.value.ctx.addSubmenu(instance) - rootMenu.ctx.addSubmenu(instance) + parentMenu.value.setupState.addSubmenu(instance) + rootMenu.setupState.addSubmenu(instance) initPopper() - showPopper.value = rootMenu.ctx.openedMenus.indexOf(index.value) > -1 + showPopper.value = + rootMenu.setupState.openedMenus.indexOf(index.value) > -1 }) onBeforeUnmount(() => { - parentMenu.value.ctx.removeSubmenu(instance) - rootMenu.ctx.removeSubmenu(instance) + parentMenu.value.setupState.removeSubmenu(instance) + rootMenu.setupState.removeSubmenu(instance) }) return { active, @@ -351,8 +352,8 @@ export default { ) const submenuTitleIcon = - (rootMenu.ctx.mode === 'horizontal' && isFirstLevel) || - (rootMenu.ctx.mode === 'vertical' && !rootMenu.ctx.collapse) + (rootMenu.props.mode === 'horizontal' && isFirstLevel) || + (rootMenu.props.mode === 'vertical' && !rootMenu.props.collapse) ? 'el-icon-arrow-down' : 'el-icon-arrow-right' return ( diff --git a/packages/menu/src/menu-use.js b/packages/menu/src/menu-use.js index b7cbb229f..8ea9889c7 100644 --- a/packages/menu/src/menu-use.js +++ b/packages/menu/src/menu-use.js @@ -7,8 +7,8 @@ function useMenu(index) { const path = [index] let p = parent while (p.type.name !== 'ElMenu') { - if (p.ctx.index) { - path.unshift(p.ctx.index) + if (p.props.index) { + path.unshift(p.props.index) } p = p.parent } @@ -22,10 +22,10 @@ function useMenu(index) { return p }) const paddingStyle = computed(() => { - if (rootMenu.ctx.mode !== 'vertical') return {} + if (rootMenu.props.mode !== 'vertical') return {} let padding = 20 let p = parent - if (rootMenu.ctx.collapse) { + if (rootMenu.props.collapse) { padding = 20 } else { while (p && p.type.name !== 'ElMenu') { @@ -50,22 +50,22 @@ function useItems() { const submenus = reactive({}) const submenusInstance = {} const addItem = (item) => { - let index = item.ctx.index + let index = item.props.index items[index] = index itemsInstance[index] = item } const removeItem = (item) => { - let index = item.ctx.index + let index = item.props.index delete items[index] delete itemsInstance[index] } const addSubmenu = (item) => { - let index = item.ctx.index + let index = item.props.index submenus[index] = index submenusInstance[index] = item } const removeSubmenu = (item) => { - let index = item.ctx.index + let index = item.props.index delete submenus[index] delete submenusInstance[index] }