Fix lazy portal
This commit is contained in:
@@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
const { target: target = document.body, children, root, idx }:Props = $props();
|
||||
const paddingEle = document.createElement('div')
|
||||
let paddingEle = null
|
||||
const context = getAllContexts();
|
||||
|
||||
let instance;
|
||||
@@ -20,21 +20,16 @@
|
||||
|
||||
onMount(() => {
|
||||
|
||||
paddingEle.style.height = '48px';
|
||||
paddingEle.style.width = '100%'
|
||||
paddingEle.style.backgroundColor = '#ffffff'
|
||||
paddingEle.style.color = 'black'
|
||||
target.appendChild(paddingEle)
|
||||
|
||||
|
||||
const observer = new IntersectionObserver((v) => {
|
||||
if(v[0].intersectionRatio > 0.5){
|
||||
seen = true
|
||||
target.removeChild(paddingEle)
|
||||
observer.disconnect()
|
||||
}
|
||||
|
||||
}, {
|
||||
threshold: 0.5,
|
||||
root: root,
|
||||
})
|
||||
|
||||
observer.observe(target)
|
||||
@@ -48,15 +43,14 @@
|
||||
|
||||
$effect(() => {
|
||||
if(seen){
|
||||
instance = mount(PortalConsumer, { target, props: { children }, context })
|
||||
try {
|
||||
instance = mount(PortalConsumer, { target, props: { children }, context })
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
return () => {
|
||||
if(instance){
|
||||
unmount(instance);
|
||||
try {
|
||||
target.removeChild(paddingEle)
|
||||
} catch (error) {}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -4,4 +4,6 @@
|
||||
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{:else}
|
||||
<div class="empty-portal"></div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user