Svelte: Как связать отформатированное поле ввода со свойством - PullRequest
Новая
       84

Svelte: Как связать отформатированное поле ввода со свойством

0 голосов
/ 30 января 2020

Прежде всего: 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);
   }
}

Как мне справиться с этим в svelte?

Ответы [ 2 ]

1 голос
/ 30 января 2020

Вы можете сделать что-то похожее, вы создаете другую вычисляемую переменную, которая хранит деформированную строку из поля ввода и используется в вычислениях вместо прямого ввода 

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

Но, возможно, найдет лучшее имя для переменной:)

0 голосов
/ 30 января 2020

Благодаря Стефану Ванраесу я нашел решение.

В нем нет очарования подхода 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" );
    }

НО : Если у кого-то есть решение с использованием геттера и сеттера, я был бы признателен за ответ!

...