简介
admin-plugin-config 是一个基于 Node.js 平台的 npm 包，主要为前端开发者提供了简便的管理后台插件配置界面的解决方案，使前端开发者能够快速构建可定制的插件配置界面，提升效率。
安装
admin-plugin-config 可以通过 npm 包管理器进行安装：
npm install admin-plugin-config
用法
在项目中引入该包：
import { AdminPluginConfig } from 'admin-plugin-config';在 HTML 文件中添加该包所需的样式和脚本：
<link rel="stylesheet" href="https://unpkg.com/admin-plugin-config/dist/css/admin-plugin-config.css"> <script src="https://unpkg.com/admin-plugin-config/dist/js/admin-plugin-config.js"></script>
基本用法
通过 AdminPluginConfig 类可以创建一个配置界面，并将配置项保存至本地存储：
-- -------------------- ---- -------
----- -------------- - --- -------------------
------ ---------
------- -
-
------ ------
----- -------
----- ----------
-------- -------
--
-
------ ------
----- --------
----- ----------
-------- ----------
--
-
------ ------
----- -----------
----- ----------
-------- -----
--
-
------ ------
----- --------
----- ----------
-------- -
-
------ --------
------ ------------
--
-
------ --------
------ ------------
--
-
------ --------
------ ------------
--
--
-------- ------------
--
--
----------- -----------------
---
------------------------在这个例子中，将创建一个包含四个配置项的界面：一个文本框、一个颜色选择器、一个复选框和一个单选框。这些配置项的默认值分别为 "默认值1"、白色、选中（true）和 "选项4-1"。storageKey 属性是保存配置项的本地存储的键名。
使用 render() 方法将配置界面渲染至指定的容器元素：
<div id="my-plugin"></div>
myPluginConfig.render('#my-plugin');高级用法
AdminPluginConfig 类提供了许多可以自定义的属性和方法，以及一些事件回调（回调函数的 this 绑定到 AdminPluginConfig 实例）：
title：配置界面的标题；fields：配置项描述数组，每个描述包含如下属性：label：配置项的标签；type：配置项的类型（text、textarea、select、checkbox、radio、color、date、datetime、time、switch）；name：配置项的唯一名称；default：配置项的默认值；options：如果类型为 select、checkbox 或 radio，此属性指定选项数组；attrs：配置项的属性对象，将被转换为 HTML 元素的属性；
storageKey：本地存储的键名；storageSaver：函数，用于以自定义方式保存配置项至本地存储；storageLoader：函数，用于以自定义方式从本地存储加载配置项；onSave：保存配置项时调用的函数，参数为所保存的配置项；onBeforeSave：在保存前调用的函数，如果返回 false，将阻止保存；render：配置界面渲染方法，接受一个容器元素选择器，如#my-plugin；destroy：销毁配置界面的方法。
示例代码
<div id="my-plugin"></div>
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------------
----- -------------- - --- -------------------
------ ---------
------- -
-
------ ------
----- -------
----- ----------
-------- -------
--
-
------ ------
----- --------
----- ----------
-------- ----------
--
-
------ ------
----- -----------
----- ----------
-------- -----
--
-
------ ------
----- --------
----- ----------
-------- -
-
------ --------
------ ------------
--
-
------ --------
------ ------------
--
-
------ --------
------ ------------
--
--
-------- ------------
--
--
----------- -----------------
------- -------- -------- -
--------------------- --------
--
------------- -------- -- -
---------------------
------ -----
--
---
------------------------------------结论
使用 admin-plugin-config 这个 npm 包能够极大地提升前端开发者的开发效率，使得开发者可以快速构建出可定制的插件配置界面，管理后台插件的配置也变得更加便捷。在实际的开发过程中，可以根据业务需求简单地进行自定义，admin-plugin-config 这个 npm 包可以为我们的开发带来很多好处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005554881e8991b448d27d0