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