npm 包 @beisen-cmps/italent-functional-zone 使用教程

简介

@beisen-cmps/italent-functional-zone 是用于后端开发人员方便开发和维护前端应用的一个工具类库。该库提供了一些高阶函数和工具函数,用来快速构建表单、表格、模态框等常见业务模块。

安装

你可以通过 npm 下载并使用 @beisen-cmps/italent-functional-zone。执行以下命令即可:

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

使用

引入

在使用 @beisen-cmps/italent-functional-zone 之前,需要先引入它。有两种引入方式:

  • 作为全局变量使用:
------ --------------- ---- --------------------------------------- -- ---

-- --
----- --------------- - -------------------------------------------------------- -- --------
  • 作为组件使用:
------ - --------- - ---- --------------------------------------

功能说明

@beisen-cmps/italent-functional-zone 提供的功能主要分为如下几类:

  • UI 组件:提供了一些基础组件,方便业务模块的开发;
  • 高阶函数:对于一些通用的业务操作,提供了一些高阶函数,以减少代码重复性;
  • 工具函数:提供了一些方便操作的工具函数。

UI 组件说明

  • SizeInput

    SizeInput 是一个可输入数字的组件,支持设置大小范围。

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

高阶函数说明

  • withPagination

    withPagination 是一个高阶函数,在分页时可以使用它,减少代码重复性。

    ----- ----- - ---
    ----- ----------- - --
    ----- ------ --------------- - ---------------------
    ----- ------------ -------------- - ----------
      --------- ------
      -------- ------------
    ---
    ----- ------- - ------------------ -- -
      ---------------------
      --------------- -------------- -------- ---- ---
    -- ----
    
    ----- ------- - -------------- -- -
      ------ ---------------------------- -------
    -- ------------- --------
    
    ----- ------- - ---------------------------------
    -- ------- -- ------- ------------
  • withModal

    withModal 是一个高阶函数,在使用模态框时可以使用它,减少代码重复性。

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

工具函数说明

  • createColumns

    createColumns 可以生成 Ant Design 的表格列配置对象,方便操作表格。

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

示例代码

以下为一段使用 @beisen-cmps/italent-functional-zone 后的代码示例:

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

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

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

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

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

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

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

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

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

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

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

结语

@beisen-cmps/italent-functional-zone 是一个实用的前端库,它提供了一些常用工具函数和高阶函数,可以快速开发业务模块并提高代码的复用性。在日常前端开发中,我们可以善用这些工具提高开发效率。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/beisen-cmps-italent-functional-zone


