mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-15 04:42:23 +08:00
refactor(clickoutside): dismiss click mousedown inside element
This commit is contained in:
parent
8768320638
commit
3a2781bf3c
@ -12,8 +12,6 @@
|
||||
<n-scrollbar
|
||||
ref="scrollbar"
|
||||
@scroll="handleMenuScroll"
|
||||
@scrollstart="handleMenuScrollStart"
|
||||
@scrollend="handleMenuScrollEnd"
|
||||
>
|
||||
<div class="n-base-select-menu__item-wrapper">
|
||||
<transition name="n-base-select-menu__light-bar--transition">
|
||||
@ -165,12 +163,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMenuScrollStart () {
|
||||
this.$emit('menu-scroll-start')
|
||||
},
|
||||
handleMenuScrollEnd () {
|
||||
this.$emit('menu-scroll-end')
|
||||
},
|
||||
handleMenuScroll (e, scrollContainer, scrollContent) {
|
||||
this.$emit('menu-scroll', e, scrollContainer, scrollContent)
|
||||
},
|
||||
|
@ -60,8 +60,6 @@
|
||||
:is-selected="isSelected"
|
||||
@menu-toggle-option="handleToggleOption"
|
||||
@menu-scroll="handleMenuScroll"
|
||||
@menu-scroll-start="handleMenuScrollStart"
|
||||
@menu-scroll-end="handleMenuScrollEnd"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
@ -379,14 +377,6 @@ export default {
|
||||
/**
|
||||
* scroll events on menu
|
||||
*/
|
||||
handleMenuScrollStart () {
|
||||
this.scrolling = true
|
||||
},
|
||||
handleMenuScrollEnd () {
|
||||
window.setTimeout(() => {
|
||||
this.scrolling = false
|
||||
}, 0)
|
||||
},
|
||||
handleMenuScroll (e, scrollContainer, scrollContent) {
|
||||
this.$emit('scroll', e, scrollContainer, scrollContent)
|
||||
},
|
||||
|
@ -3,9 +3,14 @@ class ClickOutsideDelegate {
|
||||
console.debug('[ClickOutsideDelegate]: Ctor called')
|
||||
this.handlers = new Map()
|
||||
this.handlerCount = 0
|
||||
this.handleClickOutside = this.handleClickOutside.bind(this)
|
||||
this.mouseDownTarget = null
|
||||
this.handleMouseUpOutside = this.handleMouseUpOutside.bind(this)
|
||||
this.handleMouseDown = this.handleMouseDown.bind(this)
|
||||
}
|
||||
handleClickOutside (e) {
|
||||
handleMouseDown (e) {
|
||||
this.mouseDownTarget = e.target
|
||||
}
|
||||
handleMouseUpOutside (e) {
|
||||
const target = e.target
|
||||
for (const [handler, { els, once }] of this.handlers) {
|
||||
let existElContainTarget = false
|
||||
@ -13,11 +18,11 @@ class ClickOutsideDelegate {
|
||||
if (el) {
|
||||
if (typeof el === 'function') {
|
||||
const unwrappedEl = el()
|
||||
if (unwrappedEl && unwrappedEl.contains(target)) {
|
||||
if (unwrappedEl && (unwrappedEl.contains(target) || unwrappedEl.contains(this.mouseDownTarget))) {
|
||||
existElContainTarget = true
|
||||
break
|
||||
}
|
||||
} else if (el.contains(target)) {
|
||||
} else if (el.contains(target) || el.contains(this.mouseDownTarget)) {
|
||||
existElContainTarget = true
|
||||
break
|
||||
}
|
||||
@ -45,7 +50,9 @@ class ClickOutsideDelegate {
|
||||
}
|
||||
if (!this.handlerCount) {
|
||||
console.debug('[ClickOutsideDelegate]: remove handler from window')
|
||||
window.removeEventListener('click', this.handleClickOutside)
|
||||
window.removeEventListener('mouseup', this.handleMouseUpOutside)
|
||||
window.removeEventListener('mousedown', this.handleMouseDown)
|
||||
this.mouseDownTarget = null
|
||||
this.handlers = new Map()
|
||||
}
|
||||
}
|
||||
@ -61,7 +68,8 @@ class ClickOutsideDelegate {
|
||||
}
|
||||
if (!this.handlerCount) {
|
||||
console.debug('[ClickOutsideDelegate]: add handler to window')
|
||||
window.addEventListener('click', this.handleClickOutside)
|
||||
window.addEventListener('mouseup', this.handleMouseUpOutside)
|
||||
window.addEventListener('mousedown', this.handleMouseDown)
|
||||
}
|
||||
++this.handlerCount
|
||||
this.handlers.set(handler, { els, once })
|
||||
|
Loading…
Reference in New Issue
Block a user