vue-typed-js显示完光标如果取消
时间: 2023-12-07 13:03:19 浏览: 76
如果你想在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`来隐藏光标。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)