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-model)。
代码如下：

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

我该如何在Svelte中处理它？

- sk393

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 });

但或许可以为该变量寻找一个更好的名称 :)

- Stephane Vanraes

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" );
    }

但是：如果有人使用getter和setter解决方案，我会很感激！

- sk393

---

以下是一个使用 actions 的示例，可能会有所帮助： https://svelte.dev/repl/5c1abf5d24c94960a267124662e11a8d?version=3.44.2 - Mike S