要让打字结束后保持结束状态，首先需要确认你使用的 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 来控制显示“打字结束”的信息或做其他的操作，确保打字效果保持结束状态。