优化clickOutside,兼容shadowdom
parent
5c82a42bb4
commit
03da3ad832
|
@ -38,7 +38,10 @@
|
||||||
&.shift {
|
&.shift {
|
||||||
transition: all 0.5s ease-out;
|
transition: all 0.5s ease-out;
|
||||||
}
|
}
|
||||||
|
&.scale {
|
||||||
|
transform: scale(1.01);
|
||||||
|
transition: transform 0.1s linear;
|
||||||
|
}
|
||||||
&.blur {
|
&.blur {
|
||||||
backdrop-filter: blur(5px);
|
backdrop-filter: blur(5px);
|
||||||
}
|
}
|
||||||
|
@ -666,6 +669,13 @@ class Layer {
|
||||||
this._handlMask = clickOutside(this.root.children[1], ev => {
|
this._handlMask = clickOutside(this.root.children[1], ev => {
|
||||||
if (this.props.maskClose) {
|
if (this.props.maskClose) {
|
||||||
this.close()
|
this.close()
|
||||||
|
} else {
|
||||||
|
if (UNIQUE_TYPES.includes(this.props.type)) {
|
||||||
|
this.root.children[1].classList.toggle('scale', true)
|
||||||
|
setTimeout(_ => {
|
||||||
|
this.root.children[1].classList.remove('scale')
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -90,12 +90,13 @@ export const unbind = function(dom, type, fn = noop, phase = false) {
|
||||||
export const clickOutside = function(dom, fn = noop) {
|
export const clickOutside = function(dom, fn = noop) {
|
||||||
return bind(document, 'mousedown', ev => {
|
return bind(document, 'mousedown', ev => {
|
||||||
if (ev) {
|
if (ev) {
|
||||||
var target = ev.target
|
var path = ev.path.concat()
|
||||||
|
while (path.length > 3) {
|
||||||
if (dom === target || dom.contains(target)) {
|
if (path.shift() === dom) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
fn(ev)
|
fn(ev)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue