feat: 添加打字机组件demo

locales/en.yaml

@@ -48,6 +48,7 @@ menus:
   hsflowChart: Flow Chart
   hsseamless: Seamless Scroll
   hscontextmenu: Context Menu
+  hstypeit: Typeit Components
   hsmenus: MultiLevel Menu
   hsmenu1: Menu1
   hsmenu1-1: Menu1-1

locales/zh-CN.yaml

@@ -48,6 +48,7 @@ menus:
   hsflowChart: 流程图
   hsseamless: 无缝滚动
   hscontextmenu: 右键菜单
+  hstypeit: 打字机组件
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1

package.json

@@ -67,6 +67,7 @@
     "responsive-storage": "^2.1.0",
     "sortablejs": "^1.15.0",
     "swiper": "^8.4.3",
+    "typeit": "^8.7.0",
     "v-contextmenu": "3.0.0",
     "vue": "^3.2.40",
     "vue-form-create2": "^1.2.8",

pnpm-lock.yaml

@@ -100,6 +100,7 @@ specifiers:
   swiper: ^8.4.3
   tailwindcss: ^3.1.8
   terser: ^5.15.0
+  typeit: ^8.7.0
   typescript: ^4.7.4
   unplugin-vue-define-options: 0.7.3
   v-contextmenu: 3.0.0
@@ -163,6 +164,7 @@ dependencies:
   responsive-storage: 2.1.0
   sortablejs: 1.15.0
   swiper: 8.4.3
+  typeit: 8.7.0
   v-contextmenu: 3.0.0_vue@3.2.40
   vue: 3.2.40
   vue-form-create2: 1.2.9
@@ -8493,6 +8495,14 @@ packages:
       }
     dev: false
 
+  /typeit/8.7.0:
+    resolution:
+      {
+        integrity: sha512-MeraWJAquZr0EPo2yRYQnSdAxIuzgS5s4JEvzOdp63ZRRpETxtiHYvCJiK4aJA6FuScz3oUJkjmjQsLrx6VOMA==
+      }
+    requiresBuild: true
+    dev: false
+
   /typescript/4.8.4:
     resolution:
       {

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