Экспорт функции с использованием компонента Svelte - PullRequest
Новая
       22

Экспорт функции с использованием компонента Svelte

0 голосов
/ 09 февраля 2020

Я новичок в svelte и мне нужно немного помочь. У меня есть функция преобразования веса, которая рассчитывает перевод между фунтами и килограммами. Есть два входа и ввод значения в фунтах автоматически покажет килограммы и наоборот. 

let k = '';
let l = '' ;

function setBothFromK(value) {
k = +value;
l = +( k * 2.2046226218).toFixed(1);
}
function setBothFromL(value) {
l = +value;
k = +( l / 2.2046226218).toFixed(1);
}

, а входные данные задаются следующим образом: 

 <input id="inputKilograms" name="inputKilograms" type="number" placeholder="kgs"
  bind:value={k} on:input="{e => setBothFromK(e.target.value)}" min="0">


 <input id="inputPounds" name="inputPoundsE" type="number" placeholder="lbs" 
 bind:value={l}  on:input="{e => setBothFromL(e.target.value)}" min="0">

Затем я использую значение k для расчета дозировки лекарственного средства в мг и мл с значениями, предоставленными массивом лекарств. Когда вес изменяется, дозировки и объемы меняются.

Рассчитанные дозировки и объемы устанавливаются следующим образом: 

    {#each antibiotics as antibiotic, i}

    <div>{((k * antibiotic.dosevalue) / antibiotic.concs).toFixed(2)}</div>

     <div> {(k *   antibiotic.dosevalue).toFixed(2)} </div>

    {/each}

РЕДАКТИРОВАННЫЕ и обновленные REPL

Хорошо работает. Я пытаюсь настроить компонент svelte, чтобы можно было экспортировать функции html и 2 для использования на нескольких страницах.

Weightconvert.svelte is: 

   <script>

  let  k = ''; 
  let  l = '';

  export function setBothFromK(value) {
  k = +value;
  l = +( k * 2.2046226218).toFixed(1);
  }

   export function setBothFromL(value) {
  l = +value;
  k = +( l / 2.2046226218).toFixed(1);
  }

  </script>

  <input id="inputPounds" name="inputPounds" type="number" placeholder="lbs" 
 bind:value={l}  on:input="{e => setBothFromL(e.target.value)}" min="0">

  <input id="inputPounds" name="inputKilograms" type="number" placeholder="kgs" 
 bind:value={k}  on:input="{e => setBothFromK(e.target.value)}" min="0"`

App.svelte is: 

   <script>
   let k = '';
   let l = '' ;

   import Weightconvert, {setBothFromK , setBothFromL } from './Test.svelte';
   let dosevalue = 20;
   let concs = 3;
   </script>

  <Weightconvert ></Weightconvert>

     <div bind:this={k}> Dose: {(k * dosevalue).toFixed(2)}</div>

     <div  bind:this={k}> Volume: {((k * dosevalue) / concs).toFixed(2)} </div>

Функция преобразования веса работает на каждой странице, но вычисления дозировки и объема не выполняются , Будучи новичком, я не уверен, как заставить это работать. Спасибо за любую помощь.

Вот REPL с базовой функциональностью c, но без импорта компонента

Ответы [ 3 ]

0 голосов
/ 11 февраля 2020

Вы можете использовать тег сценария context="module" для экспорта функций из ваших компонентов.

, например:

https://svelte.dev/docs#script_context_module

https://svelte.dev/examples#module -экспорт

0 голосов
/ 03 марта 2020

В соответствии с руководящими принципами, я не должен был отвечать на этот вопрос, но я чувствовал склонность к этому. Читая ваш пост, кажется, что существует некоторая путаница, когда использовать определенные части Svelte. Например, вы могли бы экспортировать функции модуля, только если вам нужно изменить компоненты с Javascript. А поскольку у вас есть входные данные, которые меняют значения, в этом нет необходимости.

Все вычисления и константы могут быть помещены в компонент, и только атрибуты, изменяющиеся в зависимости от antibioti c, могут быть изменены через атрибуты компонента. .

Причина, по которой вычисления не работали, заключается в том, что переменные были инициализированы как строки, а не числа.

Это , как я бы подошел к нему , основываясь на мое понимание вашего варианта использования.

0 голосов
/ 10 февраля 2020

To export функция из компонента, которую вы должны связать с вызывающим родителем, и тогда она будет доступна везде в этом родителе 

<Weightconvert bind:this={myweightconvert}></Weightconvert>
<input .... on:input="{e => myweightconvert.setBothFromK(e.target.value)}">

<script>
let myweightconvert;
</script>
...