npm 包 gb-components2 使用教程

介绍

gb-components2 是一款基于 Vue.js 的组件库,支持按需加载,拥有丰富的UI组件,适用于快速开发中后台系统。

安装

使用 npm 安装

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

引入

推荐采用 babel-plugin-import 按需引入

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

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

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

使用

GbButton

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

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

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

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

GbTable

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

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

参数

GbButton

参数名 类型 说明
type String 按钮类型:primary、success、warning、danger
icon String 按钮图标,支持 font-awesome
loading Boolean 是否处于 loading 状态
disabled Boolean 是否禁用按钮,默认为 false

GbTable

参数名 类型 说明
columns Array 表格列的配置描述,具体格式见下方
list Array 数据源

columns 列的配置描述

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

拓展

gb-components2 提供了一些便利性的 API,使得开发者可以更加方便地使用组件,具体可参考官方文档

总结

gb-components2 是一款很好用的 Vue.js 组件库,拥有丰富的UI组件,使用方便,可大幅提升中后台开发效率。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005679481e8991b448e3edc


猜你喜欢

  • npm 包 js-to-scss 使用教程

    随着前端技术的不断发展,我们需要一种便捷的方式去管理和编写样式表。在这篇文章中,我将会介绍一个非常实用的 npm 包:js-to-scss。它可以把 js 对象转化为 scss 样式表。

    3 年前
  • npm 包 antd-import 使用教程

    在前端开发中,使用外部的 UI 组件库可以显著地提高开发效率和产品质量。The Ant Design 是一个流行的 UI 组件库,其 NPM 包的名称为 antd。

    3 年前
  • npm 包 cordova-plugin-equil-smart-pen 使用教程

    简介 cordova-plugin-equil-smart-pen 是一款能够与 Equil Smartpen 相互通讯的 Cordova 插件。Equil Smartpen 是一款可以实时将手写笔记...

    3 年前
  • npm 包 vue-projection-grid 使用教程

    前言 在现代 web 开发中,前端框架已经是必不可少的。而在任何一个前端框架中,表格都是常常使用到的一个组件。vue-projection-grid 就是一个基于 Vue.js 的表格组件。

    3 年前
  • npm 包 babel-plugin-decompose 使用教程

    随着前端项目的日益复杂,JavaScript 代码的可维护性和可复用性成为开发者关注的焦点。为了能够更好地解决这个问题,我们使用了 ES6+ 的语法,但是在一些项目中可能使用了一些不兼容的语法特性,导...

    3 年前
  • npm 包 compages 使用教程

    介绍 compages 是一个基于 React 的组件库,提供了常用的 UI 组件,如按钮、输入框、选择器等,可以帮助开发者快速搭建前端应用的 UI 界面,提高开发效率。

    3 年前
  • npm 包 cut-up-method-js 使用教程

    前言 在前端领域,我们经常需要将字符串按照指定长度进行分割,以便于格式化、展示等操作。cut-up-method-js 是一个提供字符串分割功能的 npm 包,本文将从安装、基础用法、高级用法和实战案...

    3 年前
  • npm 包 generator-swagen 使用教程

    本文介绍了一个名为 generator-swagen 的 npm 包的使用方法。generator-swagen 是一个 Swagger API 文档自动生成器,可以帮助前端开发人员从 Swagger...

    3 年前
  • npm 包 happn-stats-elasticsearch 使用教程

    npm 是一个非常重要的前端开发工具,在大多数前端项目中都会使用到。其中 happn-stats-elasticsearch 是一个使用较为频繁的包,本文将为大家介绍该包的使用详解。

    3 年前
  • npm 包 react-redux-shopping-cart 使用教程

    在前端开发中,购物车是一个非常基础的功能,而实现购物车功能时,使用 react-redux 的 state 管理库可以非常方便地实现购物车的状态管理和数据绑定。npm 包 react-redux-sh...

    3 年前
  • npm包simple-sheets-reader使用教程

    在前端开发中,读取Google Sheets中的数据是一项非常常见的任务。而npm包simple-sheets-reader则提供了一个简单、易用的解决方案,可以轻松地将Google Sheets中的...

    3 年前
  • npm 包 react-star-rating-chart 使用教程

    介绍 react-star-rating-chart 是一个基于 React 的评分图表组件,可以用来展示评分数据并以星星形式呈现。使用该组件可以轻松地在你的项目中添加一个美观、易于理解的评分图表,展...

    3 年前
  • npm 包 choo-choo 使用教程

    简介 Choo-choo 是一个基于 Node.js 的轻量级 Web 框架,它提供了一系列的工具和 API,帮助开发者快速构建 Web 应用。 安装 首先,需要在本地安装 Node.js 环境,可以...

    3 年前
  • npm 包 tsg.database.mongo 使用教程

    介绍 tsg.database.mongo 是一个基于 TypeScript 的 Mongo 数据库操作库,封装了常用的 CRUD 操作,提供了良好的类型支持。 它基于官方的 mongodb npm ...

    3 年前
  • npm 包 imap-box-names 使用教程

    在后端开发中,邮件服务是必不可少的一部分。而前端开发中,我们通常需要通过 IMAP 协议来获取邮件的信息。node.js 中的 imap 模块是一个非常流行的库,它能够轻松地和 IMAP 服务器交互。

    3 年前
  • npm 包 m-keyboard 使用教程

    在前端开发中,经常需要使用键盘输入,如何提高键盘输入效率和用户体验?npm 包 m-keyboard 可以帮助你实现自定义键盘输入,本文将为大家介绍 m-keyboard 的使用教程。

    3 年前
  • npm 包 node-salesforce-aa 使用教程

    引言 Salesforce 是一种领先的企业云计算解决方案,它提供了广泛的资源和工具,帮助企业管理客户关系、营销策略以及销售。而 node-salesforce-aa 是一个 npm 包,提供了用于连...

    3 年前
  • npm 包 vnng-eventjs 使用教程

    vnng-eventjs 是一个基于 JavaScript 的事件处理库,它可以轻松地为 Web 应用程序中的 DOM 元素添加事件处理程序。利用此库可以快速实现事件委托、事件控制、事件拦截等功能。

    3 年前
  • npm 包 eleanor-split-test 使用教程

    在前端开发工作中,经常需要进行 A/B 测试来优化网站体验和流程,但对于每次 A/B 测试都编写、管理大量的测试代码和样式是非常麻烦和耗时的。npm 包 eleanor-split-test (以下简...

    3 年前
  • npm 包 homematic-virtual-dashbutton 使用教程

    前言 在现代的家庭中,智能家居产品的使用越来越普及,其中 Homematic 是一个专业的智能家居解决方案。虚拟 Dashbutton 则是 Homematic 中一个非常实用的功能。

    3 年前

相关推荐

    暂无文章