From 5dbba0f3ff9b7421accdf2912234e79524d79b04 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 19 Oct 2022 18:54:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=89=93=E5=AD=97?=
 =?UTF-8?q?=E6=9C=BA=E7=BB=84=E4=BB=B6`demo`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.yaml                       |  1 +
 locales/zh-CN.yaml                    |  1 +
 package.json                          |  1 +
 pnpm-lock.yaml                        | 10 ++++++
 src/components/ReTypeit/index.ts      | 44 +++++++++++++++++++++++++++
 src/router/modules/components.ts      |  8 +++++
 src/views/components/typeit/index.vue | 18 +++++++++++
 src/views/login/index.vue             |  5 ++-
 8 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ReTypeit/index.ts
 create mode 100644 src/views/components/typeit/index.vue

diff --git a/locales/en.yaml b/locales/en.yaml
index eebca38a5..119922862 100644
--- a/locales/en.yaml
+++ b/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
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index cf30d952d..c1d071a5c 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -48,6 +48,7 @@ menus:
   hsflowChart: 流程图
   hsseamless: 无缝滚动
   hscontextmenu: 右键菜单
+  hstypeit: 打字机组件
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1
diff --git a/package.json b/package.json
index d7662873f..34e49c867 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 58e9fa753..45e800afd 100644
--- a/pnpm-lock.yaml
+++ b/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:
       {
diff --git a/src/components/ReTypeit/index.ts b/src/components/ReTypeit/index.ts
new file mode 100644
index 000000000..e8e01ad32
--- /dev/null
+++ b/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();
+  }
+});
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index b594f32e0..3037d70db 100644
--- a/src/router/modules/components.ts
+++ b/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")
+      }
     }
   ]
 };
diff --git a/src/views/components/typeit/index.vue b/src/views/components/typeit/index.vue
new file mode 100644
index 000000000..b6fa958d2
--- /dev/null
+++ b/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>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 6411c650c..d877942b6 100644
--- a/src/views/login/index.vue
+++ b/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