npm 包 cc-bnp 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

cc-bnp 是一个适用于前端开发的 npm 包，提供了各种实用的工具函数和组件，它基于 Vue.js 和 Element-UI 开发，提供了一些便于使用的 UI 组件和工具函数，并且这个包还具备一些非常有用的功能，例如：数据校验，操作反馈等等。

安装

可以通过 npm 安装 cc-bnp：

npm install cc-bnp

或者直接在 HTML 中引入它。

<head>
  <link rel="stylesheet" href="https://unpkg.com/cc-bnp/lib/cc-bnp.min.css">
  <script src="https://unpkg.com/cc-bnp/lib/cc-bnp.min.js"></script>
</head>

使用

这里我们简单介绍一些常用的工具函数和组件。

工具函数

validatePhone：校验手机号格式是否正确。

import { validatePhone } from "cc-bnp";

console.log(validatePhone("13800138000")); // true
console.log(validatePhone("1380013800")); // false

deepClone：深度复制一个对象。

import { deepClone } from "cc-bnp";

const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = deepClone(obj1);
obj1.a = 4;
console.log(obj2.a); // 1
console.log(obj2.c.d); // 3

formatDate：格式化日期。

import { formatDate } from "cc-bnp";

const date = new Date("2022-01-01 10:10:10");

console.log(formatDate(date, "yyyy/MM/dd hh:mm:ss")); // 2022/01/01 10:10:10
console.log(formatDate(date, "yyyy年MM月dd日 hh时mm分ss秒")); // 2022年01月01日 10时10分10秒

组件

Message

这是一个全局的操作反馈组件，可以用于显示通知。

import { Message } from "cc-bnp";

Message.info("这是一条消息");
Message.success("这是一条成功提示");
Message.error("这是一条错误提示");
Message.warning("这是一条警告提示");
Message.loading("正在加载中...");

PhoneInput

这是一个输入手机号的组件，可以方便地校验手机号格式，还可以限制输入长度。

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

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

UserAvatar

这是一个用户头像组件，可以显示用户头像和用户名，并且支持修改头像。

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

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

总结

以上只是 cc-bnp 包中的一部分功能，实际上还有很多非常实用的工具函数和组件，它们都能为前端开发提供很多便利。希望这篇文章能帮助您更好地了解和使用 cc-bnp。

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