前言
在现代化的前端开发中，npm 已经成为了不可或缺的一部分。而 npm 上存在着众多优秀的包， penguin-published-indicator 就是其中之一。它可以帮助我们在博客或者其他类型的网站中添加一个简单实用的发布状态指示器，方便用户了解文章的发布状态。下面，就让我们来介绍一下该 npm 包的使用方法。
安装
在使用 penguin-published-indicator 之前，我们需要先安装它。可以通过以下命令来安装：
npm install penguin-published-indicator
也可以通过 yarn 安装：
yarn add penguin-published-indicator
使用方法
引入包
在我们想要使用 penguin-published-indicator 指示器的页面中，需要进行如下操作引入依赖：
import PublishedIndicator from 'penguin-published-indicator'; import 'penguin-published-indicator/dist/penguin-published-indicator.css';
设置样式与 HTML 结构
为了展示一篇文章的发布状态，我们需要在文章列表等页面中给每个文章都增加一个指示器。这时，HTML 结构和样式就很关键了。特别是对于样式，需要尽可能保证它与主题的统一和兼容性。下面是使用 Bootstrap 的样式和结构示例：
-- -------------------- ---- -------
---- -------------
---- ------------------
--- ----------------------------
-- --------------------------
-- -------- ---------- ---------------------
------
---- --------------------
------ -------------------
----- -----------------------------------
-------------
--------
------
------在上述示例代码中，我们为每个文章增加了一个 published-indicator 类，后面会用到。
使用组件
最后，在每个页面的 JavaScript 中，我们可以使用 penguin-published-indicator 包提供的组件方法来对刚刚新增的 HTML 结构进行处理。
-- -------------------- ---- -------
-- -- --- -------------
----- ------------ - -
-
-- -------------
-- ---- ----------------------------- ----------
-- --------------------
--------- -------- ----------------------
-- -----------
------- -
------ ------------
----- -----
-
--
-
--------- -------- ----------------------
------- -
------ -----------
----- -----
-
--
-
--------- ----------- ----------------------
------- -
------ ------------
----- ------
-
--
-
--------- ------- ----------------------
------- -
------ --------
----- ----
-
-
--
-- -------------------
-------------------------------- -- -
-- ----- ------------------ -----
--- ---------------------------------------- --------------------
---这里我们传入了 selector 和 status 两个参数，selector 指的是对应元素的选择器，而 status 表示文章的发布状态。状态包括 state 属性和 text 属性，分别表示当前状态和状态的描述文本。
指导意义
penguin-published-indicator 封装了前端工程师们常用的一些技巧，如 DOM 操作、样式兼容性处理等，是一个优秀的 npm 包。深入掌握它的使用方法，不仅可以在日常开发中更加得心应手，还可提升代码的效率和规范性，为项目的开发打下良好的基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbf81e8991b448da558