Vue3中实现打字机效果

最新推荐文章于 2024-09-29 18:09:16 发布

Blank_空白丶

最新推荐文章于 2024-09-29 18:09:16 发布

阅读量1.2k

点赞数 2

分类专栏：前端 Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44600273/article/details/131408371

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Vue

9 篇文章 0 订阅

订阅专栏

起因：在编写个人博客的时候，想在主页实现打字机效果

ps:gif图懒的搞了,就是类似键盘打字的效果。

经过：看了一下绝大多数代码在vue3使用会报错，且难以调试，重新封装了一下又感觉太麻烦。

结果：功夫不负有心人。下面附上教程

安装

npm install @duskmoon/vue3-typed-js

实例代码:

样式是我自己根据我主页调的样式，可以参考。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <Typed :options="options" class="typedClass">
    <h1 class="typing"></h1>
  </Typed>
</template>

<script setup lang="ts">
import { Typed } from "@duskmoon/vue3-typed-js";
import type { TypedOptions } from "@duskmoon/vue3-typed-js";

const options: TypedOptions = {
  strings: ["您好！", "欢迎来到Swhite的小窝", "Hello","Welcome to Swhite's Nest"],
  // 是否循环
  loop: true,
  // 打字速度
  typeSpeed: 50,
  // 回退速度
  backSpeed: 20,
};
</script>
<style lang="scss" scoped>
    .typedClass{
        display: flex;
        align-items: center;
        font-size: 40px;
        .typing{
          margin: 0.6em 0;
        }
        :deep(.typed-cursor){
          font-size: 70px;
          margin: 0.6em 0;
        }
      }
</style>