简介
cool-typewriter 是一个 npm 包，它提供了一种让文字像打字机一样逐个打印呈现的效果。它可以用于任何 HTML 元素、字符串或其他文本，使得网页内容显得更生动有趣。
安装
可以通过 npm 来安装 cool-typewriter 包，使用以下命令：
npm install cool-typewriter
使用
下面是一个简单的使用示例，当用户点击按钮后，typewriter 组件将会逐个字母地打印 “Hello World!”。
-- -------------------- ---- -------
--------- -----
------
------
------- ---- ---------- ---- --------
------- ----------------------------------------------------------------------------------------
-------
------
--- ---------------- -----
------- ----------------------------- ----------------
--------
-------- ------------- -
----- ---------- - --- ------------------------- -
------ ----
---
---------------------- -----------------
-
---------
-------
-------首先，我们指定了一个 HTML 元素 h1 作为 typewriter 的目标元素。 delay 属性指定了每个字母打印之间的时间，单位是毫秒。接着，我们创建了一个 typewriter 实例，并调用了 type() 方法传递了要打印的文本。最后，我们调用 start() 方法来开始打印文字。
API
cool-typewriter 暴露了以下属性和方法，用于控制打印效果：
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| el | 组件要挂载的元素选择器或元素 | string或HTMLElement | undefined |
| delay | 打印文字之间的时间间隔，单位是毫秒 | number | 50 |
| loop | 打印完一遍是否重复，需要定义 callback | boolean | false |
| pauseOnSpace | 当字符为 " " 时停止打印 | boolean | false |
| pauseOnEnter | 当字符为 "\n" 时停止打印 | boolean | false |
| period | 当出现“.”、“?”、“!”等符号时要等待的时间 | number | 500 |
| waitingTime | 在整个打印队列结束之后等待的时间 | number | 1000 |
方法
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| type() | 添加要打印的文本到打印队列中 | text: string | this |
| clear() | 清空打印队列 | 无 | this |
| reset() | 重置组件状态。将停止当前打印并清除队列。 | 无 | this |
| stop() | 停止当前打印，但保留队列 | 无 | this |
| start() | 开始打印队列中的文本。如果之前已经有过打印，将从上一次停止的位置开始。 | 无 | Promise |
事件
当 typewriter 组件达到以下条件时，将触发事件：
| 事件 | 说明 |
|---|---|
| start | 开始打印文本 |
| stop | 停止打印文本 |
| pause | 暂停打印文本 |
| resume | 恢复打印文本 |
| next | 下一步打印文本 |
可以通过以下方式监听事件：
typewriter.on(event: string, callback: Function);
比如，为了在“开始打印”和“停止打印”事件发生时显示控制台消息，可以这样做：
typewriter.on('start', () => console.log('开始打印'));
typewriter.on('stop', () => console.log('停止打印'));示例
以下示例演示了如何在选定元素中添加文字的打印效果。其中，我们指定了一些参数，以控制打印速度和同步效果。
-- -------------------- ---- -------
--------- -----
------
------
------- ---- ---------- ---- --------
------- ----------------------------------------------------------------------------------------
-------
------
---- ----------------------
--------
-------- ----------- -
----- ---------- - --- ------------------------- -
------ ----
------- ----
------------ -----
---
------------------------ -- -- ----------
------------ --- ---- ---- ---------- --- -------
------------
----------- -------- -- --------- --- -------
--------
-------- -- ----------------------
-
---------
------- --------------------------- --------------
-------
-------我们首先指定了要打印效果的元素 div，然后创建了一个 typewriter 实例。在这里，我们还使用了一些其他的属性，例如 loop 和 waitingTime。
接着，我们通过 type 方法向打印队列中添加了一些文本。此外，我们使用了 pause 方法，以便在两个短语之间暂停一段时间。
最后，我们调用了 start() 方法以开始演示，并在演示结束后记录日志。
结论
在本教程中，我们介绍了 npm 包 cool-typewriter 的用法和一些常见选项。我们编写了一些示例代码，以帮助您快速了解如何将打字机效果应用于您的网站。
我们还讨论了一些概念，例如 delay、period 和 waitingTime。您可以应用这些知识来自定义打字机的外观和行为。
希望您能够通过本文学习到新的技术，并将其应用到您的项目中！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005669a81e8991b448e2d27