前端开发中，我们经常要进行自雇业务的开发，而这时候若可以使用成熟的 npm 包将会大大提高我们的工作效率。其中一个比较优秀的自雇业务解决方案是 @beisen/m-self-employment。本文将详细介绍如何使用该 npm 包进行自雇业务的开发。
1. 安装
使用以下命令进行安装：
npm install @beisen/m-self-employment
安装完毕后，我们就可以在代码中引入并使用该包了。
2. 使用方式
2.1 初始化组件
通过以下代码初始化组件:
import MselfEmployment from '@beisen/m-self-employment'; const mselfEmployment = new MselfEmployment();
2.2 组件参数
在初始化的时候，可以传入如下参数进行配置：
-- -------------------- ---- -------
----- ------ - -
--------- ------------------- -- ---------
----- --- -- --------
------------- ------ -- - -- ----------
------ --- ----------------- ------- -- -
------------- -- -
--------------
-- ------
---
--
------------ -- -- - -- ----------
---------------------------
--
-
----- --------------- - --- ------------------------2.3 数据结构
@mgl还规定使用的数据结构为:
-- -------------------- ---- -------
----- ---- - -
-
-- ------------
--- --
-- --- -----
---------- -----------------------
-- ---- ----
----- -
----------------
----------------
-
-
--2.4 方法调用
@mgl可以直接调用以下可用方法：
addItem(data): voidremoveItem(id): voidgetItem(id): anygetItems(): any[]setData(data): void
2.5 事件绑定
组件内部有 2 个默认事件：
- item-click: 点击子项时触发
- item-remove: 删除子项时触发
可以通过以下代码进行事件的绑定：
mselfEmployment.on('item-click', (data) => {
console.log(data);
});
mselfEmployment.on('item-remove', (id) => {
console.log(id);
});2.6 事件触发
组件内部可以直接触发以下事件：
- item-click: 点击子项时触发
- item-remove: 删除子项时触发
可以通过以下代码进行事件的触发：
mselfEmployment.trigger('item-click', { id: 1 });
mselfEmployment.trigger('item-remove', 1);3. 示例代码
下面是一个完整的代码片段，我们可以将其放入一个 .html 文件中进行测试：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- --------------- --
-------------------------------- ------------
-------
------
---- ---------------------------
------- --------------------------------------------------------------------------------------
--------
----- --------------- - --- ------------------
-- ----
-------------------------
--- --
----- -
---- -----------------------------
-----------------
----------------
------
-
---
-------------------------
--- --
----- -
---- -----------------------------
-----------------
-----------------
------
-
---
-- ------
-------------------------------- ------ -- -
------------------
---
-- ------
--------------------------------- ---- -- -
----------------
---
---------
-------
-------4. 总结
@mgl是一款非常好用的自雇业务解决方案，封装了非常多常用的业务类组件，可直接进行调用。希望本文对您有所帮助，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/136582