简介
wetfish-basic 是一个基于 JavaScript 的 npm 包，它提供了一些常用的工具函数和组件，方便前端开发者使用，如日期时间格式化、字符串加密、表单验证等等。该包可以在 Node.js 环境和浏览器中使用。
安装
在使用 wetfish-basic 之前，首先要安装它。可以在终端中使用 npm 安装：
npm install wetfish-basic --save
这个命令会将 wetfish-basic 安装在项目的 node_modules 目录中，并将其添加到项目的 package.json 文件的 dependencies 中。
使用
下面介绍 wetfish-basic 的一些常用功能以及如何使用它们。
日期时间格式化
wetfish-basic 提供了一个 formatDate 函数，可以将日期时间对象格式化成指定的日期时间格式。例如：
import { formatDate } from 'wetfish-basic';
const date = new Date('2022-01-01T00:00:00.000Z');
const formattedDate = formatDate(date, 'yyyy-MM-dd HH:mm:ss');
console.log(formattedDate); // '2022-01-01 00:00:00'该函数接受两个参数：第一个参数是要格式化的日期时间对象，第二个参数是日期时间的格式字符串。在格式字符串中，可以使用几个占位符表示年份、月份、日、小时、分钟、秒等等，例如:
- yyyy：四位数年份
- MM：两位数月份
- dd：两位数日期
- HH：两位数小时（24小时制）
- mm：两位数分钟
- ss：两位数秒钟
具体可以参考 moment.js。
字符串加密
wetfish-basic 提供了一个 encrypt 函数，可以对字符串进行加密。例如：
import { encrypt } from 'wetfish-basic';
const password = '123456';
const encryptedPassword = encrypt(password);
console.log(encryptedPassword); // 'e10adc3949ba59abbe56e057f20f883e'表单验证
wetfish-basic 提供了一些常用的表单验证函数，可以帮助我们验证表单输入的合法性。例如：
import { isEmail } from 'wetfish-basic';
const email = 'test@example.com';
if (!isEmail(email)) {
console.error('邮箱格式不正确！');
}该函数接受一个参数，即要验证的字符串。isEmail 函数可以验证一个字符串是否是合法的电子邮件地址。
目前 wetfish-basic 支持的表单验证函数如下：
- isEmail：验证是否是合法的电子邮件地址
- isPhoneNumber：验证是否是合法的手机号码（中国大陆）
- isIDCard：验证是否是合法的中国居民身份证号码
- isUrl：验证是否是合法的 URL 地址
- isZipcode：验证是否是合法的中国邮政编码
组件
除了函数之外，wetfish-basic 还提供了一些常用的组件，例如下拉框、弹窗等等。
下拉框
wetfish-basic 提供了一个 Dropdown 组件，可以用于实现下拉框。使用方法如下：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
----- -------- - --- ----------
--- --------------- -- -------------
-------- -
- ------ ---- ------ ----- --
- ------ ---- ------ ----- --
- ------ ---- ------ ----- -
--
--------- ------- ------ -- -
---------------- ----------- ------------
-
---该组件接受一个对象作为参数，该对象包含以下属性：
- el：组件要挂载到的元素的选择器
- options：下拉框的选项，是一个数组，每个元素都是一个对象，该对象包含两个属性：value 和 label，分别表示选项的值和显示文本。
- onSelect：选中选项时的回调函数，接受两个参数：value 和 label，分别表示选中的选项的值和显示文本。
弹窗
wetfish-basic 提供了一个 Modal 组件，可以用于实现弹窗。使用方法如下：
-- -------------------- ---- -------
------ - ----- - ---- ----------------
----- ----- - --- -------
------ ----- -- ----
-------- ----------- -- ----
---------- -- -- -
------------------------
--
--------- -- -- -
------------------------
-
---
-- ----
-------------该组件接受一个对象作为参数，该对象包含以下属性：
- title：弹窗标题
- content：弹窗内容
- onConfirm：确认按钮的回调函数
- onCancel：取消按钮的回调函数
更多
wetfish-basic 还提供了许多其他的工具函数和组件，例如字符串截取、数字格式化、倒计时等等，详情可以参考 官方文档。
结语
wetfish-basic 是一个非常实用的 npm 包，它提供了许多常用的工具函数和组件，可以帮助前端开发者提高开发效率。通过本文的介绍，相信读者已经学会了如何安装和使用 wetfish-basic，并可以在日常开发中运用它的各种功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdec9