npm 包 @beisen/m-self-employment 使用教程

前端开发中，我们经常要进行自雇业务的开发，而这时候若可以使用成熟的 npm 包将会大大提高我们的工作效率。其中一个比较优秀的自雇业务解决方案是 @beisen/m-self-employment。本文将详细介绍如何使用该 npm 包进行自雇业务的开发。

1. 安装

使用以下命令进行安装：

--- ------- -------------------------

安装完毕后，我们就可以在代码中引入并使用该包了。

2. 使用方式

2.1 初始化组件

通过以下代码初始化组件:

------ --------------- ---- ----------------------------

----- --------------- - --- ------------------

2.2 组件参数

在初始化的时候，可以传入如下参数进行配置：

----- ------ - -
  --------- ------------------- -- ---------
  ----- --- -- --------
  ------------- ------ -- - -- ----------
    ------ --- ----------------- ------- -- -
      ------------- -- -
        --------------
      -- ------
    ---
  --
  ------------ -- -- - -- ----------
    ---------------------------
  --
-

----- --------------- - --- ------------------------

2.3 数据结构

@mgl还规定使用的数据结构为:

----- ---- - -
  -
    -- ------------
    --- --
    -- --- -----
    ---------- -----------------------
    -- ---- ----
    ----- -
      ----------------
      ----------------
    -
  -
--

2.4 方法调用

@mgl可以直接调用以下可用方法：

  • addItem(data): void
  • removeItem(id): void
  • getItem(id): any
  • getItems(): any[]
  • setData(data): void

2.5 事件绑定

组件内部有 2 个默认事件：

  • item-click: 点击子项时触发
  • item-remove: 删除子项时触发

可以通过以下代码进行事件的绑定：

-------------------------------- ------ -- -
  ------------------
---

--------------------------------- ---- -- -
  ----------------
---

2.6 事件触发

组件内部可以直接触发以下事件：

  • item-click: 点击子项时触发
  • item-remove: 删除子项时触发

可以通过以下代码进行事件的触发：

------------------------------------- - --- - ---
-------------------------------------- ---

3. 示例代码

下面是一个完整的代码片段，我们可以将其放入一个 .html 文件中进行测试：

--------- -----
----- -------------
  ------
    ----- --------------- --
    -------------------------------- ------------
  -------

  ------
    ---- ---------------------------

    ------- --------------------------------------------------------------------------------------
    --------
      ----- --------------- - --- ------------------

      -- ----
      -------------------------
        --- --
        ----- -
          ---- -----------------------------
            -----------------
            ----------------
          ------
        -
      ---
      -------------------------
        --- --
        ----- -
          ---- -----------------------------
            -----------------
            -----------------
          ------
        -
      ---

      -- ------
      -------------------------------- ------ -- -
        ------------------
      ---

      -- ------
      --------------------------------- ---- -- -
        ----------------
      ---
    ---------
  -------
-------

4. 总结

@mgl是一款非常好用的自雇业务解决方案，封装了非常多常用的业务类组件，可直接进行调用。希望本文对您有所帮助，谢谢！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/136582

阅读全文

猜你喜欢

  • npm 包 @wessberg/browserslist-generator 使用教程

    引言 前端工程师的日常工作中，我们需要关注浏览器兼容性问题，并且根据业务需求选择合适的浏览器版本。常见的做法是使用 Browserslist，它是一个用于获取浏览器列表的工具，支持从 Can I Us...

    5 年前
  • npm 包 @rucken/web 使用教程

    随着现代 web 开发的发展，前端技术也在快速地变化和发展，许多框架和工具不断涌现。其中，npm 是 JavaScript 生态系统中管理和发布包的标准工具。本篇文章将详细介绍如何使用 npm 包 @...

    5 年前
  • npm 包 @rucken/todo-web 使用教程

    前言 在现代互联网应用开发中，使用各种工具和框架是必不可少的。而 npm 是一个不可或缺的工具，它是现代 JavaScript 生态系统中最大的软件仓库。在其中，有很多优秀的前端框架和库，其中就包括 ...

    5 年前
  • npm 包 @rucken/core 使用教程

    前言 在现代 Web 开发中，使用前端框架来开发应用程序已成为一种普遍的趋势。然而，大多数前端框架都有一些限制，如要求使用特定的工具和语言等。因此，使用一些通用的工具和库来支持开发过程是非常有必要的。

    5 年前
  • npm 包 @polvo-labs/react-auth 使用教程

    简介 在现代的前端开发中，使用认证和授权是非常重要的。@polvo-labs/react-auth 是一个提供了 Vue 的认证和授权的 npm 包，在开发过程中，我们可以很方便地使用这个包。

    5 年前
  • npm 包 @nodeswork/sbase 使用教程

    介绍 @nodeswork/sbase 是一个基于 Node.js 的开源 JavaScript 库，为前端开发者提供了一套完整的工具集，使其能够更加高效的完成工作。

    5 年前
  • npm 包 @narwhal/data-engine-core 使用教程

    前言 在当前互联网时代，数据已经被称为新的石油。各类企业和机构都在积极地收集和分析数据，以期获取商业价值。在数据分析领域，数据引擎的作用日益重要。它们扮演着收集、存储、处理和提供数据的角色，为数据分析...

    5 年前
  • npm 包 @lggo/react-ng 使用教程

    什么是 @lggo/react-ng 在前端开发中，我们通常会使用一些开源的 UI 库来快速构建页面，其中 angular.js 是一个颇受欢迎的 MVC 前端框架。

    5 年前
  • npm包 @lggo/react-base使用教程

    简介 在前端开发中，我们常常使用npm包来快速构建项目。其中，@lggo/react-base是一个基于React架构的npm包。它提供了一些常用的组件和工具，可以帮助开发者快速构建React应用。

    5 年前
  • npm 包 @preamp/documentation 使用教程

    在前端开发过程中，写好文档对于代码的可维护性和团队协作都非常重要。然而，写好的文档还需要被呈现出来。@preamp/documentation 就是一个将 Markdown 格式的文档转换为漂亮网页的...

    5 年前
  • npm 包 @geekcojp/min 使用教程

    在前端的开发过程中，我们经常需要处理字符串的压缩和缩短，以便更快地加载我们的网页。而在这个领域里，@geekcojp/min 是一个非常好的 npm 包，它能帮助我们轻松地压缩字符串。

    5 年前
  • npm 包 @exvu/deploy 使用教程

    在现代前端开发中，很多项目都需要部署到服务器上。然而，手动部署往往费时费力，而且容易出错。为此，开发者们开发了各种自动化部署工具，而其中一个优秀的选择就是 @exvu/deploy 这个 npm 包。

    5 年前
  • npm 包 @embroider/core 使用教程

    随着前端技术的快速发展，我们往往需要使用多种包来实现不同的功能。在我们的项目中，引入大量的包可能会导致应用的体积变得庞大，同时也会增加代码的复杂度和维护成本。而现在，@embroider/core 这...

    5 年前
  • npm 包 eslint-plugin-ramda 使用教程

    如果你是一个前端开发者，你肯定知道代码规范是多么重要和必要的。在 JavaScript 中，我们能够使用 eslint 工具来帮助我们检查代码规范问题，例如变量声明和函数格式等等。

    5 年前
  • npm 包 @babel/plugin-proposal-optional-chaining 使用教程

    前言 在前端开发中，我们经常会遇到如下情况：尝试访问对象的某个属性，但是该属性不存在，导致代码抛出异常、终止执行。这通常是因为对象并不总是具有预期的属性结构。ES2020 提供了可选链操作符解决了这个...

    5 年前
  • npm 包 @alkihis/photo-cleaner 使用教程

    1. 前言 在前端开发中，图片处理是一个很重要的环节。对于用户上传的图片，我们需要对其进行压缩和优化，以达到减小图片体积和提升网页性能的目的。而 @alkihis/photo-cleaner 这个 n...

    5 年前
  • npm 包 @ae-scripts/gulp-angular 使用教程

    在前端开发中，使用构建工具来进行打包、压缩和部署等操作是非常常见的。其中，Gulp 是一个非常流行的构建工具，可以实现自动化的构建和部署。同时，Angular 是一个非常流行的前端框架，使用它可以快速...

    5 年前
  • npm 包 @5studio/bundler 使用教程

    简介 前端开发者在项目中需要打包、编译、压缩等操作。npm（node 包管理工具）上有许多工具包，如 webpack、gulp 等。本文介绍另一款 npm 包——@5studio/bundler，它是...

    5 年前
  • npm 包 @types/events 使用教程

    在前端开发中，事件是非常重要的，而 @types/events 则是一款用于 TypeScript 开发时添加事件的包。本文将详细讲解如何使用 @types/events 包，并提供示例代码以帮助读者...

    5 年前
  • npm 包 universal-loading 使用教程

    前言 随着前端开发的不断发展，很多页面需要进行大量的异步加载，但是在加载过程中用户可能会感到无聊或者不耐烦。这时，一个好的 loading 动画可以提高用户的耐心。

    5 年前

相关推荐

    暂无文章