npm 包 ci360-dashboard-common-vue 使用教程-JavaScript中文网-JavaScript教程资源分享门户

1. 简介

ci360-dashboard-common-vue 是一个基于 Vue.js 框架的 npm 包，提供了一些公共的组件、样式和工具函数。它旨在为前端开发者提供更便捷、高效的开发体验。

2. 安装

通过 npm 安装 ci360-dashboard-common-vue：

npm install ci360-dashboard-common-vue --save

3. 使用

在 Vue 项目中，可以通过 import 命令引入 ci360-dashboard-common-vue：

import Vue from 'vue';
import Ci360DashboardCommonVue from 'ci360-dashboard-common-vue';

Vue.use(Ci360DashboardCommonVue);

就可以在组件中使用 ci360-dashboard-common-vue 提供的组件和函数了。

3.1 组件

ci360-dashboard-common-vue 提供了一些常用的组件：

3.1.1 CdButton

CdButton 组件是一个样式统一的按钮组件，可以通过属性传递不同的样式和事件。

<cd-button class="main-button" @click="handleClick">Click Me</cd-button>

export default {
  methods: {
    handleClick() {
      console.log('Button Clicked');
    }
  }
}

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 图标库。

<cd-icon name="user" />

CdIcon 组件支持的属性：

属性名	类型	默认值	描述
name	String	-	图标名称（使用 font-awesome 图标库）

3.1.3 CdInput

CdInput 组件是一个样式统一的输入框组件，可以通过属性设置不同的样式和事件。

<cd-input v-model="inputValue" placeholder="请输入用户名" />

export default {
  data() {
    return {
      inputValue: ''
    }
  }
}

CdInput 组件支持的属性：

属性名	类型	默认值	描述
type	String	text	输入框类型，可选值：text、password
placeholder	String	-	输入框 placeholder 显示的文本
readonly	Boolean	false	是否只读
disabled	Boolean	false	是否禁用
clearable	Boolean	false	是否显示清空按钮

3.1.4 CdSnackbar

CdSnackbar 组件是一个消息提示组件，可以通过属性设置不同的样式和事件。

<cd-snackbar :show="showSnackbar" type="success" auto-close="2000">提交成功</cd-snackbar>

export default {
  data() {
    return {
      showSnackbar: true
    }
  }
}

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 函数用于格式化日期，接受日期和格式化字符串作为参数，返回格式化后的日期字符串。

import { formatDate } from 'ci360-dashboard-common-vue';

const now = new Date();
const formattedDate = formatDate(now, 'yyyy-MM-dd hh:mm:ss');

console.log(formattedDate); // 输出：2019-12-30 12:34:56

3.2.2 truncateString

truncateString 函数用于截取字符串，接受字符串和长度作为参数，返回截取后的字符串。

import { truncateString } from 'ci360-dashboard-common-vue';

const str = 'Hello World!';
const truncatedStr = truncateString(str, 5);

console.log(truncatedStr); // 输出：Hello...

4. 示例代码

以下是一个使用 ci360-dashboard-common-vue 的示例代码：

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

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

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

5. 总结

ci360-dashboard-common-vue 提供了一些实用、高效的组件和工具函数，可以让前端开发更加便捷、高效。在开发过程中，可以根据具体需求选择相应的组件和函数使用，提高开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005683a81e8991b448e44fa