npm 包 @gnucoop/tangram 使用教程

简介

@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

阅读全文

猜你喜欢

  • npm 包 ngx-mgauge 使用教程

    前言 随着前端技术的发展，动态数据的可视化成为了一个越来越重要的需求。ngx-mgauge 是一个可定制的仪表盘组件，可以方便地将数据以仪表盘的形式展示出来。在这篇文章中，我们将学习如何使用 ngx-...

    3 年前
  • npm 包 storybook-window-size 使用教程

    在前端开发中，一些组件或页面的展示效果会受到浏览器窗口大小的影响。而在调试或展示过程中，经常需要模拟不同的窗口大小效果。本文介绍 npm 包 storybook-window-size，用于在 Sto...

    3 年前
  • npm 包 express-uuap 使用教程

    简介 express-uuap 是一个 Node.js 的中间件，可用于将 UUAP（银联用户账号系统）作为身份验证模块。通过集成 express-uuap，可以轻松地为基于 Express 的 We...

    3 年前
  • npm 包 screepsmod-visualize 使用教程

    简介 screepsmod-visualize 是一个在 Screeps 游戏中提供实时地图预览、信息展示以及运行状态监测的 npm 包，是开发 Screeps 前端项目时最常用的工具之一。

    3 年前
  • npm 包 array.findIndex 使用教程

    array.findIndex() 是 JavaScript 原生数组方法之一，它用于在数组中查找一个元素并返回它的索引。这个方法可以用来在前端开发中进行快速的数组元素查找和索引操作。

    3 年前
  • npm 包 blanket-animation 使用教程

    简介 blanket-animation 是一个轻量级的 JavaScript 库，用于在网页上实现各种动画效果。通过使用 blanket-animation，开发者可以轻松地为网站添加漂亮的动画效果...

    3 年前
  • npm 包 ukey1-jquery-sdk 使用教程

    在现代 web 开发中，前端技术的快速发展让我们拥有了越来越多强大的工具来帮助我们更高效、更易用地构建出功能强大的网站和应用。在这个过程中，npm 包是其中的一个重要环节。

    3 年前
  • npm 包 coffee-require 使用教程

    介绍 Coffee-require 是一个 npm 包，它是一种 node.js 的模块加载器，允许在 node.js 中使用 CoffeeScript 编写模块。

    3 年前
  • npm 包 cordova-plugin-siths-manager 使用教程

    前言 在前端开发中，我们常常需要通过手机原生功能来实现更加复杂的交互体验，而 Cordova 就是一种可以实现跨平台的移动应用开发框架。在使用 Cordova 进行开发时，我们需要引入不同的插件来实现...

    3 年前
  • npm 包 cordova-plugin-wininsoft-webintent 使用教程

    简介 cordova-plugin-wininsoft-webintent 是一个基于 Cordova 的插件，用于打开 Android 平台上其他应用程序的 Activity。

    3 年前
  • npm 包 elementcss 使用教程

    在前端开发中，CSS 是必不可少的一部分。而随着项目复杂度的增加，CSS 样式文件的长度也越来越难以管理。为了解决这个问题，我们可以依赖一些 CSS 框架来规范化样式文件。

    3 年前
  • npm 包 gg-aframe 使用教程

    介绍 gg-aframe 是一个基于 A-Frame 的工具集，用于快速制作和开发 VR/AR 网站和应用程序。它提供了丰富的组件和实用工具，以简化我们的开发过程。

    3 年前
  • npm 包 point2place 使用教程

    point2place 是一个方便实用的 npm 包，可以将地理坐标转换为地理位置信息。在前端开发中，对于一些需要使用地理位置信息的应用来说，这个包既可以提高开发效率，又可以避免一些复杂的地理位置计算...

    3 年前
  • npm 包 node-ip-location 使用教程

    在前端开发中，经常会需要根据用户 IP 地址获取其位置信息，以便提供更精准的服务。而 npm 包 node-ip-location 就是一款可以帮助我们实现这一功能的工具。

    3 年前
  • npm 包 sockets-pool 使用教程

    在前端应用程序中，网络连接是必不可少的。为了确保应用程序的速度和稳定性，使用连接池是一种非常流行的方法。sockets-pool 是一个 npm 包，可以帮助前端开发者轻松地管理连接池。

    3 年前
  • npm 包 rasa-nlu-trainer-with-typo 使用教程

    介绍 rasa-nlu-trainer-with-typo 是一个用于 Rasa NLU 机器学习模型训练的 npm 包。它可以较为方便地从 Rasa NLU 模型的训练数据中提取错误信息，从而更好地...

    3 年前
  • NPM 包：vue-auto-float-directive

    介绍 vue-auto-float-directive 是一个 Vue.js 指令，用于在滚动时自动将元素浮动。它是一个基于 sticky 的解决方案，可以轻松地实现瀑布流布局和吸底效果，并且支持多种...

    3 年前
  • npm 包 yeedriver-webcamera 使用教程

    随着互联网的发展，现代网页已经不再只是简单的文本和图片展示了。现在的网页需要更加丰富和动态的交互，而这些复杂的交互往往需要使用到一些前端库和工具。 npm 是一个非常流行的 Node.js 包管理工具...

    3 年前
  • npm 包 @aureooms/js-fliplist 使用教程

    介绍 @aureooms/js-fliplist 是一个 JavaScript 库，用于表示和操作排序后的列表。它实现了一个叫做「翻转列表」的数据结构，这个数据结构可以用于高效地支持以下操作： 插入...

    3 年前
  • npm 包 @kirpichik/kirpichik-vue 使用教程

    介绍 @kirpichik/kirpichik-vue 是一个 Vue 组件库，提供了一些常用的 UI 组件和工具，可以帮助开发者更快速地搭建 Vue 项目和实现常用功能。

    3 年前

相关推荐

    暂无文章