mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(dropdown): placement bugs

Browse Source
This commit is contained in:
07akioni 2020-03-06 19:54:45 +08:00
parent a1fc67b1f0
commit 8c646d5a8a
5 changed files with 52 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/Dropdown/src/DropdownSubmenu.vue
View File

@ -168,11 +168,16 @@ export default {
this.vanishTimerId = window.setTimeout(() => {
this.menuActivated = false
}, this.duration)
},
getAbsoluteOffsetContainer () {
return this.$el.parentElement
},
getTrackedElement () {
return this.$el.parentElement
}
},
render (h) {
return h('div', {
ref: 'activator',
staticClass: 'n-dropdown-item n-dropdown-item--as-submenu',
on: {
mouseenter: this.handleMouseEnter,
@ -189,13 +194,16 @@ export default {
h(iosArrowForward)
]) : null
]),
h('div', {
ref: 'content',
staticClass: 'n-dropdown-menu-wrapper'
}, [
h('transition', {
props: {
name: 'n-dropdown-menu-transition'
}
}, [
this.active ? h(NDropdownMenu, {
ref: 'content',
staticClass: 'n-dropdown-submenu',
style: this.style,
props: {
@ -207,6 +215,7 @@ export default {
}) : null
])
])
])
}
}
</script>

1
src/_utils/component/dropdown.js
View File

@ -46,7 +46,6 @@ function createSelectOptionsFromDropdownOptions (dropdownOptions, DropdownSubmen
selectOptions.push(createSelectOptionForDropdownDivider(option, DropdownDivider))
}
})
console.log('createSelectOptionsFromDropdownOptions', selectOptions)
return selectOptions
}

50
src/_utils/dom/calcPlacementTransform.js
View File

@ -73,7 +73,7 @@ export function getTransformOriginByPlacement (placement) {
return placementToTransformOrigin[placement] || null
}
export function getPosition (placement, offsetContainerRect, activatorRect) {
export function getPosition (placement, offsetContainerRect, trackedRect) {
const offset = {
top: null,
bottom: null,
@ -82,50 +82,50 @@ export function getPosition (placement, offsetContainerRect, activatorRect) {
transform: null
}
if (placement === 'bottom-start') {
offset.top = (activatorRect.top - offsetContainerRect.top + activatorRect.height) + 'px'
offset.left = (activatorRect.left - offsetContainerRect.left) + 'px'
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left) + 'px'
} else if (placement === 'bottom-end') {
offset.top = (activatorRect.top - offsetContainerRect.top + activatorRect.height) + 'px'
offset.left = (activatorRect.left - offsetContainerRect.left + activatorRect.width) + 'px'
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width) + 'px'
offset.transform = 'translateX(-100%)'
} else if (placement === 'top-start') {
offset.top = (activatorRect.top - offsetContainerRect.top) + 'px'
offset.left = (activatorRect.left - offsetContainerRect.left) + 'px'
offset.top = (trackedRect.top - offsetContainerRect.top) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left) + 'px'
offset.transform = 'translateY(-100%)'
} else if (placement === 'top-end') {
offset.top = (activatorRect.top - offsetContainerRect.top) + 'px'
offset.left = (activatorRect.left - offsetContainerRect.left + activatorRect.width) + 'px'
offset.top = (trackedRect.top - offsetContainerRect.top) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width) + 'px'
offset.transform = 'translateY(-100%) translateX(-100%)'
} else if (placement === 'right-start') {
offset.top = (activatorRect.top - offsetContainerRect.top) + 'px'
offset.left = (activatorRect.left - offsetContainerRect.left + activatorRect.width) + 'px'
offset.top = (trackedRect.top - offsetContainerRect.top) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width) + 'px'
} else if (placement === 'right-end') {
offset.top = (activatorRect.top - offsetContainerRect.top + activatorRect.height) + 'px'
offset.left = (activatorRect.left - offsetContainerRect.left + activatorRect.width) + 'px'
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width) + 'px'
offset.transform = 'translateY(-100%)'
} else if (placement === 'left-start') {
offset.top = (activatorRect.top - offsetContainerRect.top) + 'px'
offset.left = (activatorRect.left - offsetContainerRect.left) + 'px'
offset.top = (trackedRect.top - offsetContainerRect.top) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left) + 'px'
offset.transform = 'translateX(-100%)'
} else if (placement === 'left-end') {
offset.top = (activatorRect.top - offsetContainerRect.top + activatorRect.height) + 'px'
offset.left = (activatorRect.left - offsetContainerRect.left) + 'px'
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left) + 'px'
offset.transform = 'translateX(-100%) translateY(-100%)'
} else if (placement === 'top') {
offset.top = (activatorRect.top - offsetContainerRect.top) + 'px'
offset.left = (activatorRect.left - offsetContainerRect.left + activatorRect.width / 2) + 'px'
offset.top = (trackedRect.top - offsetContainerRect.top) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width / 2) + 'px'
offset.transform = 'translateX(-50%) translateY(-100%)'
} else if (placement === 'right') {
offset.top = (activatorRect.top - offsetContainerRect.top + activatorRect.height / 2) + 'px'
offset.left = (activatorRect.left - offsetContainerRect.left + activatorRect.width) + 'px'
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height / 2) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width) + 'px'
offset.transform = 'translateY(-50%)'
} else if (placement === 'bottom') {
offset.top = (activatorRect.top - offsetContainerRect.top + activatorRect.height) + 'px'
offset.left = (activatorRect.left - offsetContainerRect.left + activatorRect.width / 2) + 'px'
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width / 2) + 'px'
offset.transform = 'translateX(-50%)'
} else if (placement === 'left') {
offset.top = (activatorRect.top - offsetContainerRect.top + activatorRect.height / 2) + 'px'
offset.left = (activatorRect.left - offsetContainerRect.left) + 'px'
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height / 2) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left) + 'px'
offset.transform = 'translateX(-100%) translateY(-50%)'
} else {
console.error(

1
styles/BaseSelectMenu.scss
View File

@ -70,6 +70,7 @@
transition: color .3s $--n-ease-in-out-cubic-bezier;
text-overflow: ellipsis;
overflow: hidden;
box-sizing: border-box;
@include m(grouped) {
padding: 0 21px;
}

4
styles/Dropdown.scss
View File

@ -90,10 +90,12 @@
@include b(dropdown-divider) {
margin: 2px 0;
}
@include b(dropdown-menu-wrapper) {
position: absolute !important;
}
@include b(dropdown-submenu) {
@include fade-in-scale-up-transition(dropdown-menu);
margin-top: 0;
position: absolute !important;
margin-left: 6px;
margin-right: 6px;
}