打字效果 typed.js 封装使用

shell

pnpm add typed.js

查看封装代码

typed.ts

import Typed, { type TypedOptions } from 'typed.js'

export function createTyped(element: string | Element, option: TypedOptions) {
  // 实例方法请查看文档 https://mattboldt.github.io/typed.js/docs/class/src/typed.js~Typed.html
  return new Typed(element, {
    // 要键入的字符串数组
    strings: [
      'These are the default values...',
      'You know what you should do?',
      'Use your own!',
      'Have a great day!'
    ],
    stringsElement: undefined, // 包含字符串子元素的元素 ID

    typeSpeed: 100, // 键入速度，单位为毫秒
    startDelay: 0, // 键入开始前的延迟时间（以毫秒为单位）
    backSpeed: 0, // 退格速度（以毫秒为单位）
    smartBackspace: true, // 仅退格与前一个字符串不匹配的内容
    shuffle: false, // 变换位置，从后往前渲染
    backDelay: 700, // 退格开始前的延迟时间（以毫秒为单位）

    fadeOut: false, // 淡出而不是退格键
    fadeOutClass: 'typed-fade-out', // 用于淡入淡出动画的 css 类
    fadeOutDelay: 500, // 淡出延迟（以毫秒为单位）

    loop: true, // 循环
    loopCount: Infinity, // 循环次数

    showCursor: true, // 显示光标
    cursorChar: '|', // cursor 的字符
    autoInsertCss: true, // 插入光标的 CSS 并将 fadeOut 插入 HTML <head>

    //属性进行键入  例如：输入占位符、值或仅输入 HTML 文本
    attr: undefined,
    bindInputFocusEvents: false, //  绑定到焦点和模糊（如果 el 是文本输入）
    contentType: 'html', // 'html' 或 'null' 表示plaintext

    /** 在开始键入之前 */
    onBegin: (self: Typed) => {},
    /** 所有打字都已完成 */
    onComplete: (self: Typed) => {},
    /** 键入每个字符串之前 */
    preStringTyped: (/** 位置 */ arrayPos: number, self: Typed) => {},
    /** 键入每个字符串后 */
    onStringTyped: (/** 位置 */ arrayPos: number, self: Typed) => {},
    /** 在循环期间，键入最后一个字符串之后 */
    onLastStringBackspaced: (self: Typed) => {},
    /** 键入已停止 */
    onTypingPaused: (/** 位置 */ arrayPos: number, self: Typed) => {},
    /** 停止后已开始键入 */
    onTypingResumed: (/** 位置 */ arrayPos: number, self: Typed) => {},
    /** 复位后 */
    onReset: (self: Typed) => {},
    /** 停止后 */
    onStop: (/** 位置 */ arrayPos: number, self: Typed) => {},
    /** 启动后 */
    onStart: (/** 位置 */ arrayPos: number, self: Typed) => {},
    /** 销毁后 */
    onDestroy: (self: Typed) => {},

    ...option
  })
}

用法

基础用法

来自静态 HTML 的字符串(SEO 友好)

键入暂停

智能退格

批量打字

淡出

修改光标

Typed.js is a JavaScript library.

It types out sentences.

查看代码

vue

<template>
  <div class="demo-container">
    <a-divider> 基础用法 </a-divider>
    <span id="base"></span>

    <a-divider> 来自静态 HTML 的字符串(SEO 友好) </a-divider>
    <span id="static-html"></span>

    <a-divider> 键入暂停 </a-divider>
    <span id="type-pausing"></span>

    <a-divider> 智能退格 </a-divider>
    <span id="smart-backspacing"></span>

    <a-divider> 批量打字 </a-divider>
    <span id="bulk-typing"></span>

    <a-divider> 淡出 </a-divider>
    <span id="fade-out"></span>

    <a-divider> 修改光标 </a-divider>
    <span id="cursor"></span>
  </div>

  <div id="static-html-box">
    <p>Typed.js is a <strong>JavaScript</strong> library.</p>
    <p>It <em>types</em> out sentences.</p>
  </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import { createTyped } from './typed'

onMounted(() => {
  createTyped('#base', { strings: ['欢迎来到', '王者荣耀', '敌人还有5秒到达战场'] })

  createTyped('#static-html', { stringsElement: '#static-html-box' })

  createTyped('#type-pausing', {
    // 在打字First后等待1000ms
    strings: ['First ^1000 sentence.', 'Second sentence.']
  })

  createTyped('#smart-backspacing', {
    // 只会退格“This is a”之后的单词
    strings: ['你好, vue. ', '你好, typescript.', '你好, vite.'],
    smartBackspace: true // Default value
  })

  createTyped('#bulk-typing', {
    // ``中的字会一次打出而不是一点一点打出
    strings: ['git push --force ^1000\n `pushed to origin with option force`']
  })

  createTyped('#fade-out', { fadeOut: true })
  createTyped('#cursor', { cursorChar: '_' })
})
</script>

打字效果 typed.js 封装使用 ​

用法 ​

打字效果 typed.js 封装使用

用法