vue-typed-j换行后光标不一起

在vue-typed-js中，换行后光标不一起可能是由于CSS的line-height属性引起的。可以尝试在包含typewriter的元素上设置line-height属性，或者使用CSS的white-space属性来控制换行的行为。

例如，在包含typewriter的元素上添加以下CSS规则：

.parent-element {
  line-height: 1.5;
}

或者，使用white-space属性来控制换行的行为：

.typewriter-element {
  white-space: pre-line;
}

这样就可以解决换行后光标不一起的问题。

相关问题

vue-typed-js显示完光标如果取消

如果你想在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`来隐藏光标。

vue-typed-js光标

vue-typed-js是一个Vue.js组件，用于在网页上实现打字机效果。默认情况下，它不会显示光标。如果你想显示光标，可以通过修改CSS样式来实现。具体来说，你可以在组件的样式中添加以下代码：

.typed-cursor{
  opacity: 1;
  animation: typedjsBlink 0.7s infinite;
  -webkit-animation: typedjsBlink 0.7s infinite;
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
}
@keyframes typedjsBlink{
  0% { opacity: 1; }
  50% { opacity: 0.0; }
  100% { opacity: 1; }
}
@-webkit-keyframes typedjsBlink{
  0% { opacity: 1; }
  50% { opacity: 0.0; }
  100% { opacity: 1; }
}

这段代码会将光标的透明度设置为1，然后通过CSS动画实现闪烁的效果。你可以根据需要调整动画的时间和闪烁频率。