npm 包 @gnucoop/tangram 使用教程

阅读时长 18 分钟读完

简介

@gnucoop/tangram 是一个强大的前端能力库,可以帮助开发者快速构建复杂的 Web 应用。它包含了各种常用的前端组件和工具,比如表格、弹窗、图表等等,可以帮助开发者高效地实现各种前端需求。

本文将介绍 @gnucoop/tangram 的安装和使用方法,并提供相关的示例代码和实战案例,帮助大家快速上手。

安装

@gnucoop/tangram 是一个 npm 包,在使用之前需要先安装。可以使用以下命令安装:

使用

安装后,就可以通过以下方式引入 @gnucoop/tangram:

然后就可以使用 Tangram 提供的各种组件和工具了。接下来将介绍一些常用的组件和工具的使用方法。

表格

Tangram 提供了一个强大的表格组件,可以帮助开发者快速实现复杂的数据展示和处理功能。以下是一个简单的表格示例:

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

------ ------- -
  ------ -
    ------ -
      ----------- -
        - --- -- ----- ----- ---- -- --
        - --- -- ----- ----- ---- -- --
        - --- -- ----- ----- ---- -- --
      --
      -------- -
        - ------ ----- ---------- ---- --
        - ------ ----- ---------- ------ --
        - ------ ----- ---------- ----- --
      --
    -
  --
  ----------- - ------------ --
-
---------
展开代码

上面的示例中,TangramTable 组件接收两个 props:

  • dataSource:数据源,一个数组,元素为表格的每行数据。
  • columns:表头信息,一个数组,元素为表格的每列信息。

TangramTable 还支持一些其他的功能,比如表格排序、分页、筛选等等,详情请参考官方文档。

弹窗

Tangram 还提供了一个弹窗组件,可以帮助开发者快速实现各种弹窗功能,比如提示框、确认框、模态框等等。以下是一个简单的提示框示例:

上面的代码中,$TangramModal 是 Tangram 提供的一个全局方法,可以用于快速调用弹窗组件。调用 info 方法可以创建一个提示框,其中 title 和 content 属性分别为标题和内容。

TangramModal 还支持很多其他的弹窗类型和配置项,详情请参考官方文档。

图表

Tangram 提供了一个基于 echarts 的图表组件,可以帮助开发者快速绘制各种复杂的图表。以下是一个简单的柱状图示例:

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

------ ------- -
  ------ -
    ------ -
      -------- -
        ------ -
          ----- --------
        --
        ------ -
          ----- -----------
          ----- ------ ----- ----- ----- ----- ----- ------
        --
        ------ -
          ----- --------
        --
        ------- -
          -
            ----- -----
            ----- ------
            ----- ----- ---- ---- --- --- ---- -----
          --
        --
      --
      ------ --------
      ------- -
        ------ --------
        ------- --------
      --
    -
  --
  ----------- - ------------ --
-
---------
展开代码

上面的示例中,TangramChart 组件接收三个 props:

  • options:图表配置,一个对象,用于配置图表的各种属性,比如标题、坐标轴、数据系列等等。
  • theme:主题,一个字符串,用于指定图表的主题。目前支持两个主题:light 和 dark。
  • styles:样式,一个对象,用于指定图表容器的样式,比如宽度、高度等等。

TangramChart 还支持其他的图表类型和配置项,详情请参考官方文档。

实战案例

@gnucoop/tangram 是一个非常强大的前端能力库,可以帮助开发者快速实现各种前端需求。下面将介绍一个实战案例,演示如何使用 @gnucoop/tangram 实现一个完整的数据管理系统。

需求分析

假设我们现在有一个需求,需要实现一个简单的数据管理系统。该系统需要实现以下功能:

  • 显示数据表格,支持增删改查操作。
  • 支持数据的导入和导出,导入时需要做数据格式校验。
  • 显示数据的图表,支持多种图表类型和配置。

实现步骤

  1. 首先需要安装 @gnucoop/tangram:
  1. 然后需要引入 TangramTable、TangramModal 和 TangramChart 组件:
  1. 在页面中使用 TangramTable 组件,并为其传入 dataSource 和 columns 两个属性,以展示数据表格的内容:
-- -------------------- ---- -------
----------
  -----
    -------------
      ------------------------
      ------------------
    --
  ------
-----------
--------
------ - ------------ - ---- ------------------

------ ------- -
  ------ -
    ------ -
      ----------- -
        - --- -- ----- ----- ---- -- --
        - --- -- ----- ----- ---- -- --
        - --- -- ----- ----- ---- -- --
      --
      -------- -
        - ------ ----- ---------- ----- --------- ---- --
        - ------ ----- ---------- ------- --------- ---- --
        - ------ ----- ---------- ------ --------- ---- --
        -
          ------ -----
          ------- ------ ------- ------ -- -
            ------ -
              -----
                -- ----------- -- -------------------------------
                -- ----------- -- --------------------------------
              ------
            -
          --
        --
      --
    -
  --
  ----------- - ------------ --
  -------- -
    ------------------ -
      ------------------ - ------
      -------------- - ----
    --
    ------------------- -
      ----------------------------- --
    --
  --
-
---------
展开代码

上面的代码中,dataSource 和 columns 两个属性分别为数据源和表头信息。editable 属性表示该列是否可编辑,render 方法用于渲染自定义的内容(比如操作按钮等等)。

  1. 然后需要实现增删改查操作。增加数据和编辑数据可以使用弹窗组件 TangramModal,具体实现如下:
