时间戳

首页 > 解决方案 > 如何在不断字的情况下用 vue-typer 断行

vue.js - 如何在不断字的情况下用 vue-typer 断行

问题描述

我正在使用 vue-typer，它会根据空间在屏幕上进行调整。但是，根据屏幕的大小，vue-typer 会打断单词。我想在我们有退格键的时候休息。代码是：

        <vue-typer 
           class="text-h4 font-weight-bold" 
           text="Nós acreditamos que o futuro pode ser incrível. Quer criar 
           ele com a gente?" :repeat='0'
        ></vue-typer><br>

这是现在工作方式的图像

标签： vue.jsfrontendvue-componentvuetify.js

解决方案

我不知道是否有人仍在处理这个问题，我已经写了一个快速修复这个问题。它并不完美，但可以完成工作。

您将通过一个方法运行文本，该方法将自动添加换行符。

           <div
              style="
                font-size: 30pt;
                margin: auto;
                color: white;
                max-width: 600px;
              "
              ref="theRef"
            >
              <vue-typer
                v-if="startTypers"
                :text="[
                  formatText(
                    'TextHere',
                    'theRef',
                    22
                  ),
                ]"
                :repeat="0"
                :shuffle="false"
                initial-action="typing"
                :pre-type-delay="70"
                :type-delay="70"
                :pre-erase-delay="2000"
                :erase-delay="100"
                erase-style="backspace"
                :erase-on-complete="false"
                caret-animation="blink"
              ></vue-typer>
            </div>

mounted() {
      setTimeout(() => {
        this.startTypers = true;
      }, 150);
    }

startTypers 的原因是因为它们会在 div 被渲染之前运行 formatText 方法。这意味着您将无法获得父 div 的 clientWidth。

formatText(text, ref, textSize = 22) {
        let maxChars = Math.floor(this.$refs[ref].clientWidth / textSize);
        let words = text.split(" ");
        let breaked = "";
        let currentCount = 0;
        words.forEach((word) => {
          currentCount += word.length;
          currentCount += 1;
          if (currentCount >= maxChars) {
            currentCount = word.length;
            breaked = `${breaked}\n${word} `;
          } else {
            breaked = `${breaked}${word} `;
          }
        });
        return breaked;
      },

formatText 的参数是您要添加换行符的文本、引用的名称和渲染的跨度（字符）的大小（22 是我使用的字体和字体大小的默认值在我的用例中，你的会有所不同）

希望这会有所帮助

推荐阅读