实用函数

相关源文件

• src/components/ThemePicker/index.vue
• src/main.js
• src/utils/auth.js
• src/utils/index.js
• src/utils/validate.js
• tests/unit/utils/param2Obj.spec.js
• tests/unit/utils/parseTime.spec.js

本文档提供了 Vue Element Admin 框架中可用实用函数的全面参考。这些实用程序旨在简化常见的开发任务并在整个应用程序中促进代码重用。

概述

Vue Element Admin 包含一组丰富的实用函数，这些函数分布在多个实用程序模块中。这些实用程序处理诸如日期格式化、URL 操作、身份验证、验证、DOM 操作等常见任务。

来源：src/utils/index.js src/utils/validate.js src/utils/auth.js src/components/ThemePicker/index.vue

日期和时间实用程序

该框架提供了几个函数，用于处理具有灵活格式选项的日期和时间值。

parseTime

解析时间值（时间戳、字符串或 Date 对象），并根据指定的模式进行格式化。

来源：src/utils/index.js11-52 tests/unit/utils/parseTime.spec.js

示例格式

• {y}-{m}-{d} → "2023-05-15"
• {y}/{m}/{d} {h}:{i} → "2023/05/15 14:30"
• {a} → 星期几（中文）

formatTime

将时间值格式化为相对时间（例如，“刚刚”，“5 分钟前”）或日期格式（如果较旧）。

来源：src/utils/index.js59-95

getTime

为特定时间点（例如，一个周期的开始，当前一天）返回一个 Date 对象。

来源：src/utils/index.js240-246

URL 和查询参数工具

用于处理 URL 解析和操作的函数，在处理查询参数时尤其有用。

URL 参数函数

功能	描述	输入	输出
getQueryObject	解析 URL 并提取查询参数	URL 字符串	包含查询参数的对象
param2Obj	将 URL 查询字符串转换为对象	带查询字符串的 URL	解码参数的对象
param	将对象转换为 URL 参数字符串	对象	URL 查询字符串

来源：src/utils/index.js101-180 tests/unit/utils/param2Obj.spec.js

字符串和文本工具

文本处理

来源：src/utils/index.js186-190 src/utils/index.js120-130 src/utils/index.js322-326

数组和对象工具

该框架提供了几个用于高效操作数组和对象的函数。

功能	描述	用途
cleanArray	从数组中删除假值	cleanArray([0, false, '', 1, true]) → [1, true]
deepClone	创建对象的深拷贝	deepClone(complexObject) → 新的独立对象
objectMerge	递归合并两个对象	objectMerge(target, source) → 合并后的对象
uniqueArr	从数组中删除重复项	uniqueArr([1, 2, 2, 3]) → [1, 2, 3]

来源：src/utils/index.js136-144 src/utils/index.js296-309 src/utils/index.js198-214 src/utils/index.js315-317

DOM 操作工具

用于处理 DOM 元素（特别是操作 CSS 类）的实用程序。

来源：src/utils/index.js220-357

函数工具

debounce

限制函数触发的速率，在事件处理程序中优化性能很有用。

来源：src/utils/index.js254-287

身份验证工具

用于通过 Cookie 处理 JWT 令牌的包装器函数。

功能	描述	返回值
getToken	从 Cookie 中检索令牌	令牌字符串或 undefined
setToken	在 Cookie 中设置令牌	Cookie 对象
removeToken	从 Cookie 中删除令牌	Cookie 删除结果

来源：src/utils/auth.js

验证工具

验证模块提供了一组函数来验证不同类型的数据和格式。

来源：src/utils/validate.js

通用验证函数

功能	目的	验证逻辑
isExternal	检查路径是否为外部 URL	测试 https:, mailto:, tel: 协议
validUsername	验证用户名	与 valid_map 数组进行比较
validURL	验证 URL 格式	使用正则表达式检查 URL 模式
validEmail	验证电子邮件地址	使用正则表达式检查电子邮件模式
validLowerCase	检查是否仅为小写字母	测试 a-z 模式
validUpperCase	检查是否仅为大写字母	测试 A-Z 模式
isString	检查值是否为字符串类型	使用 typeof 或 instanceof 进行类型检查
isArray	检查值是否为数组	使用 Array.isArray 或旧版浏览器的回退

来源：src/utils/validate.js9-87

主题工具

ThemePicker 组件包含用于操作颜色的实用程序，以支持动态主题更改。

来源：src/components/ThemePicker/index.vue112-156

在应用程序中的使用

实用函数在 Vue Element Admin 应用程序中广泛使用，以支持各种功能。

来源： src/main.js src/utils/index.js src/utils/validate.js src/utils/auth.js src/components/ThemePicker/index.vue

最佳实践

在使用 Vue Element Admin 框架中的工具函数时，请考虑以下最佳实践：

1. 性能优化:

   • 对于可能快速触发的事件处理程序（例如滚动或窗口大小调整事件），请使用 debounce。
   • 对于简单对象，请优先使用 deepClone，但对于复杂嵌套对象，请考虑使用 lodash 的 _.cloneDeep。

2. 日期处理:

   • 使用带有显式格式字符串的 parseTime 来实现一致的日期显示。
   • 在 UI 中显示用户友好的相对时间时，请考虑使用 formatTime。

3. 验证:

   • 组合验证函数以满足复杂的验证需求。
   • 根据需要扩展验证工具，以实现项目特定的验证规则。

4. 类名操作:

   • 使用类名工具，而不是直接操作 className，以获得更好的跨浏览器兼容性。

有关使用 Vue Element Admin 进行开发的最佳实践的更多信息，请参阅 最佳实践。