1.cdn方式引入
<script src="https://cdn.bootcdn.net/ajax/libs/typed.js/2.0.12/typed.min.js"></script>2.npm方式引入
npm install typed.js3.使用示例
<template> <div class="box"> <span id="text"></span> </div> </template> <script lang="ts" setup> import Typed from 'typed.js'; import { onMounted } from 'vue'; onMounted(() => { const options = { strings: [ '我喜欢<span style="color:yellow">睡觉</span>', '我喜欢吃饭', '<span style="color:red">我喜欢自由</span>', ], typeSpeed: 100, //打字的速度 smartBackspace: true, // 开启智能退格 默认false backSpeed: 50, //后退速度 backDelay: 500, //后退延迟 loop: true, //是否循环.,, startDelay: 1000, //起始时间 fadeOut: true, //淡出效果 fadeOutClass: 'typed-fade-out', //fadeOutClass 用于淡入淡出动画的css类 fadeOutDelay: 500, //以毫秒为单位淡出延迟 // smartBackspace: true, //智能后间距, // 添加开始回调 onBegin: (self) => { console.log('打字动画开始'); // 可以在这里执行开始动画时的逻辑 }, }; const typed = new Typed('#text', options); typed.start(); }); </script> <style lang="scss" scoped> .box { text-indent: 2em; line-height: 30px; div { padding-bottom: 30px; } &:deep(.typed-cursor) { color: #323223; padding: 1px; background-color: #323223; } } </style>4.配置说明
/** * Welcome to Typed.js! * @param {string} elementId HTML element ID _OR_ HTML element * @param {object} options options object * @returns {object} a new Typed object */ declare module 'typed.js' { export interface TypedOptions { /** * 要键入的字符串 */ strings?: string[]; /** * 包含字符串子元素的元素的ID */ stringsElement?: string | Element; /** * 输入速度，以毫秒为单位 */ typeSpeed?: number; /** * 键入之前的时间以毫秒开始 */ startDelay?: number; /** * 退格速度，以毫秒为单位 */ backSpeed?: number; /** * 是否只退格与前一个字符串不匹配的内容 */ smartBackspace?: boolean; /** * 是否洗牌 */ shuffle?: boolean; /** * 退回之前的时间，以毫秒为单位 */ backDelay?: number; /** * 是否用淡出替代空格 */ fadeOut?: boolean; /** * 用于淡入淡出动画的css类 */ fadeOutClass?: string; /** * 以毫秒为单位淡出延迟 */ fadeOutDelay?: number; /** * 是否循环字符串 */ loop?: boolean; /** * 循环次数 */ loopCount?: number; /** * 是否显示光标 */ showCursor?: boolean; /** * 光标的字符 */ cursorChar?: string; /** * 是否将光标和fadeOut的CSS插入HTML <head> */ autoInsertCss?: boolean; /** * 输入属性 例如：输入占位符，值或仅HTML文本 */ attr?: string; /** * 如果el是文本输入，则绑定到焦点和模糊 */ bindInputFocusEvents?: boolean; /** * 明文的'html'或'null' */ contentType?: string; /** * 用于在打字动画开始时执行回调函数 */ onBegin?(self: Typed): void; /** * 所有打字都已完成调用的回调函数 */ onComplete?(self: Typed): void; /** * 在键入每个字符串之前调用的回调函数 */ preStringTyped?(arrayPos: number, self: Typed): void; /** * 输入每个字符串后调用的回调函数 */ onStringTyped?(arrayPos: number, self: Typed): void; /** * 在循环期间，在键入最后一个字符串之后调用的回调函数 */ onLastStringBackspaced?(self: Typed): void; /** * 打字已经停止调用的回调函数 */ onTypingPaused?(arrayPos: number, self: Typed): void; /** * 停止后开始键入调用的回调函数 */ onTypingResumed?(arrayPos: number, self: Typed): void; /** * 重置后调用的回调函数 */ onReset?(self: Typed): void; /** * 停止后调用的回调函数 */ onStop?(arrayPos: number, self: Typed): void; /** * 开始后调用的回调函数 */ onStart?(arrayPos: number, self: Typed): void; /** * 销毁后调用的回调函数 */ onDestroy?(self: Typed): void; } export default class Typed { constructor(elementId: any, options: TypedOptions); /** * Toggle start() and stop() of the Typed instance * @public */ public toggle(): void; /** * Stop typing / backspacing and enable cursor blinking * @public */ public stop(): void; /** * Start typing / backspacing after being stopped * @public */ public start(): void; /** * Destroy this instance of Typed * @public */ public destroy(): void; /** * Reset Typed and optionally restarts * @param {boolean} restart * @public */ public reset(restart?: boolean): void; cursor: HTMLSpanElement; strPos: number; arrayPos: number; curLoop: number; /** * Begins the typing animation * @private */ private begin; typingComplete: boolean; timeout: any; /** * Called for each character typed * @param {string} curString the current string in the strings array * @param {number} curStrPos the current position in the curString * @private */ private typewrite; temporaryPause: boolean; /** * Continue to the next string & begin typing * @param {string} curString the current string in the strings array * @param {number} curStrPos the current position in the curString * @private */ private keepTyping; /** * We're done typing the current string * @param {string} curString the current string in the strings array * @param {number} curStrPos the current position in the curString * @private */ private doneTyping; /** * Backspaces 1 character at a time * @param {string} curString the current string in the strings array * @param {number} curStrPos the current position in the curString * @private */ private backspace; stopNum: number; /** * Full animation is complete * @private */ private complete; /** * Has the typing been stopped * @param {string} curString the current string in the strings array * @param {number} curStrPos the current position in the curString * @param {boolean} isTyping * @private */ private setPauseStatus; /** * Toggle the blinking cursor * @param {boolean} isBlinking * @private */ private toggleBlinking; cursorBlinking: any; /** * Speed in MS to type * @param {number} speed * @private */ private humanizer; /** * Shuffle the sequence of the strings array * @private */ private shuffleStringsIfNeeded; sequence: any; /** * Adds a CSS class to fade out current string * @private */ private initFadeOut; /** * Replaces current text in the HTML element * depending on element type * @param {string} str * @private */ private replaceText; /** * If using input elements, bind focus in order to * start and stop the animation * @private */ private bindFocusEvents; /** * On init, insert the cursor element * @private */ private insertCursor; } }
