2024.11.13 前端打字机代码

要让打字结束后保持结束状态，首先需要确认你使用的 EasyTyper 库的逻辑。当 EasyTyper 完成打字后，它通常会执行一个回调函数，告知打字过程已经结束。

从你提供的代码来看，回调函数 () => {} 是空的，可能是为了暂时不做任何操作。如果你希望在打字完成后让文本保持在打字结束的状态，可以在 EasyTyper 完成打字后将状态更新为“结束”。

更新后的代码

假设我们通过更新 obj 对象的某个属性来标记打字已完成，并让打字效果停止。

// 打字机-每日鸡汤
export const getSoupTyping = (obj: any) => {
    fetch(myYiYan)
        .then((res) => {
            return res.json();
        })
        .then(({hitokoto}) => {
            new EasyTyper(
                obj,
                hitokoto.content,
                () => {
                    // 打字完成后的回调
                    obj.isEnd = true; // 假设我们通过设置 isEnd 来标记打字已完成
                },
                () => {
                    // 可以在这里处理打字错误等情况
                }
            );
        });
}

解释

• obj.isEnd = true：这里假设 obj 中有一个名为 isEnd 的属性，用来标记打字是否已经完成。你可以在模板中根据这个属性来决定是否显示“打字结束”的状态，或者做其他的 UI 更新。

  例如，如果你使用 v-if 或 v-show 来控制文本的显示，可以在模板中做类似如下操作：

  <div v-if="obj.isEnd">
    <span>打字已结束！</span>
  </div>
  

保持打字结束状态的其他方式

如果你希望在打字完成后不再重新启动打字，可以取消 getSoupTyping(obj) 的递归调用。因为原本代码中使用了递归来重新调用 getSoupTyping，一旦打字完成就不再调用它。

// 打字机-每日鸡汤
export const getSoupTyping = (obj: any) => {
    fetch(myYiYan)
        .then((res) => {
            return res.json();
        })
        .then(({hitokoto}) => {
            new EasyTyper(
                obj,
                hitokoto.content,
                () => {
                    // 结束时设置 obj.isEnd 为 true，表示打字完成
                    obj.isEnd = true;
                },
                () => {
                    // 错误处理
                }
            );
        });
}

最后，确保模板正确渲染：

<!-- 打字结束后，显示打字已完成的内容 -->
<div v-if="obj.isEnd">
  <p>{{ hitokoto.content }}</p>
  <span>打字已结束！</span>
</div>

通过以上修改，打字结束后，obj.isEnd 会被设置为 true，然后你可以在 UI 上根据 obj.isEnd 来控制显示“打字结束”的信息或做其他的操作，确保打字效果保持结束状态。