猜你喜欢

  • npm 包 @beisen-cmps/italent-feed-8 的使用教程

    前言 @beisen-cmps/italent-feed-8 是领英中国公司出品的一款前端组件库,其所包含的 italent-feed-8 组件主要用于显示人才推荐、招聘职位等内容。

    4 年前
  • npm 包 @beisen-cmps/italent-feed-7 使用教程

    @beisen-cmps/italent-feed-7 是一款前端开发中非常实用的 npm 包,旨在为用户提供一种方便、快捷的方式获取人才库中的相关信息。本文将介绍该 npm 包的使用教程,包括安装、...

    4 年前
  • npm 包 @beisen-cmps/italent-feed-4 使用教程

    前言 随着前端技术的发展和普及,我们已经不再限制于使用常规的 jQuery 和 JavaScript,而是可以使用各种优秀的 npm 包来解决我们的前端需求。 其中,@beisen-cmps/ital...

    4 年前
  • npm 包 ux-m-platform-modal 使用教程

    在前端开发中,模态框是一个非常常见的 UI 组件,可以用来展示弹出的信息、与用户进行交互等。为了方便开发者快速构建高质量的模态框组件,ux-m-platform-modal 这个 npm 包应运而生。

    4 年前
  • npm 包 rc-cropping 使用教程

    在前端开发中,处理图片是一个非常常见的需求。而一款实用的图片裁剪工具,可以提高我们的工作效率和用户体验。npm 包 rc-cropping 就是这样一款非常实用的图片裁剪工具。

    4 年前
  • npm 包 @beisen-platform/target-pop 使用教程

    @beisen-platform/target-pop 是一款前端 UI 组件,通过在页面上动态生成弹框,实现弹框提示功能。它提供了多种类型的弹框样式,并支持弹框内容自定义。

    4 年前
  • npm 包 shineout 使用教程

    什么是 shineout? shineout 是一个基于 React 的 UI 组件库,提供了一系列高质量的组件,包括按钮、表单、表格等等。它提供了丰富的主题配置,可以根据不同的项目需求,选择不同的主...

    4 年前
  • npm 包 italent-subordinate-tree 使用教程

    前言 italent-subordinate-tree 是一款 NPM 包,它提供了一种将员工关系树形化的解决方案。使用该包可以将员工之间的主管下属关系转化为树形结构进行展示,方便用户快速了解团队内部...

    4 年前
  • NPM 包 italent-share-box 使用教程

    什么是 italent-share-box? italent-share-box 是一个基于 React 的社交分享组件库。它提供了包括微信、QQ、微博、Facebook、Twitter 在内的多种社...

    4 年前
  • npm包@reacted/use-ajax-upload使用教程

    @reacted/use-ajax-upload 是一个 React Hooks 插件,可以轻松实现 AJAX 文件上传的功能。此插件使用简单,可以使用无需获取过多的 AJAX 细节,最适合初学者。

    4 年前
  • npm包@beisen/um-rich-editor使用教程

    前言 在前端开发中,富文本编辑器是大家经常使用的一个工具,它既方便了用户输入,又能让网页内容更加生动有趣。今天,我们来介绍一款基于UMEDITOR的富文本编辑器插件@beisen/um-rich-ed...

    4 年前
  • npm 包 @beisen/timeline-wrapper 使用教程

    前言 @beisen/timeline-wrapper 是一个以 Ant Design Timeline 为基础组件封装的,适用于非静态简单时间线的 React 组件。

    4 年前
  • npm 包 @beisen/ocean-tree 使用教程

    前言 在前端开发中,树形控件是非常常见的 UI 组件,可以用于展示层级关系、目录结构等。在实现树形控件时,我们通常需要考虑如何组织数据、如何渲染节点等问题。这时,npm 包 @beisen/ocean...

    4 年前
  • npm 包 @beisen/day-picker 使用教程

    什么是 @beisen/day-picker @beisen/day-picker 是一个基于 React 的日期选择组件,提供了丰富的日期选择功能。这个组件帮助开发者快速、方便地选择日期,同时也能够...

    4 年前
  • npm 包 @beisen-cmps/italent-feedlist-wrapper 使用教程

    在前端开发中,开发者需要使用不同的工具和技术来完成任务。其中,使用 npm 包是一种常见的方式,可以加快开发速度并提高开发效率。本文将介绍 npm 包 @beisen-cmps/italent-fee...

    4 年前
  • npm 包 @beisen-cmps/italent-feed-container 使用教程

    前言 在前端开发中,我们经常需要展示数据列表,而一个好的列表容器能够让我们的开发效率更高,让我们的前端页面看起来更加美观,在这篇文章中,我们将会讲解如何使用 npm 包 @beisen-cmps/it...

    4 年前
  • npm 包 react-scrollbar 使用教程

    简介 React Scrollbar 是一个基于 React 的滚动条组件,使用方便,具有高度的自定义性和可扩展性。在本文中,我们将学习如何使用 React Scrollbar 包,包括安装、配置和使...

    4 年前
  • npm 包 italent-icon 使用教程

    前言 在前端开发中,我们经常需要使用各种图标来设计网站或应用程序。为了便于使用,有很多现代化的方式来获取图标。其中,一种流行的方式是使用 npm 包。 在本文中,我们将介绍如何使用 npm 包 ita...

    4 年前
  • npm 包 @beisen/talentjs-ui 使用教程

    在前端开发中,我们经常使用各种第三方库来提高开发效率和代码质量。@beisen/talentjs-ui 是一个针对人才招聘领域开发的 UI 组件库,提供了丰富的组件和样式,能够方便快捷地构建招聘网站的...

    4 年前
  • npm 包 @beisen/user-selector 使用教程

    在前端开发过程中,用户选择器是很常用的一个组件。@beisen/user-selector 是一款方便易用的用户选择器组件,支持多选/单选,提供搜索功能,同时还支持自定义页面。

    4 年前

相关推荐

    暂无文章