概述
在前端开发过程中，我们常常会遇到需要展示保存状态的需求。penguin-saved-indicator 是一个方便的 NPM 包，可以帮助我们在页面中显示保存状态，提高用户体验。
安装
我们可以使用 npm 命令来安装 penguin-saved-indicator 包：
npm install penguin-saved-indicator --save
使用
安装成功后，我们可以在代码中使用该包提供的组件。
引入
我们需要在项目中引入 penguin-saved-indicator 包：
import PenguinSavedIndicator from 'penguin-saved-indicator';
使用组件
包中提供了 PenguinSavedIndicator 组件，我们只需要将组件插入到需要展示保存状态的位置即可。比如我们可以在表单中插入该组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------------------- ---- --------------------------
-------- ------------- -
----- --------- ----------- - ----------------
----- -------- - -- -- -
-----------------
-- ----------
-- ---
-
------ -
------
------ ----------- --------------- --
------ --------------- --------------- --
------- ------------- ------------------------------
---------------------- ----------------- --
-------
--
-
------ ------- -------上面的代码中，我们在表单中加入了 PenguinSavedIndicator 组件，并且用 isSaved 状态来控制是否展示保存状态。
配置
PenguinSavedIndicator 组件支持多种配置项，我们可以按照需要来选择是否配置。
className
我们可以通过传递 className 属性来设置组件的自定义样式名，比如：
<PenguinSavedIndicator
isSaved={isSaved}
className="my-saved-indicator"
/>saveText
saveText 属性用来设置展示的保存文本，比如：
<PenguinSavedIndicator
isSaved={isSaved}
saveText="已保存"
/>unsavedText
unsavedText 属性用来设置展示的未保存文本，比如：
<PenguinSavedIndicator
isSaved={isSaved}
unsavedText="未保存"
/>showIndicator
showIndicator 属性用来控制是否展示保存状态，比如：
<PenguinSavedIndicator
isSaved={isSaved}
showIndicator={false}
/>示例
下面是一个完整的例子，展示了如何在页面中使用 PenguinSavedIndicator 组件。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------------------- ---- --------------------------
-------- ------------- -
----- --------- ----------- - ----------------
----- -------- - -- -- -
-----------------
-- ----------
-- ---
-
------ -
------
------ ----------- --------------- --
------ --------------- --------------- --
------- ------------- ------------------------------
----------------------
-----------------
------------------------------
--------------
-----------------
--------------------
--
-------
--
-
------ ------- -------总结
penguin-saved-indicator 是一个简单易用的 NPM 包，可以帮助我们在页面中展示保存状态，提高用户体验。我们可以使用该包提供的 PenguinSavedIndicator 组件，通过配置不同的属性来满足项目的不同需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556e381e8991b448d3c0d