前端实现打字机效果

 话不多说，直接上代码……

<template>
    <div class="typewriter_container">
        <div class="content">{{ content }}</div>
    </div>
</template>
<script>
export default {
    name: 'typewriter',
    data() {
        return {
            text: `这是一个打字机效果示例`,
            content: ``,
            interval: null,
            index: 0,
        }
    },
    mounted() {
        const that = this
        that.$nextTick(() => {
            that.index = 0;
            that.interval = setInterval(that.typewriting, 200); // 打字速度
        })
    },
    methods: {
        typewriting() {
            const that = this;
            if (that.index < that.text.length) {
                that.content += that.text.charAt(this.index);
                that.index++;
            } else {
                clearInterval(that.interval); // 文本打完后清除定时器
            }
        },
    }
}
</script>
<style lang="less" scoped>
.typewriter_container {
    width: 100%;
    height: 100%;
    padding: 50px;
    overflow: hidden;

    .content {
        width: 100%;
        height: 100%;
        text-indent: 2em;
        font-size: 18px;
        background-color: #ffffff;
        padding: 15px;
        border-radius: 15px;
        color: #e7770d;
        word-break: break-all;
    }
}
</style>