-- -------------------- ---- -------
----------
  -----
    -------------
      ------------------------
      ------------------
    --
    -------------
      -------------------
      ------------
    -
      -----
        ------------------
        ------ ----------------------------
      ------
      -----
        ------------------
        ------ ------------------------------
      ------
      -----
        ------------------
        ------ -----------------------------
      ------
      ---- --------------
        ------- ---------------------------------
        ------- -------------------------------
      ------
    ---------------
  ------
-----------
--------
------ - ------------- ------------ - ---- ------------------

------ ------- -
  ------ -
    ------ -
      ----------- -
        - --- -- ----- ----- ---- -- --
        - --- -- ----- ----- ---- -- --
        - --- -- ----- ----- ---- -- --
      --
      -------- -
        - ------ ----- ---------- ----- --------- ---- --
        - ------ ----- ---------- ------- --------- ---- --
        - ------ ----- ---------- ------ --------- ---- --
        -
          ------ -----
          ------- ------ ------- ------ -- -
            ------ -
              -----
                -- ----------- -- -------------------------------
                -- ----------- -- --------------------------------
              ------
            -
          --
        --
      --
      ---------- ------
      -------------- ---
    -
  --
  ----------- - ------------- ------------ --
  -------- -
    ------------------ -
      ------------------ - ------
      -------------- - ----
    --
    -------------- -
      -------------- - -----
    --
    ------------ -
      -- ----------
      -- ---
      -------------- - -----
    --
    ------------------- -
      ----------------------------- --
    --
  --
-
---------
展开代码

其中 isEditing 和 currentRecord 两个属性用于控制编辑弹窗的显示和编辑时的数据。handleSave 方法中可以进行对数据的校验和处理逻辑。

  1. 接着需要实现数据的导入和导出功能。Tangram 提供了一个 EExcel 工具类,该工具类可以用于进行 Excel 文件的读取和写入。具体实现如下:
-- -------------------- ---- -------
------ - ------ - ---- ------------------

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

-------------- -
  ----- -------- - --- -----------------
  ----- --------- - ----------------------------
  ----------------- - -
    - ------- ----- ---- ----- ------ -- --
    - ------- ----- ---- ------- ------ -- --
    - ------- ----- ---- ------ ------ -- --
  -
  -------------------------------- ------ -- -
    ------------------ --- ---------- ----- ------------ ---- ---------- --
  --
  ----------------------------
--
展开代码

上面的代码中,handleImport 方法使用 FileReader 对象将导入的 Excel 文件读取为 ArrayBuffer,然后使用 EExcel 工具类对数据进行解析。handleExport 方法使用 EExcel 工具类将数据写入到 Excel 文件中,并下载到本地。

  1. 最后需要实现数据的图表展示功能。可以使用 TangramChart 组件来展示图表。具体实现如下:
-- -------------------- ---- -------
----------
  -----
    -------------
      ------------------------
      ------------------
    --
    -------------
      -------------------
      ------------
    -
      -----
        ------------------
        ------ ----------------------------
      ------
      -----
        ------------------
        ------ ------------------------------
      ------
      -----
        ------------------
        ------ -----------------------------
      ------
      ---- --------------
        ------- ---------------------------------
        ------- -------------------------------
      ------
    ---------------
    -------------
      -----------------------
      -------------------
      ---------------------
    --
  ------
-----------
--------
------ - ------------- ------------- ------------ - ---- ------------------

------ ------- -
  ------ -
    ------ -
      ----------- -
        - --- -- ----- ----- ---- -- --
        - --- -- ----- ----- ---- -- --
        - --- -- ----- ----- ---- -- --
      --
      -------- -
        - ------ ----- ---------- ----- --------- ---- --
        - ------ ----- ---------- ------- --------- ---- --
        - ------ ----- ---------- ------ --------- ---- --
        -
          ------ -----
          ------- ------ ------- ------ -- -
            ------ -
              -----
                -- ----------- -- -------------------------------
                -- ----------- -- --------------------------------
              ------
            -
          --
        --
      --
      ---------- ------
      -------------- ---
      ------------- -
        ------ -
          ----- --------
        --
        ------ -
          ----- -----------
          ----- ------ ----- ----- ----- ----- ----- ------
        --
        ------ -
          ----- --------
        --
        ------- -
          -
            ----- -----
            ----- ------
            ----- ----- ---- ---- --- --- ---- -----
          --
        --
      --
      ----------- --------
      ------------ -
        ------ --------
        ------- --------
      --
    -
  --
  ----------- - ------------- ------------- ------------ --
  -------- -
    ------------------ -
      ------------------ - ------
      -------------- - ----
    --
    -------------- -
      -------------- - -----
    --
    ------------ -
      -- ----------
      -- ---
      -------------- - -----
    --
    ------------------- -
      ----------------------------- --
    --
  --
-
---------
展开代码

上面的代码中,chartOptions、chartTheme 和 chartStyles 属性分别用于指定图表的配置、主题和样式。

至此,一个完整的数据管理系统就实现了。

总结

本文介绍了 @gnucoop/tangram 的安装和使用方法,并提供了相关的示例代码和实战案例。@gnucoop/tangram 是一个非常强大的前端能力库,可以帮助开发者快速构建复杂的 Web 应用。希望本文能够帮助读者更好地使用 @gnucoop/tangram,提高前端开发效率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005678b81e8991b448e3eaf

纠错
反馈

纠错反馈