Importación de un trabajo de archivo de javascript en Svelte

Question 1

Estoy creando una aplicación en la Esbelta y estoy tratando de agregar un escrito anteriormente .js archivo. Traté de importación en la main.js archivo, pero me da un error: Cannot read properties of null (reading 'offsetHeight') Este es el .js archivo:

[...]
function colorSubheadings() {
    // Replace subheading background colors
    var redStart = 255;
    var greenStart = 255;
    var blueStart = 255;
    var redEnd = 249;
    var greenEnd = 250;
    var blueEnd = 251;

    var redDiff = redEnd - redStart;
    var greenDiff = greenEnd - greenStart;
    var blueDiff = blueEnd - blueStart;

    var page = document.querySelector('.page');
    var pageHeight = page.offsetHeight;

    var subheadings = document.getElementsByClassName('.chapter');
    for (var i = 0; i < subheadings.length; i++) {
        // Get the position relative to .page
        var span = subheadings[i].querySelector('span');
        var factor = span.offsetTop / pageHeight;

        var r = Math.floor(redDiff * factor + redStart);
        var g = Math.floor(greenDiff * factor + greenStart);
        var b = Math.floor(blueDiff * factor + blueStart);
        var color = 'rgb(' + r + ',' + g + ',' + b + ')';

        // Color background based on position
        span.style.backgroundColor = color;
        span.style.boxShadow = '11px 0 0 ' + color + ', -13px 0 0 ' + color;
    }
}
[...]

Y este es el .svelte archivo:

<script>
 //some functions
</script>
<div class="page">
[...]
<div class="chapter-sidebar">
    <div class="sidebar js-sidebar">
        <div class="sidebar__wrapper">
            <ul class="sidebar__list">
            {#each files as { file } (file.name)}
                <li class="sidebar__list-item">
                    <a class="sidebar__link" href="#temp">{file.name.split('.').slice(0, -1).join('.')}</a>
                </li>
            {/each}
            </ul>
        </div>
    </div>

En el .svelte archivo hay una barra de navegación lateral, justo como este. La vainilla html funciona perfectamente, pero con la esbelta hay algunos errores, como la barra de navegación, no "stick" en un lugar: si me desplazo hacia abajo se mantiene en la parte superior de la página, en lugar de permanecer en una particular posición de la pantalla, "siguiente", el usuario del desplazamiento. Así que, ¿qué puedo hacer para utilizar este .js archivo en mi esbelta proyecto? También probé esta solución, pero no trabajó para mí. Gracias en advace.

Question 2

Donde es el colorSubheadings() la función de llamada?
(Veo var subheadings = document.getElementsByClassName('.chapter') pero no hay elementos con la clase 'capítulo' en la Esbelta archivo)

Le sugiero que bien intentar

la importación de los .archivo js en el index.html en yourproject/puplic carpeta después de la <script src="/build/bundle.js"></script> (en caso de que se llama a la función dentro de la misma .js archivo)
ejecutar la función dentro de onMount en el .svelte componente (.js el archivo dentro de yourproject/src carpeta con función exportada export colorSubheadings() {...})

    import {onMount} from 'svelte'
    import {colorSubheadings} from './xy.js'
        
    onMount(()=> {
         colorSubheadings()
    })

Question 3

Usted necesita para exportar a la función en el archivo js antes de que usted puede importar en su .esbelta de archivo (u otro archivo JS).

export function colorSubheadings() {
...
}

Corrl · Answer 1 · 2021-11-22T22:11:06

Donde es el colorSubheadings() la función de llamada?
(Veo var subheadings = document.getElementsByClassName('.chapter') pero no hay elementos con la clase 'capítulo' en la Esbelta archivo)

Le sugiero que bien intentar

la importación de los .archivo js en el index.html en yourproject/puplic carpeta después de la <script src="/build/bundle.js"></script> (en caso de que se llama a la función dentro de la misma .js archivo)
ejecutar la función dentro de onMount en el .svelte componente (.js el archivo dentro de yourproject/src carpeta con función exportada export colorSubheadings() {...})

    import {onMount} from 'svelte'
    import {colorSubheadings} from './xy.js'
        
    onMount(()=> {
         colorSubheadings()
    })

justintimeza · Answer 2 · 2021-11-23T16:27:24

Usted necesita para exportar a la función en el archivo js antes de que usted puede importar en su .esbelta de archivo (u otro archivo JS).

export function colorSubheadings() {
...
}

Importación de un trabajo de archivo de javascript en Svelte

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría