前言
在前端开发中，经常需要使用各种 UI 组件，而手写组件代码又是苦力活。一个开源的、高质量的、易用的组件库可以提高开发效率，降低开发成本。nt-web-button 就是这样一个优秀的组件库，它提供了常见的 Button 组件，可以覆盖大部分开发需求。
安装
nt-web-button 作为 npm 包，需要通过 npm 安装。在终端中执行如下命令：
npm install nt-web-button --save
使用
在项目中的入口文件（比如 main.js）中引入组件库：
import Vue from 'vue' import NtWebButton from 'nt-web-button' Vue.use(NtWebButton)
这样，整个项目都已经可以使用 nt-web-button 提供的组件了。
在组件中使用 Button，可以通过如下方式：
-- -------------------- ---- ------- ---------- ---------------- -------------- ----------- -------- ------ ------- - ----- ------------- - ---------
API
Button 组件提供了一些可配置的参数，下面是常用参数的说明。
type
- 类型：String
- 默认值：'default'
按钮类型，取值为 'primary'、'default'、'success'、'info'、'warning'、'danger'。
size
- 类型：String
- 默认值：'medium'
按钮尺寸，取值为 'large'、'medium'、'small'、'mini'。
disabled
- 类型：Boolean
- 默认值：false
禁用按钮。
plain
- 类型：Boolean
- 默认值：false
朴素按钮。
round
- 类型：Boolean
- 默认值：false
圆角按钮。
circle
- 类型：Boolean
- 默认值：false
圆形按钮。
icon
- 类型：String
- 默认值：无
图标类名，例如 'el-icon-search'。
示例代码
-- -------------------- ---- -------
----------
-----
------------------------------
---------- ----------------------------------
---------- ----------------------------------
---------- ----------------------------------
---------- --------------------------------
----
---------- -----------------------
---------- ----- ---------------------- -----------------
---------- ----- ---------------------- -----------------
---------- ----- ---------------------- -----------------
---------- ----- -------------------- -----------------
----
---------- ------------------------------
-----------------------------
---------- ------------------------------
---------- ----------------------------
----
---------- -----------------------
---------- -------------------------
---------- -------------------------- ----------------
---------- -----------------------------
------
-----------
--------
------ ------- -
----- -------------
-
---------结语
nt-web-button 是一个高质量的组件库，使用方便，可以极大地提升开发效率。希望大家可以多多使用、支持和贡献。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f943d1de16d83a66c66