时间戳

首页 > 解决方案 > 使用 Svelte 组件导出函数

function - 使用 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 来计算以 mg 和 mls 为单位的药物剂量，并使用数组药物提供的值。当重量发生变化时，剂量和体积也会发生变化。

计算的剂量和体积设置如下：

    {#each antibiotics as antibiotic, i}

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

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

    {/each}

编辑和更新的 REPL

它运作良好。我要做的是设置一个苗条的组件，这样我就可以导出 html 和 2 个函数以在许多不同的页面中使用。

Weightconvert.svelte是：

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

   <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

标签： functioncomponentsexportsvelte

解决方案

根据指导方针，我不应该回答这个问题，但我倾向于加入。阅读你的帖子似乎对何时使用 Svelte 的某些部分存在相当大的困惑。例如，如果您需要从 Javascript 更改组件，您只会导出模块函数。而且由于您有更改值的输入，因此没有必要这样做。

所有的计算和常数都可以放在组件内，只有每个抗生素变化的值可以通过组件属性进行更改。

计算不起作用的原因是变量被初始化为字符串而不是数字。

根据我对您的用例的理解，这就是我将如何处理它。

推荐阅读