vue-typed-js显示完光标如果取消
时间: 2023-12-07 07:03:19 浏览: 193
vue循环中点击选中再点击取消(单选)的实现
如果你想在vue-typed-js完成打字机效果之后隐藏光标,可以通过在组件中添加一个`callback`函数来实现。具体来说,你可以在组件中添加一个`callback`函数,然后在`callback`函数中使用`this.$refs.typed.reset()`方法来重置组件,并在重置后隐藏光标。以下是一个示例代码:
```
<template>
<div>
<vue-typed-js
:strings="strings"
:type-speed="50"
@completed="onCompleted"
ref="typed"
></vue-typed-js>
</div>
</template>
<script>
export default {
data() {
return {
strings: ['Hello, world!', 'How are you?', 'Vue.js is awesome!'],
};
},
methods: {
onCompleted() {
this.$refs.typed.reset();
this.hideCursor();
},
hideCursor() {
let cursor = document.querySelector('.typed-cursor');
if (cursor) {
cursor.style.display = 'none';
}
},
},
};
</script>
```
在这个示例代码中,我们在组件的`completed`事件中调用了`onCompleted`函数,该函数会调用`reset`方法重置组件,并且在重置后调用`hideCursor`函数隐藏光标。`hideCursor`函数通过查询`.typed-cursor`类来获取光标元素,并将其样式中的`display`属性设置为`none`来隐藏光标。
阅读全文