Tabler Components 是一个基于 Bootstrap 4 和 Vue.js 搭建的前端 UI 组件库。其中的 Tabler-Components-Button 是 Tabler Components 中的按钮组件，用于快速轻松地向页面中添加按钮。
安装和使用
安装
安装 Tabler-Components-Button 很简单，只需在命令行中输入以下命令：
npm install --save tabler-components-button
使用
使用 Tabler-Components-Button 也很简单。只需 import 即可，如下所示：
import { TcButton } from 'tabler-components-button'在 Vue 单文件组件中，可以像这样使用：
-- -------------------- ---- -------
----------
-----
--------------- -------------
------
-----------
--------
------ - -------- - ---- --------------------------
------ ------- -
----------- -
--------
-
-
---------属性和事件
属性
Tabler-Components-Button 中的属性如下表所示：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| type | String | 'button' | 按钮类型 |
| size | String | 'md' | 按钮尺寸 |
| variant | String | 'primary' | 按钮变体 |
| block | Boolean | false | 按钮宽度是否为 100% |
| disabled | Boolean | false | 是否禁用按钮 |
事件
Tabler-Components-Button 中的事件如下表所示：
| 事件 | 描述 |
|---|---|
| click | 点击按钮时触发的回调函数 |
示例代码
以下是一个简单的 Vue 单文件组件，展示了 Tabler-Components-Button 的使用方式：
-- -------------------- ---- -------
----------
-----
---------- ---------- ------ ---------
-----
----------------- -----------------
--------- ------------- ------------------------ -----------------
--------- ---------------- ----------------- -----------------
--------- ----- ----------------------- -----------------
------
------
-----------
--------
------ - -------- - ---- --------------------------
------ ------- -
----------- -
--------
-
-
---------结论
通过本篇文章，我们了解了 npm 包 tabler-components-button 的安装和使用方法，以及其提供的属性和事件，希望这篇文章能够帮助你更好地使用 Tabler-Components-Button。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c4381e8991b448ebc8f