Svelte：如何将格式化的输入字段绑定到属性

Question

首先：斯维尔特（Svelte）对我来说还是新手。我希望这个问题不要太琐碎。

在一个简单的组件中，我想使用格式化的输入字段的内容进行计算。例如：在输入字段中，欧元金额应显示为格式（1.000）。在其旁边应显示含增值税金额的文本（1.190）。

我如何做没有格式化对我很清楚。该示例如下所示：

    export let net;
    export let vat;

    $: gross = net + (net * vat / 100);
    $: grossPretty = gross.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });

带有这样的简单标记：

    <form>
      <label>Net amount</label>
      <input type="text" step="any" bind:value={net} placeholder="Net amount">
    </form>
    <div>
        Gros = {grossPretty} €
    </div>

在vue中，我使用了计算属性。它的getter传递格式化的字符串，而它的setter接收格式化的字符串并保存原始值。（（在data（）中，我定义了net，在计算的属性中，我定义了netInput。输入字段将netInput用作v模型）。看起来像这样：

netInput: {
   get(){
      return this.net.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });
   },
   set(s){
      s = s.replace(/[\D\s._-]+/g, "");
      this.net = Number(s);
   }
}

我该如何处理呢？

Answer 1

您可以做一些类似的事情，您可以创建另一个计算变量，该变量存储输入字段中的变形字符串并在计算中使用，而不是直接输入

  export let net;
  export let vat;
  $: net_plain = Number(net.replace(/[\D\s._-]+/g, ""));
  $: gross = net_plain + (net_plain * vat / 100);
  $: grossPretty = gross.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });

但是也许为变量找到一个更好的名字：）

Answer 2

感谢Stephane Vanraes，我找到了解决方案。

它不具有Vue方法的魅力，但是还可以。首先，我插入了“ net_plain”。为了在输入期间格式化输入字段，我为keyup事件添加了一个事件侦听器。

<input type="text" step="any" bind:value={net} on:keyup={handleKeyUp} placeholder="Net amount">

该事件通过以下函数从handleKeyUp函数处理：

function handleKeyUp(event){
        if ( window.getSelection().toString() !== '' ) {
            return;
        }
        // ignore arrow keys
        let arrows = [38,40,37,39];
        if ( arrows.includes( event.keyCode)) {
            return;
        }
        let input = event.target.value.replace(/[\D\s._-]+/g, "");
        input = input ? parseInt( input, 10 ) : 0;
        event.target.value = ( input === 0 ) ? "" : input.toLocaleString( "de-DE" );
    }

BUT：如果有人有使用getter和setter的解决方案，我将不胜感激！