Importar um trabalho de arquivo javascript no Svelte

Question 1

Eu estou construindo uma aplicação em Esbelta e eu estou tentando adicionar-lhe um escrito anteriormente .js arquivo. Eu tentei importar-lo no main.js arquivo, mas dá-me um erro: Cannot read properties of null (reading 'offsetHeight') Este é o .js arquivo:

[...]
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;
    }
}
[...]

E este é o .svelte arquivo:

<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>

No .svelte arquivo não é um lateral de navegação, assim como este. Baunilha, html, ele funciona perfeitamente, mas com svelte existem alguns bugs, como a navBar não "grudam" em um lugar: se eu desloque-se para baixo, ele permanece no topo da página, em vez de permanecer em um particuar posição da tela, "seguir" o usuário de rolagem. Então, o que posso fazer para usar esse .js arquivo em meu svelte projeto? Eu também tentei essa solução, mas não funcionou para mim. Graças, em advace.

Question 2

Onde está o colorSubheadings() função chamada?
(Eu vejo var subheadings = document.getElementsByClassName('.chapter') mas não há elementos com a classe", o capítulo " no Svelte ficheiro)

Eu sugiro que você tente

importar o .arquivo js na index.html no yourproject/puplic pasta após a <script src="/build/bundle.js"></script> (no caso, a função é chamada dentro do mesmo .js ficheiro)
executar a função dentro de onMount no .svelte componente (.js dentro do arquivo yourproject/src pasta com função exportada export colorSubheadings() {...})

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

Question 3

Você precisa exportar a função no seu arquivo js antes de você pode importá-lo no seu .svelte de arquivo (ou outro arquivo JS).

export function colorSubheadings() {
...
}

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

Onde está o colorSubheadings() função chamada?
(Eu vejo var subheadings = document.getElementsByClassName('.chapter') mas não há elementos com a classe", o capítulo " no Svelte ficheiro)

Eu sugiro que você tente

importar o .arquivo js na index.html no yourproject/puplic pasta após a <script src="/build/bundle.js"></script> (no caso, a função é chamada dentro do mesmo .js ficheiro)
executar a função dentro de onMount no .svelte componente (.js dentro do arquivo yourproject/src pasta com função exportada export colorSubheadings() {...})

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

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

Você precisa exportar a função no seu arquivo js antes de você pode importá-lo no seu .svelte de arquivo (ou outro arquivo JS).

export function colorSubheadings() {
...
}

Importar um trabalho de arquivo javascript no Svelte

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria