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

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

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

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

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

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

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

1
styles/BaseSelectMenu.scss
View File

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

4
styles/Dropdown.scss
View File

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