防抖
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result;
const later = function() {
const last = +new Date() - timestamp;
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function(...args) {
context = this;
timestamp = +new Date();
const callNow = immediate && !timeout;
// 如果延时不存在,重新设定延时
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
}
//使用方式
searchChange: debounce(function() {。。。}, 500),
节流
/**
* 节流
* @param {函数名} fnName
* @param {函数} fn
* @param {时间间距} interval
*/
export function throttle(fnName, fn, interval = 500) {
if (!fnName) return;
if (throttleObj[fnName]) return; // 时间间隔内不执行
throttleObj[fnName] = true;
setTimeout(() => {
fn.apply(this, arguments);
delete throttleObj[fnName];
}, interval);
}
金额精度处理
export function roundFractional(x, n) {
return Math.round(x * Math.pow(10, n)) / Math.pow(10, n);
}
金额过万处理
export function million(value) {
let num;
if (value > 9999) {
//大于9999显示x.xx万
num = Math.floor(value / 1000) / 10 + "W";
} else if (value < 9999 && value > -9999) {
num = value;
} else if (value < -9999) {
//小于-9999显示-x.xx万
num = -(Math.floor(Math.abs(value) / 1000) / 10) + "W";
}
return num;
}
获取url中的参数
export function getWindonHref() {
const searchPar = new URLSearchParams(window.location.search);
const paramsObj = {};
for (const [key, value] of searchPar.entries()) {
paramsObj[key] = value;
}
return paramsObj;
}
验证邮箱的正则表达式
export function isAvailableEmail(sEmail) {
var reg = /^([\w+\.])+@\w+([.]\w+)+$/;
return reg.test(sEmail);
}
校验数据类型
/**
*校验数据类型
* typeOf([]) // array
* typeOf(null) // null
*/
export function typeOf(obj) {
return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
数组对象根据字段去重
/**
*数组对象根据字段去重
queArrayObject(myList,'id')
* @param {要去重的数组} arr
* @param {根据去重的字段名} key
* @returns
*
*/
export function queArrayObject(arr = [], key = "id") {
if (arr.length === 0) return;
let list = [];
const map = {};
arr.forEach((item) => {
if (!map[item[key]]) {
map[item[key]] = item;
}
});
list = Object.values(map);
return list;
}
滚动到页面顶部
/**
*滚动到页面顶部
*/
export function scrollToTop() {
const height = document.documentElement.scrollTop || document.body.scrollTop;
if (height > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, height - height / 8);
}
}
滚动到元素位置
/**
*滚动到元素位置
smoothScroll('#target'); // 平滑滚动到 ID 为 target 的元素
* @param {*} element
*/
export function smoothScroll(element) {
document.querySelector(element).scrollIntoView({
behavior: "smooth",
});
}
下载文件
/**
* 下载文件
*downloadFile('/api/download', {id}, '文件名')
* @param {接口} api
* @param {请求参数} params
* @param {文件名} fileName
* @param {get/post} type
*/
export function downloadFile(api, params, fileName, type = "get") {
axios({
method: type,
url: api,
responseType: "blob",
params: params,
})
.then((res) => {
let str = res.headers["content-disposition"];
if (!res || !str) {
return;
}
let suffix = "";
// 截取文件名和文件类型
if (str.lastIndexOf(".")) {
fileName
?
"" :
(fileName = decodeURI(
str.substring(str.indexOf("=") + 1, str.lastIndexOf("."))
));
suffix = str.substring(str.lastIndexOf("."), str.length);
}
// 如果支持微软的文件下载方式(ie10+浏览器)
if (window.navigator.msSaveBlob) {
try {
const blobObject = new Blob([res.data]);
window.navigator.msSaveBlob(blobObject, fileName + suffix);
} catch (e) {
console.log(e);
}
} else {
// 其他浏览器
let url = window.URL.createObjectURL(res.data);
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", fileName + suffix);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(link.href);
}
})
.catch((err) => {
console.log(err.message);
});
}
遍历树节点
/**
*遍历树节点
* @param {树形结构列表} data
* @param {回调} callback
* @param {子集名字} childrenName
* 示例:
* let result
foreachTree(data, (item) => {
if (item.id === 9) {
result = item
}
})
*/
export function foreachTree(data, callback, childrenName = "children") {
for (let i = 0; i < data.length; i++) {
callback(data[i]);
if (data[i][childrenName] && data[i][childrenName].length > 0) {
foreachTree(data[i][childrenName], callback, childrenName);
}
}
}
DOM元素转换成图片
/**
* DOM元素转换成图片
* @param {id名} idName
* @param {是否下载} download
* @param {放大倍数} enlarge
*注意安装html2canvas
*/
DOMSwitchImage(idName, download = true, enlarge = 3) {
let scrollX = 0;
// switch (window.screen.width + '*' + window.screen.height) {
// case '1920*1080':
// scrollX = 5;
// break;
// case '1680*1050':
// scrollX = 0;
// break;
// case '1600*900':
// scrollX = -6;
// break;
// case '1440*900':
// scrollX = -85;
// break;
// case '1366*768':
// scrollX = -123;
// break;
// case '1280*800':
// scrollX = -165;
// break;
// case '800*600':
// scrollX = -200;
// break;
// }
return new Promise(async (resolve, reject) => {
let id = document.getElementById(idName),
height = parseInt(id.style.height) + 50 + "px",
opts = {
logging: true, // 启用日志记录以进行调试 (发现加上对去白边有帮助)
useCORS: true, // 如果截图的内容里有图片,解决文件跨域问题
allowTaint: true, // 否允许跨源图像污染画布
backgroundColor: null, // 解决生成的图片有白边
height: id.offsetHeight, //canvas 窗口的高度
// height: height,
width: id.offsetWidth,
// windowWidth: document.body.scrollWidth,
scrollX: scrollX,
// x: 0,
// y: height, // 页面在垂直方向的滚动距离
// windowHeight: document.body.scrollHeight,
windowHeight: height, // 获取y方向滚动条中的内容
dpi: window.devicePixelRatio * enlarge, // 解决图片不清晰问题
scale: enlarge,
};
document.body.scrollLeft =
document.body.scrollTop =
document.documentElement.scrollTop =
document.documentElement.scrollLeft =
0;
let canvas = await html2canvas(id, opts);
const context = canvas.getContext("2d");
// 关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
//
let url = canvas.toDataURL("image/png");
if (download) {
this.labelDownload(url);
}
resolve(url);
});
},
bs64转文件流
/**
* bs64转文件流
* @param {base64} dataurl
* @param {*} filename
*/
base64toFile(dataurl, filename = "file") {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let suffix = mime.split("/")[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime,
});
},