feat: 常用工具类
This commit is contained in:
WANGFan
parent
d740af9da4
commit
dcc390e36a
@ -107,7 +107,7 @@ export default {
|
||||
["audio"]: "audio",
|
||||
["recorder"]: "recorder",
|
||||
["virtual-list"]: "virtual-list",
|
||||
["tools"]: "tools",
|
||||
["common-tools"]: "common tools",
|
||||
["test"]: "test"
|
||||
}
|
||||
};
|
||||
|
||||
@ -107,7 +107,7 @@ export default {
|
||||
["audio"]: "音频",
|
||||
["recorder"]: "录音",
|
||||
["virtual-list"]: "虚拟列表",
|
||||
["tools"]: "工具类",
|
||||
["common-tools"]: "常用工具类",
|
||||
["test"]: "测试"
|
||||
}
|
||||
};
|
||||
|
||||
@ -845,11 +845,11 @@ export const systemMenu = [
|
||||
{
|
||||
id: "0902",
|
||||
parentId: "09",
|
||||
path: "/functions/tools",
|
||||
name: "tools",
|
||||
component: "functions/tools/tools",
|
||||
path: "/functions/common-tools",
|
||||
name: "common-tools",
|
||||
component: "functions/common-tools/common-tools",
|
||||
meta: {
|
||||
title: "tools",
|
||||
title: "common-tools",
|
||||
hide: false,
|
||||
disable: false,
|
||||
keepAlive: true,
|
||||
|
||||
@ -24,10 +24,10 @@ export const getColorHexColor = () => `#${Math.floor(Math.random() * 0xfffff).to
|
||||
|
||||
/**
|
||||
* 判断变量数据类型
|
||||
* @param { any } obj 需要判断数据类型的变量
|
||||
* @param { any } val 需要判断数据类型的变量
|
||||
* @return 数据类型
|
||||
*/
|
||||
export const getObjType = (obj: any) => {
|
||||
export const getObjType = (val: any) => {
|
||||
const toString = Object.prototype.toString;
|
||||
const map: any = {
|
||||
"[object Boolean]": "boolean",
|
||||
@ -39,19 +39,20 @@ export const getObjType = (obj: any) => {
|
||||
"[object RegExp]": "regExp",
|
||||
"[object Undefined]": "undefined",
|
||||
"[object Null]": "null",
|
||||
"[object Object]": "object"
|
||||
"[object Object]": "object",
|
||||
"[object Symbol]": "symbol"
|
||||
};
|
||||
// 如果是节点
|
||||
if (obj instanceof Element) {
|
||||
if (val instanceof Element) {
|
||||
return "element";
|
||||
}
|
||||
// 通过toString.call 判断是哪个类型
|
||||
// 判断的值为类型[object Boolean]， 通过对象取值返回
|
||||
return map[toString.call(obj)];
|
||||
return map[toString.call(val)];
|
||||
};
|
||||
|
||||
/**
|
||||
* 数组去重
|
||||
* 基本数据类型数组去重
|
||||
* @param { array } v 需要去重的数组
|
||||
* @return 去重后的数组
|
||||
*/
|
||||
@ -114,6 +115,8 @@ export const Difference = (newObj: any, oldObj: any) => {
|
||||
|
||||
/***
|
||||
* 删除数组中多个指定元素
|
||||
* 根据指定的key比对是否匹配，匹配则删除，最后返回删除后的数组
|
||||
* arrMoreDeletion(arr, [2,3,4], 'id')
|
||||
* @param {array} arr 原数组
|
||||
* @param {array} keys 需要删除的key数组
|
||||
* @param {string | number} key 根据指定key删除
|
||||
@ -241,7 +244,7 @@ export const closest = (arr: number[], num: number) => {
|
||||
};
|
||||
|
||||
/***
|
||||
* 根据上限值计算涨幅和减幅
|
||||
* 根据标准值计算当前值的涨幅和减幅
|
||||
* @param {number} current 当前值
|
||||
* @param {number} base 标准值
|
||||
* @description 返回{ percent: 10, type: 1, text: '涨幅10.00%' }格式
|
||||
|
||||
239
src/views/functions/common-tools/common-tools.vue
Normal file
239
src/views/functions/common-tools/common-tools.vue
Normal file
@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="snow-page">
|
||||
<div class="snow-inner">
|
||||
<a-alert type="success">工具类位置: src/utils/common-tools.ts</a-alert>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>小驼峰转小写下划线: toUnderline</div>
|
||||
<div>示例: userNameInfo -> user_name_info</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>toUnderline(需要转换的字符串)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>下划线命名转小驼峰: getCamelCase</div>
|
||||
<div>示例: user_name_info -> userNameInfo</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>getCamelCase(需要转换的字符串)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>生成随机Hex颜色: getColorHexColor</div>
|
||||
<div>该函数会随机生成并返回一个Hex的色值，如：#1eb31</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>getColorHexColor()</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>判断变量数据类型: getObjType</div>
|
||||
<div>
|
||||
该函数会判断传入的变量类型并返回，如: boolean / number / string / function / object / array / date / regExp / undefined
|
||||
/ null / object / symbol
|
||||
</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>getObjType(需要判断的变量)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>基本数据类型数组去重: arrSet</div>
|
||||
<div>该函数会对基本数据类型数组去重，返回去重后的数组</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>arrSet(需要去重的数组)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>数组对象去重: arrObjSet</div>
|
||||
<div>该函数会对数组对象去重，返回去重后的数组</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>arrObjSet(需要去重的数组)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>数组对象根据指定key去重: somethingSet</div>
|
||||
<div>该函数会根据指定key对数组对象去重，返回去重后的数组</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>somethingSet(需要去重的数组, 指定的key)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>排序-根据条件对数组对象排序: toSort</div>
|
||||
<div>该函数可根据指定key对数组对象排序，可设定升序、降序</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>toSort(需要去重的数组, 指定key, 升序或降序)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>比对新对象和旧对象的差异值，返回新对象的差异值: Difference</div>
|
||||
<div>根据传入的新、旧Objct进行比对，返回他们的差异值(只比对顶层)</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>Difference(新Object, 旧Object)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>删除数组中多个指定元素: arrMoreDeletion</div>
|
||||
<div>根据指定的key比对是否匹配，匹配则删除，最后返回删除后的数组，如：arrMoreDeletion(arr, [2,3,4], 'id')</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>arrMoreDeletion(原数组, [key的对应值], 指定的key)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>无条件A/B数组交叉合并: crossList</div>
|
||||
<div>该函数会交叉合并A/B数组，返回合并后的数组</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>crossList(A数组, B数组)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>生成指定长度的随机字符串: randomString</div>
|
||||
<div>包含数字、英文大小写，示例：randomString(5)</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>randomString(指定随机字符串长度)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>获取数值在数组中的近似值: closest</div>
|
||||
<div>根据传入的值匹配数字数组中值最接近的数字并返回</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>closest(数字数组, 需要匹配的值)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>根据标准值计算当前值的涨幅和减幅: getPercent</div>
|
||||
<div>
|
||||
该函数会根据传入的当前值、标准值进行计算，基于标准值计算出涨幅和减幅幅度，返回
|
||||
<a-typography-text code>{ percent: 10, type: 1, text: '涨幅10.00%'}</a-typography-text>
|
||||
格式
|
||||
</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>getPercent(当前值, 标准值)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>根据涨幅和减幅计算实际值: getValue</div>
|
||||
<div>该函数会根据涨幅或减幅计算最终结果，示例：getValue(100, {type: 1, percent: 10})</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>getValue(当前值, {type: 1涨幅2减幅, percent: 幅度百分比})</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>判断是否为空对象: isEmptyObject</div>
|
||||
<div>该函数会判断传入参数是否是空对象，返回true/false，区分Object/Array等类型</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>isEmptyObject(传入的值)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>判断是否为安全环境: isSecureEnvironment</div>
|
||||
<div>返回true/false，安全环境为：https / localhost / 127.0.0.1 / 0.0.0.0</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>isSecureEnvironment()</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>获取浏览器默认语言: webDefaultLanguage</div>
|
||||
<div>返回字符串，如：zh-CN</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>webDefaultLanguage()</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>深拷贝变量: deepClone</div>
|
||||
<div>返回深拷贝后的值</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>deepClone(需要深拷贝的变量)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>获取URL附带的参数: getQueryParams</div>
|
||||
<div>解析url?之后的参数转化为object的数据，默认取当前网页的url</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>getQueryParams(url)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>截断字符串: truncateString</div>
|
||||
<div>截断字符串，如果字符串超过指定长度，则截断并添加省略号</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>truncateString(字符串, 需要截断的长度)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>去掉字符串前后空格: verifyAndSpace</div>
|
||||
<div>该函数会去掉并返回字符串的前后空格</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>verifyAndSpace(字符串)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>去掉字符串的所有中文和空格: verifyCnAndSpace</div>
|
||||
<div>该函数会去掉字符串的所有中文和空格并返回新字符串</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>verifyCnAndSpace(字符串)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>去掉前后空格和字符串中的英文: verifyEnAndSpace</div>
|
||||
<div>该函数会返回纯非英文不包含前后空格的字符串</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>verifyEnAndSpace(字符串)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>数字转中文大写: verifyNumberCnUppercase</div>
|
||||
<div>根据传入的数字转成中文大写字符串并返回，如：verifyNumberCnUppercase(1506045) -> 壹佰伍拾万陆仟零肆拾伍元整</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>verifyNumberCnUppercase(数字)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,114 +0,0 @@
|
||||
<template>
|
||||
<div class="snow-page">
|
||||
<div class="snow-inner">
|
||||
<a-alert type="success">工具类位置: src/utils/index.ts</a-alert>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>判断是否为空对象: isEmptyObject</div>
|
||||
<div>该函数会根据传入变量判断是否为空对象并返回true/false，区分Object、Array</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>isEmptyObject(需要判断的变量)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>判断是否为安全环境: isSecureEnvironment</div>
|
||||
<div>返回true/fasne，安全环境为https / localhost / 127.0.0.1 / 0.0.0.0</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>isSecureEnvironment()</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>时间戳转年月日时分秒: getTimestamp</div>
|
||||
<div>
|
||||
年：<a-typography-text code> {{ getTimestamp(Date.now(), "yyyy") }}</a-typography-text>
|
||||
</div>
|
||||
<div>
|
||||
年月：<a-typography-text code> {{ getTimestamp(Date.now(), "yyyy-MM") }}</a-typography-text>
|
||||
</div>
|
||||
<div>
|
||||
年月日：<a-typography-text code> {{ getTimestamp(Date.now(), "yyyy-MM-dd") }}</a-typography-text>
|
||||
</div>
|
||||
<div>
|
||||
年月日时分秒：<a-typography-text code> {{ getTimestamp(Date.now(), "yyyy-MM-dd hh:mm:ss") }}</a-typography-text>
|
||||
</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>getTimestamp(时间戳, 时间格式)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>获取浏览器默认语言: webDefaultLanguage</div>
|
||||
<div>该函数会获取浏览器默认语言</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>webDefaultLanguage()</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>查找指定节点的所有父级节点: findParentsTailRecursive</div>
|
||||
<div>该函数会根据指定节点查找包含当前节点的所有直属父级节点</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>findParentsTailRecursive(树形结构数据, 指定节点key)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>数组扁平化-多维转一维: arrayFlattened</div>
|
||||
<div>该函数会根据指定key扁平化数组</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>arrayFlattened(多维数组, 嵌套的key)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>深拷贝: deepClone</div>
|
||||
<div>该函数会返回一个与拷贝数据一致的深拷贝变量</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>deepClone(需要深拷贝的变量)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>乱序的一维数组转化树形结构: buildTreeOptimized</div>
|
||||
<div>该函数会返回根据parentId将乱序的一维数组转化为树形结构，返回转化好的树形结构</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>buildTreeOptimized(nodes)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>根据当前日期前推指定日期: getDatesForwardDate</div>
|
||||
<div>该函数会根据当前日期前推指定天数，返回前推天数的日期和当前日期，格式：[YYYY-MM-DD, YYYY-MM-DD]</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>getDatesForwardDate(需要前推的天数)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-space direction="vertical" fill>
|
||||
<div>根据指定id递归树查到指定节点: findCategoryById</div>
|
||||
<div>该函数会根据指定节点id递归查找树结构，返回查找到的节点，未找到则返回null</div>
|
||||
<div>
|
||||
使用方式：
|
||||
<a-typography-text code>findCategoryById(树形结构, 指定id)</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getTimestamp } from "@/utils/index";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Loading…
x
Reference in New Issue
Block a user