Mam stronę tworząc kod QR. Chcę, aby moje kody QR były tworzone dynamicznie za pomocą wejścia użytkownika. Ale nie chcę natychmiast tworzyć kodu QR. Chcę czekać mojego użytkownika, aby zakończyć pisanie, a potem po jednej sekundzie wygeneruję kod QR. Mam więc szablon jak poniżej:

<div class="app">
    <qrcode-vue :value="genaratedQrCode"></qrcode-vue>
    <input type="text" v-model="qrCodeInput" />
</div>

I mój skrypt:

import QrcodeVue from 'qrcode.vue';

export default {
    data() {
        return {
            genaratedQrCode: '',
            qrCodeInput: '',
            isInputFunctionRunning: false
        }
    },
    watch: {
        async qrCodeInput() {
            if (this.isInputFunctionRunning) {
                return;
            }

            this.isInputFunctionRunning = true;

            await new Promise(r => setTimeout(r, 1000));

            this.genaratedQrCode = this.qrCodeInput;

            this.isInputFunctionRunning = false;
        }
    }
    components: {
        QrcodeVue,
    },
}

Najwyraźniej kod nie działa. Wygenerował kod QR co jedną sekundę. Chcę czekać, aż użytkownik skończył, a następnie aktualizację po 1 sekundach.

0
Mansur 27 lipiec 2020, 18:38

1 odpowiedź

Najlepsza odpowiedź

Musisz użyć .lazy Modyfikator:

<input type="text" v-model.lazy="qrCodeInput" />

Jeśli chcesz poczekać, spróbuj tego:

import QrcodeVue from 'qrcode.vue';

function debounce (fn, delay) {
  var timeoutID = null
  return function () {
    clearTimeout(timeoutID)
    var args = arguments
    var that = this
    timeoutID = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}



export default {
    data() {
        return {
            genaratedQrCode: '',
            qrCodeInput: '',
            isInputFunctionRunning: false
        }
    },
    watch: {
        qrCodeInput:debounce(function() {
            if (this.isInputFunctionRunning) {
                return;
            }

            this.isInputFunctionRunning = true;

            this.genaratedQrCode = this.qrCodeInput;

            this.isInputFunctionRunning = false;
        },1000)
    }
    components: {
        QrcodeVue,
    },
}

Jest to oparte na tym Odpowiedź;

1
Boussadjra Brahim 27 lipiec 2020, 15:52