1. 简介
ci360-dashboard-common-vue 是一个基于 Vue.js 框架的 npm 包，提供了一些公共的组件、样式和工具函数。它旨在为前端开发者提供更便捷、高效的开发体验。
2. 安装
通过 npm 安装 ci360-dashboard-common-vue：
--- ------- -------------------------- ------
3. 使用
在 Vue 项目中，可以通过 import 命令引入 ci360-dashboard-common-vue：
------ --- ---- ------ ------ ----------------------- ---- ----------------------------- ---------------------------------
就可以在组件中使用 ci360-dashboard-common-vue 提供的组件和函数了。
3.1 组件
ci360-dashboard-common-vue 提供了一些常用的组件：
3.1.1 CdButton
CdButton 组件是一个样式统一的按钮组件，可以通过属性传递不同的样式和事件。
---------- ------------------- -------------------------- --------------
------ ------- -
-------- -
------------- -
------------------- ----------
-
-
-CdButton 组件支持的属性：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| type | String | primary | 按钮类型，可选值：primary、success、warning、danger、info |
| disabled | Boolean | false | 是否禁用按钮 |
| loading | Boolean | false | 是否显示加载中状态 |
| icon | String | - | 按钮图标（使用 font-awesome 图标库） |
3.1.2 CdIcon
CdIcon 组件是一个显示图标的组件，使用 font-awesome 图标库。
-------- ----------- --
CdIcon 组件支持的属性：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| name | String | - | 图标名称（使用 font-awesome 图标库） |
3.1.3 CdInput
CdInput 组件是一个样式统一的输入框组件，可以通过属性设置不同的样式和事件。
--------- -------------------- -------------------- --
------ ------- -
------ -
------ -
----------- --
-
-
-CdInput 组件支持的属性：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| type | String | text | 输入框类型，可选值：text、password |
| placeholder | String | - | 输入框 placeholder 显示的文本 |
| readonly | Boolean | false | 是否只读 |
| disabled | Boolean | false | 是否禁用 |
| clearable | Boolean | false | 是否显示清空按钮 |
3.1.4 CdSnackbar
CdSnackbar 组件是一个消息提示组件，可以通过属性设置不同的样式和事件。
------------ -------------------- -------------- ------------------------------------
------ ------- -
------ -
------ -
------------- ----
-
-
-CdSnackbar 组件支持的属性：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| show | Boolean | false | 是否显示提示框 |
| type | String | success | 提示框类型，可选值：success、warning、error、info |
| auto-close | Number | - | 自动关闭时间，单位：毫秒（大于 0 时为自动关闭提示框） |
3.2 工具函数
ci360-dashboard-common-vue 提供了一些实用的工具函数，可以用来处理字符串、日期等。
3.2.1 formatDate
formatDate 函数用于格式化日期，接受日期和格式化字符串作为参数，返回格式化后的日期字符串。
------ - ---------- - ---- ----------------------------- ----- --- - --- ------- ----- ------------- - --------------- ----------- ----------- --------------------------- -- ------------- --------
3.2.2 truncateString
truncateString 函数用于截取字符串，接受字符串和长度作为参数，返回截取后的字符串。
------ - -------------- - ---- ----------------------------- ----- --- - ------ -------- ----- ------------ - ------------------- --- -------------------------- -- -----------
4. 示例代码
以下是一个使用 ci360-dashboard-common-vue 的示例代码：
----------
-----
---------- -------------- ----------- -----------------------------------
------------ -------------------- -------------- ------------------------------------
------
-----------
--------
------ - --------- ---------- - ---- -----------------------------
------ ------- -
----------- -
---------
----------
--
------ -
------ -
------------- -----
-
--
-------- -
------------- -
-- -- -----
----------------- - -----
-
-
-
---------5. 总结
ci360-dashboard-common-vue 提供了一些实用、高效的组件和工具函数，可以让前端开发更加便捷、高效。在开发过程中，可以根据具体需求选择相应的组件和函数使用，提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005683a81e8991b448e44fa