简介
@backtothecode/vm-ui-library 是一个优秀的前端 UI 库，它包含了许多常见组件，例如：按钮、输入框、表格、弹窗等等。此外，该 UI 库支持自定义主题，能够轻松地集成到您的项目中使用。
安装
您可以通过 npm 进行安装
npm i @backtothecode/vm-ui-library
使用
通过以下方式，在您的项目中使用 @backtothecode/vm-ui-library：
import Vue from 'vue'; import BackToTheCodeUI from '@backtothecode/vm-ui-library'; Vue.use(BackToTheCodeUI);
完成上述操作后，您便可以在您的项目中使用该 UI 库中的组件了。
组件列表
@backtothecode/vm-ui-library 包含了以下常见组件：
Button
Button 组件有如下的 props 可以使用：
| 属性 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| type | String | 按钮类型 | 'default' |
| size | String | 按钮大小 | 'medium' |
| disabled | Boolean | 禁用 | false |
| loading | Boolean | 加载中 | false |
示例：
<back-to-the-code-button type="primary" size="large" :disabled="true" :loading="true" > 再等一下下 </back-to-the-code-button>
Input
Input 组件有如下的 props 可以使用：
| 属性 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| type | String | 输入框类型 | 'text' |
| clearable | Boolean | 可以清空 | false |
| maxlength | Number | 最大长度 | - |
示例：
<back-to-the-code-input type="password" placeholder="请输入密码" :clearable="true" :maxlength="20" ></back-to-the-code-input>
Table
Table 组件有如下的 props 可以使用：
| 属性 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| columns | Array | 表格列配置 | [] |
| data | Array | 表格数据 | [] |
| height | String | 表格高度 | 'auto' |
| border | Boolean | 是否显示边框 | false |
| stripe | Boolean | 是否显示斑马纹 | false |
示例：
-- -------------------- ---- -------
-----------------------
-----------
-
------ -----
---- -------
--
-
------ -----
---- ------
--
--
--------
-
----- -----
---- ---
--
-
----- -----
---- ---
--
--
------
------
--------------------------Dialog
Dialog 组件有如下的 props 可以使用：
| 属性 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| title | String | 标题 | '' |
| visible | Boolean | 是否显示弹窗 | false |
| width | String | 宽度 | '50%' |
| show-close | Boolean | 是否显示关闭按钮 | true |
同时，该组件也包含了以下 slot：
| 名称 | 说明 |
|---|---|
| default | 弹窗主体内容 |
| footer | 弹窗底部内容 |
示例：
-- -------------------- ---- -------
------------------------
--------------
------------------------
--------------------- - ------
-
-------------
--------- --------
------------------------ -------------- --------------------- - -----------------------------------
------------------------ --------------------- - -----------------------------------
-----------
--------------------------主题定制
@backtothecode/vm-ui-library 支持主题定制。您可以修改其中的 Sass 变量，然后进行编译生成您定制的样式文件。
以下是该 UI 库的一些常见变量：
| 变量 | 说明 | 默认值 |
|---|---|---|
| $color-primary | 主颜色 | #409EFF |
| $color-success | 成功颜色 | #67C23A |
| $color-warning | 警告颜色 | #E6A23C |
| $color-danger | 错误颜色 | #F56C6C |
| $color-info | 信息颜色 | #909399 |
| $text-color | 主文本颜色 | #606266 |
| $font-family | 字体 | -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif |
| $text-color-secondary | 次文本颜色 | #909399 |
结束语
@backtothecode/vm-ui-library 是一个优秀的前端 UI 库，能够提供常见的组件和样式，同时支持自定义主题。希望本篇文章对您有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/131674