Skip to content

Commit

Permalink
fix: it was work when it was proxy and ctx
Browse files Browse the repository at this point in the history
  • Loading branch information
wuls committed Nov 30, 2020
1 parent a2ea957 commit 0681b5e
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 54 deletions.
8 changes: 4 additions & 4 deletions packages/menu/Menu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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)
})
Expand Down
20 changes: 10 additions & 10 deletions packages/menu/MenuItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/menu/MenuItemGroup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
63 changes: 32 additions & 31 deletions packages/menu/Submenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -110,39 +110,39 @@ 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
}
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)
}
}
}
Expand Down Expand Up @@ -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()
}
Expand All @@ -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') {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -351,8 +352,8 @@ export default {
</el-collapse-transition>
)
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 (
Expand Down
16 changes: 8 additions & 8 deletions packages/menu/src/menu-use.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand All @@ -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') {
Expand All @@ -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]
}
Expand Down

0 comments on commit 0681b5e

Please sign in to comment.