Как сделать эффект печати в vuejs - PullRequest
Новая
       316

Как сделать эффект печати в vuejs

0 голосов
/ 10 июня 2019

Привет, я пытаюсь создать эффект Typing для vuejs, вот мой код.

Я пытаюсь вызвать setTimeout, но это тот эффект, который я хочу.

template: 

<template>
<div>
    <span class="back" @click="goToMenu"> 戻る</span>
    <div class="img-container" >
        <img v-bind:src="getCharacter.headImage" class="responsive-image">
        <div class="conversation">
            <span class="name">{{getCharacter.name}}</span>
            <p class="text typewriter-text"> {{outputText}}</p>
        </div>
        <button>Start</button>
    </div>
    <Counter ></Counter>
</div>

Сценарий: экспорт по умолчанию {имя: "Практика", методы: {outText () {

            if (this.inc < this.text1.length) {
                this.outputText += this.text1.charAt(this.inc);
                this.inc ++;
                setTimeout(this.outText() , 100000)

            }
        }
    },
    mounted() {
        this.outText()
    },
    data() {
        return {
            text1 :'こんにちは。あなたの日本語聞かせてほしいな！まずは練習！',
            outputText : '',
            inc:0
        }
    }
}

css: 

<style scoped>
.text {
    background-color: #ababab;
    padding: 4%;
    border-radius: 0 14px 14px 14px;
    margin: 0;
    width: 85vw;
    height: 10vh;
}

1 Ответ

0 голосов
/ 10 июня 2019

Вы не должны вызывать метод outText при передаче его в качестве аргумента setTimeout, это вызовет метод немедленно, вместо этого вы захотите передать метод в setTimeout, чтобы его можно было вызвать позже. после истечения времени ожидания.

Неправильно: 

setTimeout(this.outText(), 100000)

Правильно: 

setTimeout(this.outText, 100000)

Также 100000 мс (100 с) слишком длинная задержка, чтобы что-либо заметить.

...