perf: 增强ReTypeit组件，支持插槽以及所有typeit配置项 (#922)

* perf: 增强typeit组件

* fix: update

* fix: delete invalid code

src/components/ReTypeit/index.ts

@@ -1,44 +1,8 @@
-import { h, defineComponent } from "vue";
+import typeIt from "./src/index";
-import TypeIt from "typeit";
+import type { TypeItOptions } from "typeit";
 
-// 打字机效果组件（只是简单的封装下，更多配置项参考 https://www.typeitjs.com/docs/vanilla/usage#options）
+const TypeIt = typeIt;
-export default defineComponent({
+
-  name: "TypeIt",
+export { TypeIt, TypeItOptions };
-  props: {
+
-    /** 打字速度，以每一步之间的毫秒数为单位，默认`200` */
+export default TypeIt;
-    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/components/ReTypeit/src/index.tsx

@@ -0,0 +1,56 @@
+import type { El } from "typeit/dist/types";
+import TypeIt, { type TypeItOptions } from "typeit";
+import { ref, defineComponent, onMounted, type PropType } from "vue";
+
+// 打字机效果组件（配置项详情请查阅 https://www.typeitjs.com/docs/vanilla/usage#options）
+export default defineComponent({
+  name: "TypeIt",
+  props: {
+    options: {
+      type: Object as PropType<TypeItOptions>,
+      default: () => ({}) as TypeItOptions
+    }
+  },
+  setup(props, { slots, expose }) {
+    /**
+     * 输出错误信息
+     * @param message 错误信息
+     */
+    function throwError(message: string) {
+      throw new TypeError(message);
+    }
+
+    /**
+     * 获取浏览器默认语言
+     */
+    function getBrowserLanguage() {
+      return navigator.language;
+    }
+
+    const typedItRef = ref<Element | null>(null);
+
+    onMounted(() => {
+      const $typed = typedItRef.value!.querySelector(".type-it") as El;
+
+      if (!$typed) {
+        const errorMsg =
+          getBrowserLanguage() === "zh-CN"
+            ? "请确保有且只有一个具有class属性为 'type-it' 的元素"
+            : "Please make sure that there is only one element with a Class attribute with 'type-it'";
+        throwError(errorMsg);
+      }
+
+      const typeIt = new TypeIt($typed, props.options).go();
+
+      expose({
+        typeIt
+      });
+    });
+
+    return () => (
+      <div ref={typedItRef}>
+        {slots.default?.() ?? <span class="type-it"></span>}
+      </div>
+    );
+  }
+});

src/views/able/typeit.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import TypeIt from "@/components/ReTypeit";
+import { TypeIt, type TypeItOptions } from "@/components/ReTypeit";
 
 defineOptions({
   name: "Typeit"
 });
+
+const options: TypeItOptions = {
+  strings: ["test1", "test2", "test3"]
+};
 </script>
 
 <template>
@@ -13,6 +17,6 @@ defineOptions({
         <span class="font-medium"> 打字机组件 </span>
       </div>
     </template>
-    <TypeIt :values="['test1', 'test2', 'test3']" />
+    <TypeIt :options="options" />
   </el-card>
 </template>

src/views/login/index.vue

@@ -166,7 +166,9 @@ watch(loginDay, value => {
           <avatar class="avatar" />
           <Motion>
             <h2 class="outline-none">
-              <TypeIt :values="[title]" :cursor="false" :speed="150" />
+              <TypeIt
+                :options="{ strings: [title], cursor: false, speed: 100 }"
+              />
             </h2>
           </Motion>