feat: 添加打字机组件demo

src/components/ReTypeit/index.ts

@@ -0,0 +1,44 @@
+import { h, defineComponent } from "vue";
+import TypeIt from "typeit";
+
+// 打字机效果组件（只是简单的封装下，更多配置项参考 https://www.typeitjs.com/docs/vanilla/usage#options）
+export default defineComponent({
+  name: "TypeIt",
+  props: {
+    /** 打字速度，以每一步之间的毫秒数为单位 */
+    speed: {
+      type: Number,
+      default: 200
+    },
+    values: {
+      type: Array,
+      defalut: []
+    },
+    className: {
+      type: String,
+      default: "type-it"
+    },
+    cursor: {
+      type: Boolean,
+      default: true
+    }
+  },
+  render() {
+    return h(
+      "span",
+      {
+        class: this.className
+      },
+      {
+        default: () => []
+      }
+    );
+  },
+  mounted() {
+    new TypeIt(`.${this.className}`, {
+      strings: this.values,
+      speed: this.speed,
+      cursor: this.cursor
+    }).go();
+  }
+});

src/router/modules/components.ts

@@ -101,6 +101,14 @@ const componentsRouter: RouteConfigsTable = {
       meta: {
         title: $t("menus.hscontextmenu")
       }
+    },
+    {
+      path: "/components/typeit",
+      name: "Typeit",
+      component: () => import("/@/views/components/typeit/index.vue"),
+      meta: {
+        title: $t("menus.hstypeit")
+      }
     }
   ]
 };

src/views/components/typeit/index.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import TypeIt from "/@/components/ReTypeit";
+
+defineOptions({
+  name: "Typeit"
+});
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium"> 打字机组件 </span>
+      </div>
+    </template>
+    <TypeIt :values="['test1', 'test2', 'test3']" />
+  </el-card>
+</template>

src/views/login/index.vue

@@ -4,6 +4,7 @@ import Motion from "./utils/motion";
 import { useRouter } from "vue-router";
 import { loginRules } from "./utils/rule";
 import phone from "./components/phone.vue";
+import TypeIt from "/@/components/ReTypeit";
 import qrCode from "./components/qrCode.vue";
 import regist from "./components/regist.vue";
 import update from "./components/update.vue";
@@ -162,7 +163,9 @@ onBeforeUnmount(() => {
         <div class="login-form">
           <avatar class="avatar" />
           <Motion>
-            <h2 class="outline-none">{{ title }}</h2>
+            <h2 class="outline-none">
+              <TypeIt :values="[title]" :cursor="false" :speed="150" />
+            </h2>
           </Motion>
 
           <el-form